<template>
  <a-modal
    :visible="value"
    title="新增标签"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form :form="form">
      <a-form-item label="名称">
        <a-input
          v-decorator="[
            'name',
            {
              rules: [{ required: true, message: '请输入名称' }]
            }
          ]"
        ></a-input>
      </a-form-item>
      <a-form-item label="描述">
        <a-textarea
          v-decorator="[
            'description',
            {
              rules: [{ required: true, message: '请输入描述' }]
            }
          ]"
        >
        </a-textarea>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { addTicketTag } from '@/api/ticketSetting/ticket'
import modalMixin from '@/mixin/modalMixin'
export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  props: {
    tags: {
      type: Array,
      default: () => []
    }
  },
  mixins: [modalMixin],
  methods: {
    handleOk () {
      const name = this.form.getFieldValue('name') || ''
      const description = this.form.getFieldValue('description') || ''
      const existTag = this.tags.find(item => {
        return item.name.toLowerCase() === name.toLowerCase()
      })

      if (existTag) {
        this.$message.error('输入的标签名或描述已存在，请重新输入')
        return
      }

      this.form.validateFields((err, values) => {
        if (!err) {
          addTicketTag({
            name,
            description
          }).then(res => {
            this.$message.success('添加成功')
            this.$emit('update')
            this.handleCancel()
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
