<template>
  <a-drawer
    title="修改字典"
    :maskClosable="false"
    width=650
    placement="right"
    :closable="false"
    @close="onClose"
    :visible="dictEditVisible"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <a-form :form="form">
      <a-form-item label='字典类型' v-bind="formItemLayout">
        <a-input style="width: 100%"
                        v-model="dict.dictType"
                        v-decorator="['dictType',
                   {rules: [
                    { required: true, message: '字典类型不能为空'}
                  ]}]"/>
      </a-form-item>
      <a-form-item label='字典键' v-bind="formItemLayout">
        <a-input
          v-model="dict.dictKey"
                  v-decorator="['dictKey',
                   {rules: [
                    { required: true, message: '字典键不能为空'},
                    { max: 200, message: '长度不能超过200个字符'}
                  ]}]"/>
      </a-form-item>
      <a-form-item label='字典值' v-bind="formItemLayout">
        <a-input
          v-model="dict.dictValue"
          v-decorator="['dictValue',
                   {rules: [
                    { required: true, message: '字典值不能为空'},
                    { max: 200, message: '长度不能超过200个字符'}
                  ]}]"/>
      </a-form-item>
      <a-form-item label='排序' v-bind="formItemLayout">
        <a-input
                v-model="dict.sortIndex"
                v-decorator="['sortIndex',
                   {rules: [
                    { required: true, message: '排序字段不能为空'},
                    { max: 10, message: '排序字段不能超过10个字符'}
                  ]}]"/>
      </a-form-item>
      <a-form-item label='字典备注' v-bind="formItemLayout">
        <a-textarea
                :rows="4"
                v-model="dict.dictRemark"
                v-decorator="[
          'dictRemark',
          {rules: [
            { max: 50, message: '长度不能超过50个字符'}
          ]}]">
        </a-textarea>
      </a-form-item>
    </a-form>
    <div class="drawer-bottom-button">
      <a-popconfirm title="确定放弃修改？" @confirm="onClose" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-drawer>
</template>
<script>
  import baseUtils from '@/utils/baseUtils'
  const formItemLayout = {
    labelCol: { span: 3 },
    wrapperCol: { span: 18 }
  }
  export default {
    name: 'ItemEdit',
    components:{baseUtils},
    props: {
      dictEditVisible: {
        default: false
      }
    },
    data () {
      return {
        submitUrl:'api/v1/platformDict/updateItem', //提交URL
        loading: false,
        formItemLayout,
        form: this.$form.createForm(this),
        dict: {}
      }
    },
    methods: {
      reset () {
        this.loading = false
        this.form.resetFields()
      },
      onClose () {
        this.reset()
        this.$emit('close')
      },
      setFormValues ({...dict}) {
        let fields = ['dictType', 'dictKey', 'dictValue','dictRemark','sortIndex']
        Object.keys(dict).forEach((key) => {
          if (fields.indexOf(key) !== -1) {
            this.form.getFieldDecorator(key)
            let obj = {}
            obj[key] = dict[key]
            this.form.setFieldsValue(obj)
          }
        })
        if(!baseUtils.isNull(dict.dictType)){
          this.form.getFieldDecorator("dictType")
          this.form.setFieldsValue(dict.dictType)
        }
        if(!baseUtils.isNull(dict.dictKey)){
          this.form.getFieldDecorator("dictKey")
          this.form.setFieldsValue(dict.dictKey)
        }
        if(!baseUtils.isNull(dict.dictValue)){
          this.form.getFieldDecorator("dictValue")
          this.form.setFieldsValue(dict.dictValue)
        }
        if(!baseUtils.isNull(dict.sortIndex)){
          this.form.getFieldDecorator("sortIndex")
          this.form.setFieldsValue(dict.sortIndex)
        }
        if(!baseUtils.isNull(dict.dictRemark)){
          this.form.getFieldDecorator("dictRemark")
          this.form.setFieldsValue(dict.dictRemark)
        }
        this.dict.platformDictId = dict.platformDictId
      },
      handleSubmit () {
        this.form.validateFields((err, values) => {
          if (!err) {
            let dict = this.form.getFieldsValue()
            dict.platformDictId = this.dict.platformDictId
            this.loading = true
            this.$postBodyRequest(this.submitUrl, {
              ...dict
            }).then(() => {
              this.reset()
              this.$emit('success')
            }).catch(() => {
              this.loading = false
            })
          }
        })
      }
    }
  }
</script>
