<template>
  <el-dialog
    :title="modalType === 'add' ? '新增' : '详情'"
    width="80%"
    :visible.sync="modal"
    :close-on-click-modal="false"
    @close="$emit('cancel')"
  >
    <el-form ref="ruleForm" :model="form" :rules="rules">
      <divider-container title="基本信息">
        <el-form-item prop="word">
          <el-row :gutter="10">
            <el-col class="txt-right" :span="4">热搜词：</el-col>
            <el-col :span="20">
              <el-input
                v-model="form.word"
                style="max-width: 300px;"
                autocomplete="off"
              />
            </el-col>
          </el-row>
        </el-form-item>
        <el-row :gutter="10">
          <el-col class="txt-right" :span="4">置顶状态：</el-col>
          <el-col :span="20">
            <el-checkbox v-model="form.isTop">置顶</el-checkbox>
          </el-col>
        </el-row>
        <el-form-item prop="sort">
          <el-row :gutter="10">
            <el-col class="txt-right" :span="4">排序（倒序）：</el-col>
            <el-col :span="20">
              <el-input-number
                v-model="form.sort"
                controls-position="right"
                :min="0"
                :max="10000"
              />
            </el-col>
          </el-row>
        </el-form-item>
      </divider-container>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit('ruleForm')">保存</el-button>
      <el-button @click="modal = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { setStatus } from '@/utils'
import EMITKEY from '@/const/emitNameKey'
import { getItem, saveItem } from '@/model/hotwords'

export default {
  name: 'HotWordItem',

  props: {
    id: {
      type: String,
      default: ''
    },
    modalType: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      modal: true,
      info: {},

      form: {
        word: '',
        isTop: false,
        sort: null
      },
      rules: {
        word: [{ required: true, message: '请输入热搜词', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入优先度(1~9)', trigger: 'blur' }]
      },

      val: []
    }
  },

  mounted() {
    this.id && this.loadData()
  },

  methods: {

    async loadData() {
      const { success, data, msg } = await getItem({
        id: this.id
      })
      if (success) {
        Object.assign(this.form, data)
      } else {
        console.warn(msg)
      }
    },

    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveData()
        }
      })
    },

    async saveData() {
      const { success, msg } = await saveItem({
        id: this.id,
        data: {
          isTop: this.form.isTop,
          sort: this.form.sort,
          word: this.form.word
        }
      })
      if (success) {
        this.$message.success('操作成功~')
        this.bus.$emit(EMITKEY.HOTWORDRELOAD)
        this.modal = false
      } else {
        this.$message.error(msg)
      }
    }
  }
}
</script>

<style scoped>
.mt-60 {
  margin-top: 60px;
}
.btn-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.mcol-20 .el-row {
  font-size: 14px;
  line-height: 1.7;
  padding-top: 14px;
}
.search-box {
  border: 1px #DCDEE2 solid;
  padding: 5px;
}
.search-box .search-input {
  margin: 0 5px;
  max-width: 200px;
}
</style>
