<template>
  <div class="flex-row">
      <div class="flex1" style="padding-right:24px;min-width:340px; ">
          <!--<h2>relationList</h2>-->
          <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-button class="openAddRelationSty" @click="AddRelationClass">添加 </a-button>
          <a-spin :spinning="spinning">
          <a-list
                  itemLayout="horizontal"
                  :dataSource="relationListData"
                  class="flex1"
                  style="max-height: 515px; min-height: 300px; overflow: auto;"
          >
            <a-list-item slot="renderItem" slot-scope="item">
                <a-list-item-meta @click="handleChangeEntityRouter(item.relClsID)" style="position: relative; padding-right: 70px;">
                    <p slot="title" :class="$route.params.relationId===item.relClsID ? 'selected' : '' " style="display: flex;position: relative">
                        <a-tooltip placement="topLeft">
                            <template slot="title">
                                <span>{{item.startName}}->{{item.relClsName}} ->{{item.endName}}</span>
                            </template>
                            <a class="rela-box" >{{item.startName}}->{{item.relClsName}} ->{{item.endName}}</a>
                        </a-tooltip>
                        <span class="eddit-box"
                              @click.stop="handleDelRelationClass(item.relClsID)">
                            <a-icon type="minus-circle"/></span>
                        <span class="cancel-box" @click.stop="handleEditRelationClassName(item)">
                            <a-icon type="edit"/></span>
                    </p>
                </a-list-item-meta>
            </a-list-item>
          </a-list>
          </a-spin>
      </div>
      <router-view class="flex2" :key="key"/>
  </div>
</template>


<script>
  import { deleteRelationClass, getAllRelationClassList } from "@/api/graph/relationClass"

const relationListData = []
var odiv
export default {
  name: 'relationEditor',
  props: ['entClsName',],
  data () {
    return {
      relationListData,
      accesskey: '1',
      entClsType: 'START', // 默认是实体类为起点
      spinning: false,
      backGroundColor:''
    }
  },
  created () {
    const id = this.$route.params.classId
    this.refreshRelationClassList(id, this.entClsType)
  },
  computed: {
    key: function () {
      return this.$route.params ? this.$route.params.relationId : ''
    }
  },
  methods: {
    /**
     * 删除关系类
     * @param id
     */
    handleDelRelationClass (id) {
      const vm = this
      // this.$confirm({
      //   title: '你确定要删除吗?',
      //   onOk () {
      //     deleteRelationClass(id).then((data) => {
      //       if (data !== false) {
      //         vm.$trigger('relationClass:nodeDestroyed', id)
      //         vm.refreshRelationClassList(vm.$route.params.classId, vm.entClsType)// 刷新关系类列表
      //         vm.$message.success('删除关系类删除成功')
      //       }
      //     })

      //   },
      //   onCancel () {
      //     console.log('取消删除')
      //   }
      // })
      this.$modal.confirm('你确定要删除吗?').then(function() {
          return deleteRelationClass(id)
        }).then((resp) => {
            if (resp.data !== false) {
              vm.$trigger('relationClass:nodeDestroyed', id)
              vm.refreshRelationClassList(vm.$route.params.classId, vm.entClsType)// 刷新关系类列表
              vm.$message.success('删除关系类删除成功')
            }
        }).catch(() => {});
    },
    /**
     * 新增关系类
     * @param id
     */
    AddRelationClass () {
      this.$open('createRelationClassModal', {
        pramsId: this.$route.params.classId,
        entClsName: this.entClsName,
        entClsType: this.entClsType,
        backGroundColor:this.backGroundColor,
        
      }, function (data) {
        if (data) {
          this.$message.success('添加关系类成功')
          this.refreshRelationClassList(this.$route.params.classId, data.entClsType,) // 刷新关系类列表
        }
      })
      console.log('backGroundColor'+"1111")
    },
    /**
     * 实体路由跳转
     * @param id
     */
    handleChangeEntityRouter (id) {
      this.isActive = id
      this.$router.push({name: 'relation_edit', params: {relationId: id}},)
    },
    /**
     * 刷新关系类列表
     * @param id
     */
    refreshRelationClassList (id, entClsType) {
      this.spinning=true;
      getAllRelationClassList(id, entClsType).then((resp) => {
        this.spinning=false;
        this.relationListData = resp.data
      })
    },
    /**
     * 修改关系类名称
     */
    handleEditRelationClassName (opt) {
      console.log(opt)
      this.$open('editRelationClassNameModal', {
        params: opt, 
      }, function (data) {
        if (data) {
          this.refreshRelationClassList(this.$route.params.classId, this.entClsType) // 刷新关系类列表
          this.$message.success('修改关系类名称成功')
        }
      })
    },
    handleTabChange (e) {
      switch (e.target.accessKey) {
        case '1':
          odiv.style.transform = `translate3d(5px, 0px, 0px)`,
            this.accesskey = '1'
          this.entClsType = 'START' // 以此实体类为起点
          this.refreshRelationClassList(this.$route.params.classId, this.entClsType)
          break
        case '2':
          odiv.style.transform = `translate3d(${140}px, 0px, 0px)`
          this.accesskey = '2'
          this.entClsType = 'ENT' //以此实体类为终点
          this.refreshRelationClassList(this.$route.params.classId, this.entClsType)
          break
      }
    }
  },
  mounted () {
    odiv = document.getElementById('move')
  }
}
</script>

<style scoped>
  .eddit-box,
  .cancel-box { position: absolute; top: 0; width: 35px; height: 35px; text-indent: 0; text-align: center; }
  .cancel-box { right: 0; }
  .eddit-box { right: 35px; }
  .rela-box { display: block; width: 235px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
</style>
