<template>
  <div>
    <a-modal
      class="modalBox"
      :title="titleText"
      v-model="isshow"
      @cancle="cancel"
      :centered="true"
      width="45%">
      <a-form :form="form" @submit="handleSubmit">
        <!-- 类别编码 -->
        <a-form-item label="类别编码" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
          <a-input
            id="codeModal-code"
            placeholder="请输入类别编码"
            :disabled="true"
            allowClear
            v-decorator="['formData.code', {
              initialValue: formData.code,getValueFromEvent: $filterEmpty,
              rules: [{ required: true, message: '请输入类别编码!' }] }]"
          />
        </a-form-item>

        <!-- 名称 -->
        <a-form-item label="名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
          <a-input
            placeholder="请输入名称30个字以内"
            id="codeModal-name"
            allowClear
            :maxLength="30"
            v-decorator="['formData.name', {
              initialValue: formData.name,getValueFromEvent: $filterEmpty,
              rules: [{ required: true, message: '请输入名称30个字以内!' }] }]"
          />
        </a-form-item>

        <!-- 排序值 -->
        <a-form-item label="排序值" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
          <a-input
            type="number"
            placeholder="请输入排序值"
            id="codeModal-sort"
            allowClear
            v-decorator="['formData.sort', {
              initialValue: formData.sort,getValueFromEvent: $filterEmpty,
              rules: [{ required: true, message: '请输入排序值!' }] }]"
          />
        </a-form-item>
        <!-- 状态 -->
        <a-form-item label="启用" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
          <a-radio-group
            name="radioGroup"
            id="codeModal-isEnable"
            v-decorator="[
              'formData.isEnable',
              {
                initialValue: formData.isEnable,
                rules: [{ required: true, message: '请选择状态!' }] },
            ]"
          >
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="备注" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
          <a-textarea
            v-decorator="[
              'formData.remarks',
              { initialValue: formData.remarks,getValueFromEvent: $filterEmpty,
                rules: [] },
            ]"
            :maxLength="500"
            id="codeModal-remarks"
            style="min-height: 60px;"
            placeholder=""
            autosize />
        </a-form-item>

        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" @click="handleSubmit()" id="codeModal-handleSubmit">
            保存
          </a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="handleCancel()" id="codeModal-handleCancel">
            取消
          </a-button>
        </a-form-item>
      </a-form>

    </a-modal>
  </div>
</template>

<script>
import { STable, VSelect } from '@/components'
import { saveLookUp } from '@/api/lookup.js'
export default {
  name: 'CodeModal',
  components: {
    STable, VSelect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      titleText: '新增字典',
      isshow: this.visible,
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'miniForm' }),
      formData: {
        name: '',
        code: '',
        sort: '',
        isEnable: '', // 活动状态
        remarks: ''
      }

    }
  },
  methods: {
    cancel (e) {
      this.clear()
      this.$emit('close')
    },

    // 保存提交
    handleSubmit () {
      const _this = this
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values.formData, ' formData.type222222222')
          saveLookUp(Object.assign(this.formData, values.formData)).then(res => {
            console.log(res, 'res--save')
            if (res.status + '' === '200') {
              this.$message.success(res.message ? res.message : '保存成功')
              this.$emit('refresh')
              setTimeout(function () {
                _this.cancel()
              }, 300)
            } else {
              // this.$message.warning(res.message)
            }
          })
        }
      })
    },
    // 取消
    handleCancel () {
      this.cancel()
    },
    clear () {
      this.form.resetFields()
      delete this.formData.id
      this.formData.name = ''
      this.formData.code = ''
      this.formData.sort = ''
      this.formData.isEnable = ''
      this.formData.remarks = ''
    }

  },
  mounted () {
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, { name: 'miniForm' })
  },
  watch: {
    visible (newValue, oldValue) {
      this.isshow = newValue
    },
    isshow (newValue, oldValue) {
      if (newValue) {
        if (this.data.id) { // 编辑
          this.formData.titleText = '编辑字典'
          this.formData = Object.assign({}, this.data)

          delete this.formData.no
          this.formData.isEnable = Number(this.formData.isEnable)
          console.log(this.formData, 'this.formData')
        } else {
          this.formData.titleText = '新增字典'
        }
      } else {
        this.cancel()
      }
    }
  }
}
</script>

<style >
  .modalBox{
  }
  .ant-modal-footer {
    display: none;
  }
</style>
