<template>
  <div>
    <el-dialog :title="!tmpTag.ID ? '新建Tag词' : '编辑Tag词'" :visible.sync="isShow" v-if="isShow" class="tag-word-dialog">
      <el-form :model="tmpTag" ref="tagForm" label-width="100px">
        <el-form-item prop="tagWord" label="Tag词：" :verify="['NotNull']">
          <el-input type="text" v-model="tmpTag.tagWord" auto-complete="off"></el-input>
        </el-form-item>
        <div style="text-align:center;padding-bottom: 12px;padding-top: 5px;" v-if="!tmpTag.ID">(多个Tag词之间用逗号隔开)</div>
        <!-- <el-form-item prop="contentType" label="内容类型：" :verify="['NotNull']">
          <el-select v-model="tmpTag.contentType" clearable  placeholder="请选择内容类型" style="width: 135px;">
            <el-option v-for="contentType in contentTypes" :key="contentType.value" :label="contentType.label" :value="contentType.value"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item prop="useCount" label="使用次数：">
          <el-input-number v-model="tmpTag.useCount" :step="1" :min="0" class="tag-user-count"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirmTagClick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import util from '@src/common/util.js'

export default {
  data() {
    return {}
  },
  computed: {
    isShow: {
      get() {
        return this.addTagDialog
      },
      set(val) {
        this.$emit('update:addTagDialog', val)
      }
    }
  },
  methods: {
    keywordsChange(val) {
      this.tmpTag.tagWord = val
      if (this.tmpTag.tagWord) {
        this.$refs.tagForm.validateField('tagWord')
      }
    },
    // 验证Tag词事件
    async confirmTagClick() {
      try {
        await util.validateForm(this.$refs['tagForm'])
      } catch (e) {
        util.showErrorMessageBox(e)
        return
      }
      if (!this.tmpTag.ID) {
        let res = await axios.post('/ui/tagwords', this.tmpTag)
        if (res.data.status === 1) {
          this.isShow = false
          util.showMessage(res)
          this.$emit('callback')
        } else {
          util.showErrorMessageBox(res.data.message)
        }
      } else {
        if (this.tmpTag.tagWord.length > 50) {
          util.showErrorMessageBox('Tag词最大长度为50')
          return
        }
        let res = await axios.put(`/ui/tagwords/${this.tmpTag.ID}`, this.tmpTag)
        if (res.data.status === 1) {
          this.isShow = false
          util.showMessage(res)
          this.$emit('callback')
        } else {
          util.showErrorMessageBox(res.data.message)
        }
      }
    }
  },

  created() {
    this.$emit('getContentTypes')
  },
  props: {
    addTagDialog: {
      type: Boolean,
      required: true
    },
    contentTypes: {
      type: Array,
      required: true
    },
    tmpTag: {
      type: Object,
      required: true
    }
  }
}
</script>

<style>
/* 在一般情况下dialog宽为450像素，在逻辑分辨率480像素以下dialog宽为96% */
.tag-word-dialog .el-dialog {
  width: 450px;
}
@media (max-width: 480px) {
  .tag-word-dialog .el-dialog {
    width: 96%;
  }
}
.tag-user-count .el-input-number__increase {
  top: 1px;
}
</style>
<style scoped>

</style>
