<!-- 实体类-关系创建 -->
<template>
  <a-modal
    title="新建一个关系类"
    :visible="show"
    :mask-closable="false"
    @ok="handleOk"
    @cancel="handleClose"
  >
    <h4 class="title">{{ entClsName }}</h4>
    <div style="margin-bottom: 20px;">
      <a-radio-group v-model="Originvalue" disabled @change="onChangeOrigin">
        <a-radio :value="3">作为起点</a-radio>
        <a-radio :value="4">作为终点</a-radio>
      </a-radio-group>
    </div>
    <h4 class="title">选择或新建关系</h4>

    <a-row :gutter="10">
      <a-col :span="4">
        <h4 class="title" style="margin-top:.6em;">背景颜色</h4>
      </a-col>
      <a-col :span="15">
        <a-form :form="form">
          <a-form-item>
            <a-color-picker v-decorator="formRules.backGroundColor" @fromChild="getColor" />
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>

    <div style="margin-bottom: 20px;">
      <a-radio-group v-model="value" @change="onChange">
        <a-radio :value="1">复制已有关系</a-radio>
        <a-radio :value="2">新建关系</a-radio>
      </a-radio-group>
    </div>
    <div v-if="value==1" style="margin-bottom: 20px;">
      <a-row :gutter="10">
        <a-col :span="12">
          <a-button @click="getRelationCls">
            {{ selectedRelCls ? selectedRelCls : '选择一个关系类名称' }}
          </a-button>
        </a-col>
        <a-col :span="12">
          <a-select
            show-search
            placeholder="选择一个关系类"
            style="width:200px;"
            @change="handleSelectRelationClass"
          >
            <a-select-option
              v-for="item in filterRelationList"
              :key="item.relClsID"
              :value="item.relClsID"
            >
              <a-popover placement="left">
                <template slot="content">
                  <div>起点：{{ item.startEntCls&&item.startEntCls.entClsName }}</div>
                  <div>关系类：{{ item.relClsName }}</div>
                  <div>终点：{{ item.endEntCls&&item.endEntCls.entClsName }}</div>
                  <div v-for="(p,i) in attrList" :key="i">属性:{{ p.attrClsName }}</div>
                </template>
                <span
                  @mouseenter="enter(item)"
                  @mouseleave="leave()"
                >
                  {{ item.startEntCls&&item.startEntCls.entClsName }}->{{ item.relClsName }}->{{ item.endEntCls&&item.endEntCls.entClsName }}</span>
              </a-popover>
            </a-select-option>
          </a-select>
        </a-col>
      </a-row>
    </div>
    <div v-if="value==2">
      <a-form :form="form">
        <a-form-item>
          <a-input v-decorator="formRules.entityClass" placeholder="请输入关系类名" />
        </a-form-item>
      </a-form>
    </div>
    <h4 class="title">{{ Originvalue===3 ? '选择终点关系类' : '选择起点关系类' }}</h4>
    <div style="max-height: 420px; overflow: auto;">
      <!--<class-tree @nodeSelected="entityClassNodeSelected" :editable="false"></class-tree>-->
      <z-tree :editable="false" @nodeSelected="entityClassNodeSelected" />
    </div>
  </a-modal>
</template>

<script>
import AColorPicker from '@/components/common/colorPicker'
import ClassTree from '../../components/manager/entityClass/entityClassTree'
import zTree from '../../components/manager/entityClass/entityClassZtree'

