<template>
  <a-modal
    :confirmLoading="loading"
    :visible="visible"
    width="800px"
    :title="title"
    @cancel="visible=false"
    @ok="handleSubmit">
    <a-form-model ref="form" :model="form">
      <a-form-model-item
        v-bind="layout"
        label="名称"
        prop="name"
        :rules="{
          required: true,message:'请输入名称'
        }">
        <a-input allowClear v-model="form.name" :disabled="type==='edit'"></a-input>
      </a-form-model-item>
      <a-form-model-item
        v-bind="layout"
        label="内容"
        prop="content"
        :rules="{
          required: true,message:'请输入提示内容'
        }"
      >
        <Editor ref="editor" v-model="form.content"></Editor>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { addId, updateId } from '@/api/greylist'
import Editor from '@/components/Editor/index.vue'

export default {
  components: {
    Editor
  },
  computed: {
    title () {
      return `${this.type === 'add' ? '新增' : '编辑'} 灰名单提示`
    }
  },
  data () {
    return {
      visible: false,
      loading: false,
      type: 'add',
      form: {
        name: '',
        content: ''
      },
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      }
    }
  },
  methods: {
    show ({ record }) {
      this.visible = true

      this.type = record ? 'edit' : 'add'

      this.$nextTick(() => {
        this.$refs.form.resetFields()
        if (record) {
          this.form = JSON.parse(JSON.stringify(record))
        }
      })
    },
    handleSubmit () {
      this.$refs.form.validate(valid => {
        if (!valid) return
        this.loading = true
        this.type === 'add' ? this.addId() : this.updateId()
      })
    },
    addId () {
      addId(this.form).then(res => {
        this.$message.success('添加成功')
        this.visible = false
        this.$emit('update')
      }).finally(() => {
        this.loading = false
      })
    },
    updateId () {
      updateId(this.form).then(res => {
        this.$message.success('操作成功')
        this.visible = false
        this.$emit('update')
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
