
<template>
    <div class="auto-overflow">
        <a-row>
            <a-col>
                <div class="ant-tabs-nav-wrap">
                    <div class="ant-tabs-nav-scroll">
                        <div class="ant-tabs-nav ant-tabs-nav-animated">
                            <div @click="handleTabChange">
                                <div role="tab" accessKey="1"
                                     class="ant-tabs-tab"
                                     :class="{'ant-tabs-tab-active': accesskey === '1'}">
                                    以此为起点
                                </div>
                                <div role="tab" accessKey="2"
                                     class=" ant-tabs-tab"
                                     :class="{'ant-tabs-tab-active':accesskey === '2'}">以此为终点
                                </div>
                            </div>
                            <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated" id="move"
                                 style="display: block; transform: translate3d(0px, 0px, 0px); width: 88px;"></div>
                        </div>
                    </div>
                </div>
            </a-col>
        </a-row>
        <a-row>
            <a-col>
                <a-button @click="createRelation">新建关系</a-button>
            </a-col>
        </a-row>
        <a-row v-for="(relation,index) in entityRelationList" :key="index">
            <a-col>
                <a-row class="rel-title-box">
                    <a-col>
                        <span class="rel-title">
                            {{relation.relName}}
                            <template v-if="relation.endEnt"> -> {{relation.endEnt.entName}}</template>
                            </span>
                        <a-popconfirm title="删除关系？" @confirm="deleteRelation(relation)" okText="Yes"
                                      cancelText="No">
                            <a-button style="float:right;margin-right:10px">删除关系
                            </a-button>
                        </a-popconfirm>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col>
                        <a-table size="small"
                                 rowKey="attrClsID"
                                 :dataSource="relation.relAttrVOList"
                                 :columns="columns"
                                 :pagination="false" style="background: #fff;">
                            <template slot="attrClsName" slot-scope="text, record">
                                <span>{{text | ellipsis(10)}}</span>
                                <a-tooltip placement="right" v-if="record.attrClsMemo"
                                           style="float:right;margin-top:5px">
                                    <template slot="title">
                                        <span>{{record.attrClsMemo}}</span>
                                    </template>
                                    <a-icon type="info-circle"/>
                                </a-tooltip>
                            </template>
                            <template slot="attrValueVO" slot-scope="text, record">
                                <editable-cell :record="record"
                                               :text="record.attrValueVO?record.attrValueVO.attrValue:''"
                                               @change="onCellChange(record,'attrValueVO', $event)"
                                               :editable="record.edit"
                                               @close="closeCell(record)"/>
                            </template>
                            <template slot="attrValueType" slot-scope="text, record, index">
                                {{attrClsType[text]}}
                            </template>
                        </a-table>
                    </a-col>
                </a-row>
            </a-col>
        </a-row>
    </div>
</template>

<script>
  import EditableCell from '@/components/knowledge/editableCell'

  import { getRelationAttrById } from "@/api/graph/entityAttrEditor"
  import { updateRelationAttr } from "@/api/graph/relationEditor"
  import { deleteEntityRelation } from "@/api/graph/relationClass"

  var odiv
  export default {
    name: 'relationEditor',
    props: ['entName','entid','classid'],
    components: {
      EditableCell
    },
    data () {
      return {
        // 此实体的关系列表，及其所有属性
        entityRelationList: [],
        attrClsType: this.$const.attrClsType,
        entityId: null, // 实体id
        entityClassId: '', // 实体类id
        relId: null,
        dataSource: [],
        count: 2,
        columns: [
          {
            title: '属性名称',
            dataIndex: 'attrClsName',
            scopedSlots: {customRender: 'attrClsName'}
          }, {
            title: '属性值',
            dataIndex: 'attrValueVO',
            width: '30%',
            scopedSlots: {customRender: 'attrValueVO'}
          }, {
            title: '数据类型',
            dataIndex: 'attrValueType',
            // width: '30%',
            align: 'center',
            scopedSlots: {customRender: 'attrValueType'}
          },
          {
            title: '属性单位',
            dataIndex: 'attrUnit'
          }],
        accesskey: '1',
        entType: 'START' // 默认以此实体为起点
      }
    },
    created () {
      this.entityId = this.entid
      //获取关系属性列表
      this.entityClassId = this.classid
      this.getEntityAttr(this.entityId, this.entType)
    },
    methods: {
      closeCell (record) {
        record.edit.abled = false
      },
      /**
       * 编辑器更新
       **/
      onCellChange (record, unknow, text) {
        var params = {
          attrClsID: record.attrClsID,// *属性类ID
          attrMemo: record.attrMemo ? record.attrMemo : '',// 属性描述
          attrValue: text ? text : '',// 属性值
          entID: this.$route.params.entityId,// 实体ID
          relID: record.relID
        }
        updateRelationAttr(params).then((result) => {
          if (result !== false) {
            record.edit = {
              abled: false
            }
            this.getEntityAttr(this.entityId, this.entType)
          }
        })
      },
      /**
       * 删除关系
       * @param relation
       */
      deleteRelation (relation) {
        const relID = relation.relID
        const vm = this
        deleteEntityRelation(relID).then((result) => {
          if (result !== false) {
            vm.$message.success('删除关系类删除成功')
            vm.getEntityAttr(this.entityId, this.entType)
          }
        })
      },
      getEntityAttr (entityId, entType) {
        getRelationAttrById(entityId, entType).then((result) => {
          result.forEach(function (item) {
            if (item.relAttrVOList) {
              item.relAttrVOList.forEach(function (i) {
                // 提交时要带这个变量,但只能传回record(内层数组值),因此便利复制进数组
                i.relID = item.relID
                i.edit = {
                  abled: false
                }
              })
            }
          })
          this.entityRelationList = result
        })
      },
      createRelation () {
        // 新建关系modal
        this.$open('createRelationModal', {
          entityId: this.entityId, // 实体id
          entityClassId: this.entityClassId, // 实体类id
          entName: this.entName,
          entType: this.entType
        }, function (data) {
          if (data) {
            this.getEntityAttr(this.entityId, this.entType)
          }
        })
      },
      // 切换tab
      handleTabChange (e) {
        switch (e.target.accessKey) {
          case '1':
            odiv.style.transform = `translate3d(5px, 0px, 0px)`,
              this.accesskey = '1'
            this.entType = 'START' // 以此实体为起点
            this.getEntityAttr(this.entityId, this.entType)
            break
          case '2':
            odiv.style.transform = `translate3d(${140}px, 0px, 0px)`
            this.accesskey = '2'
            this.entType = 'ENT' //以此实体为终点
            this.getEntityAttr(this.entityId, this.entType)
            break
        }
      }
    },
    mounted () {
      odiv = document.getElementById('move')
    }
  }
</script>

<style scoped>
  .ant-tabs-nav-scroll{ border-bottom: 1px solid #ddd; }
  .rel-title-box{ margin-top: 20px; height: 32px; line-height:32px;}
  .rel-title{ color: #0AA679; font-weight: bold; vertical-align: middle }
  .ant-tabs-ink-bar{ bottom: 0; }
  .ant-table-thead th{ background: #eee; }
</style>