const api = require('@/api/index')
const TEXT = window.USER_ROLE_LANGUAGE[window.USER_ROLE]
const formRules = {
  // 所有验证规则
  entityClass: [
    // 用作标识，我们统一写成和表单提交字段一样
    'entityClass', // 表单提交的字段
    {
      rules: [{ required: true, message: '此选项必填', whitespace: true }]
    }
  ]
  // relationClass: [
  //   relationClass, // 表单提交的字段
  //   {
  //     rules: [{required: false, message: '此选项必填', whitespace: true}]
  //   }
  // ]
}
export default {
  name: 'CreateRelationClassModal',
  components: {
    AColorPicker,
    zTree,
    ClassTree,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes
    }
  },
  props: ['pramsId', 'entClsName', 'entClsType'],
  data() {
    return {
      color: '',
      show: true,
      form: this.$form.createForm(this),
      formRules,
      value: 1,
      Originvalue: 3,
      filterRelationList: [], // 已有关系列表
      EntityClassNode: {}, // 实体类节点信息
      selectRelationValue: '',
      timer: null, // 延时器
      attrMap: {},
      attrList: [], // 属性list
      selectedRelCls: ''
    }
  },
  created() {
    // 判断是起点还是终点
    if (this.entClsType === 'START') {
      this.Originvalue = 3 // 起点
    } else {
      this.Originvalue = 4 // 终点
    }
  },
  destroyed() {
  },
  methods: {
    getColor(color) {
      this.color = color
    },
    enter(item) {
      const vm = this
      if (vm.attrMap.hasOwnProperty(item.relClsID)) { // 判断map中是否存在
        vm.attrList = vm.attrMap[item.relClsID]
        clearTimeout(vm.timer)
      } else {
        vm.timer = setTimeout(() => {
          api.relationAttr.getRelationAttr(item.relClsID).then(res => {
            vm.attrMap[item.relClsID] = res // 缓存
            vm.attrList = res
          })
        }, 10)
      }
    },
    leave() {
      clearTimeout(this.timer)
    },
    /**
     * // 传出来的实体类节点信息
     * @param node
     */
    entityClassNodeSelected(node) {
      this.EntityClassNode = node
    },
    /**
     * 选中的已有关系
     * @param value
     */
    handleChange(name) {
      api.relationClass.getAllRelationClassListByName(name).then(data => {
        // 参数为空,获取所有的列表
        this.filterRelationList = data.records
      })
    },
    handleSelectRelationClass(id) {
      this.selectRelationValue = id
    },
    getRelationCls() {
      this.$open('getRelationClsListModal', {}, function(data) {
        if (data) {
          this.selectedRelCls = data
          api.relationClass.getAllRelationClassListByName(data).then(data => {
            // 参数为空,获取所有的列表
            this.filterRelationList = data.records
          })
        }
      })
    },
    onChange(e) {
    },
    // 选择起点或终点
    onChangeOrigin(e) {
    },
    async getFormData() {
      var result = await this.$formValidateFields('form') // form的字符串
      // 在这里对form返回数据进行处理
      return result
    },
    async handleOk(e) {
      const result = await this.getFormData() // this是当前组件的this,  'form'此表单的名称，一定要是字符串
      const endID = this.EntityClassNode && this.EntityClassNode.entClsID
      const relClsID = this.selectRelationValue
      let entClsType = 'START'
      if (!endID) {
        this.$message.error('请选择要建立关系的' + TEXT.ENT_CLS)
        return
      }
      const data = {
        startID: this.pramsId,
        endID: endID,
        backGroundColor: this.color,
        relClsMemo: this.relClsMemo,
        relClsName: this.relClsName

      }
      if (this.Originvalue == 4) {
        // 传进来的实体类作为终点
        data['startID'] = endID
        data['endID'] = this.pramsId
        entClsType = 'ENT'
      }
      if (this.value == 1) {
        // 已有关系属性
        data['relClsID'] = relClsID
      }
      if (this.value == 2) {
        // 新建关系
        data['relClsName'] = result.entityClass
        const uniqueMatchList = this.$checkSpecialChar(result.entityClass)
        if (uniqueMatchList.length > 0) {
          this.$message.error(`关系类名称不能包含特殊字符【${uniqueMatchList.join('、')}】！`)
          return false
        }
      }
      api.relationClass.addRelationClass(data).then(data => {
        if (data !== false) {
          this.$trigger('relationClass:nodeCreated', data)
          this.$close({
            id: this.pramsId,
            entClsType: entClsType
          })
        }
      })
    },
    handleClose(e) {
      this.$close(false)
    }
  }
}
</script>

<style scoped>
  .ant-row {
    margin-bottom: 2px;
 }
</style>
