<template>
    <a-modal
            title="新增关系类属性"
            :visible="show"
            :maskClosable="false"
            @ok="handleOk"
            @cancel="handleClose"
            size="middle"
    >
        <a-form :form="form">
            <a-form-item label="属性名称：" v-bind="formItemLayout">
                <a-input
                        v-decorator="formRules.name"
                />
            </a-form-item>
            <a-form-item 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 :value="key" v-for="(value,key) in attrClsType" :key="key" >{{value}}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="属性描述：" v-bind="formItemLayout">
                <a-input type="textarea"
                        v-decorator="formRules.desc"
                />
            </a-form-item>
        </a-form>

    </a-modal>
</template>

<script>
import { addRelationAttr } from '@/api/graph/relationEditor'
  export default {
    name: 'addRelationAttrModal',
    props: ['param', 'type'],
    data() {
      return {
        attrClsType:this.$const.attrClsType,
        formItemLayout:this.$const.formItemLayout,
        form: this.$form.createForm(this),
        show: true,
        formRules: {        // 所有验证规则
          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'
                }
            ]
        },

      }
    },

    methods: {
      async getFormData() {
        var result = await this.$formValidateFields('form')    //form的字符串
        // 在这里对form返回数据进行处理
        return result
      },
      callback(data) {
        if (data) {
          this.$message.info('发送ajax')
          // ajax返回值处理后返回
          this.$close(data)

        } else {
          // 出错处理
          this.$close(false)
        }
      },
      async handleOk(e) {
        var result = await this.getFormData()     // this是当前组件的this,  'form'此表单的名称，一定要是字符串
        var data = {
          relClsID: this.param,
          attrUnit: result.unit,
          attrClsName: result.name,
          attrClsMemo: result.desc,
            valueType: result.valueType
        }
        if (data.attrUnit === undefined) {
          data.attrUnit = ""
        }
        if (data.attrClsMemo === undefined) {
          data.attrClsMemo = ""
        }
        data.attrClsName = (data.attrClsName || '').trim()
        data.attrUnit = (data.attrUnit || '').trim()
        data.attrClsMemo = (data.attrClsMemo || '').trim()
        if (data.attrClsName == "") {
          this.$message.error('实体属性名传参失败');
        } else {
          addRelationAttr(data).then((resp) => {
            if (resp.data !== false) {
              this.$close('ok')
            }
          })
        }
        //新增属性类

      },

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

<style scoped>

</style>
