<template>
  <a-modal
    title="新增属性类"
    :visible="show"
    :mask-closable="false"
    @ok="handleOk"
    @cancel="handleClose"
  >

    <a-form :form="form">
      <a-form-item label="名称：" v-bind="formItemLayout">
        <a-input
          v-decorator="formRules.name"
        />
      </a-form-item>
      <a-form-item v-if="type !== 'NONE'" label="单位：" v-bind="formItemLayout">
        <a-input
          v-decorator="formRules.unit"
        />
      </a-form-item>
      <a-form-item label="数据类型" v-bind="formItemLayout">
        <a-select v-decorator="formRules.valueType">
          <a-select-option v-for="(value,key) in attrClsType" :key="key" :value="key">{{ value }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-if="type === 'CIDX'" label="描述：" v-bind="formItemLayout">
        <a-textarea
          v-decorator="formRules.desc"
        />
      </a-form-item>
    </a-form>

  </a-modal>
</template>

<script>
const api = require('@/api')
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 }
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 }
  }
}
const FormRulesDefine = {
  name: [ // 用作标识，我们统一写成和表单提交字段一样
    'name', // 表单提交的字段
    {
      rules: [{ required: true, message: '属性名称需要填写', whitespace: true }]
    }
  ],
  unit: [ // 用作标识，我们统一写成和表单提交字段一样
    'unit', // 表单提交的字段
    {
      rules: [{ required: false, message: '属性单位需要填写', whitespace: false }]
    }
  ],
  desc: [ // 用作标识，我们统一写成和表单提交字段一样
    'desc', // 表单提交的字段
    {
      rules: [{ required: false, message: '属性描述需要填写', whitespace: false }]
    }
  ],
  valueType: [
    'valueType', // 表单提交的字段
    {
      initialValue: 'TEXT'
    }
  ]
}
const FormRulesMap = {
  // 基本
  'ELEM': { name: FormRulesDefine.name, unit: FormRulesDefine.unit, valueType: FormRulesDefine.valueType },
  // 无类型
  'NONE': { name: FormRulesDefine.name, unit: FormRulesDefine.unit, valueType: FormRulesDefine.valueType },
  // 能力
  'CIDX': { name: FormRulesDefine.name, unit: FormRulesDefine.unit, desc: FormRulesDefine.desc, valueType: FormRulesDefine.valueType }
}
export default {
  name: 'AddEntityClass',
  props: ['param', 'type'],
  data() {
    return {
      attrClsType: this.$const.attrClsType,
      formItemLayout,
      form: this.$form.createForm(this),
      show: true
    }
  },
  computed: {
    formRules() {
      return FormRulesMap[this.type]
    }
  },
  methods: {
    async getFormData() {
      var result = await this.$formValidateFields('form') // form的字符串
      // 在这里对form返回数据进行处理
      return result
    },
    async handleOk(e) {
      var result = await this.getFormData() // this是当前组件的this,  'form'此表单的名称，一定要是字符串
      var data = {
        attrClsName: result.name,
        attrUnit: result.unit,
        attrType: this.type,
        attrClsMemo: result.desc,
        entClsID: this.param,
        valueType: result.valueType
      }
      if (data.attrUnit == null || data.attrUnit == undefined) {
        data.attrUnit = ''
      }
      if (data.attrClsMemo == null || data.attrClsMemo == undefined) {
        data.attrClsMemo = ''
      }

      data.attrClsName = data.attrClsName ? data.attrClsName.trim() : ''
      data.attrUnit = data.attrUnit ? data.attrUnit.trim() : ''
      data.attrClsMemo = data.attrClsMemo ? data.attrClsMemo.trim() : ''
      // 新增属性类
      api.attrClass.addAttrClass(data).then((result) => {
        if (result !== false) {
          // this.$trigger("entityClass:nodeCreated", result)
          this.$close(result)
        }
      })
    },

    handleClose(e) {
      this.$close(false)
    }
  }
}
</script>

<style scoped>

</style>
