<!-- 实体类 主页 -->
<template>
  <div class="container flex-col">
    <a-spin :spinning="spinning">
      <div class="container-header">
        <a-row>
          <a-breadcrumb class="miao-shu">
            <a-breadcrumb-item>
              <span>来源： <span v-if="!breadcrumbList || breadcrumbList.length === 0">/</span> </span>
            </a-breadcrumb-item>
            <a-breadcrumb-item
              v-for="item in breadcrumbList"
              :key="item.entClsID"
            >
              {{ item.entClsName }}
            </a-breadcrumb-item>
          </a-breadcrumb>
        </a-row>
        <a-row :gutter="10">
          <a-col :span="2" class="shiti-img">
            <div v-if="entityClassTreeNode.entClsIcon">
              <img :src="entityClassTreeNode.entClsIcon" alt="">
            </div>
            <div v-else><img src="../../assets/kong-01.png" alt=""></div>
            <!-- ../../../assets/kong-01.png -->
          </a-col>
          <a-col :span="10">
            <h2 style="margin-top: 0em">
              <b>{{ entityClassTreeNode.entClsName }}</b>
            </h2>
            <span class="miao-shu">
              {{
                entityClassTreeNode.entClsMemo
                  ? entityClassTreeNode.entClsMemo
                  : "无相关描述"
              }}</span>
          </a-col>
          <a-col :span="12">
            <a-button v-if="GOTO_NEURAL_BTN" style="margin-right: 10px" @click="gotoFlow">
              <a-icon type="branches" />
              编排
            </a-button>
            <!--          <a-button style="margin-right: 10px">-->
            <!--            <a-icon type="play-circle" />-->
            <!--            运行-->
            <!--          </a-button>-->
            <a-button
              style="margin-right: 10px"
              @click="goEntity"
            >
              <a-icon type="profile" />
              {{ TEXT.ENT }}列表
            </a-button>
            <a-button
              style="margin-right: 10px"
              @click="handleEditEntityClassName"
            >
              <a-icon type="edit" />
              基础信息更新
            </a-button>
            <a-button
              v-if="version === 'base'"
              class="mr-5"
              @click="goSta"
            >可视化统计
            </a-button>
          </a-col>
        </a-row>
      </div>
      <div style="height: 52px;">
        <a-tabs v-model="activeKey" type="card" @change="changeTab">
          <a-tab-pane
            v-for="item in entClsAllowAttrTypeArr"
            :key="item"
            :tab="panes[item].title"
            :closable="panes[item].closable"
          />
        </a-tabs>
      </div>
      <router-view
        :key="$route.meta.type"
        class="flex1"
        :ent-cls-name="entityClassTreeNode.entClsName"
        style="overflow: auto"
      />
    </a-spin>
  </div>
</template>

<script>
const api = require('@/api/index')
const TEXT = window.USER_ROLE_LANGUAGE[window.USER_ROLE]
const panes = {
  ELEM: {
    title: '基础属性',
    content: 'Content of Tab 1',
    key: '1',
    closable: false
  },
  MIME: {
    title: '多媒体属性',
    content: 'Content of Tab 1',
    key: '2',
    closable: false
  },
  CIDX: {
    title: '能力属性',
    content: 'Content of Tab 1',
    key: '3',
    closable: false
  },
  NONE: {
    title: '待审属性',
    content: 'Content of Tab 1',
    key: '6',
    closable: false
  },
  GX: {
    title: '关系属性',
    content: 'Content of Tab 1',
    key: '4',
    closable: false
  },
  BQ: {
    title: '标签属性',
    content: 'Content of Tab 1',
    key: '5',
    closable: false
  }
}
const paneRouteMap = {
  ELEM: { routeName: 'base' },
  MIME: { routeName: 'media' },
  CIDX: { routeName: 'ability' },
  GX: { routeName: 'relation' },
  BQ: { routeName: 'tag' },
  NONE: { routeName: 'notype' }
}
const panaActiveKeyMap = {
  base: 'ELEM',
  media: 'MIME',
  ability: 'CIDX',
  relation: 'GX',
  tag: 'BQ',
  notype: 'NONE',
  relation_edit: 'GX'
}
const sortAttr = ['ELEM', 'CIDX', 'MIME', 'NONE', 'GX', 'BQ']
export default {
  name: 'EntityClass',
  data() {
    return {
      TEXT,
      //  权限控制
      GOTO_NEURAL_BTN: true,
      // 版本控制
      version: window.global.const.version,

      panes,
      paneRouteMap, // 匹配tab路由
      panaActiveKeyMap,
      sortAttr, // 属性排序
      newTabIndex: 0,
      entityClassTreeNode: {
        // 选中的实体类节点信息
        entClsName: '',
        entClsID: '',
        entClsIcon: '',
        backGroundColor: ''
      },
      breadcrumbList: [],
      entClsIsRoot: '', // 实体类是否是顶层
      mustClsAttrType: ['GX', 'BQ'],
      entClsAllowAttrTypeArr: [], // 实体类的属性类型
      spinning: false
    }
  },
  events: {
    // /**
    //  * 编辑实体类树的名字
    //  * @param node 节点信息
    //  */
    // ['entityClass:editEntityClassName'](node) {
    //     this.selectNode = node
    // }
  },
  computed: {
    activeKey: {
      get() {
        return this.panaActiveKeyMap[this.$route.name]
      },
      set(val) {
      }
    }
  },
  created() {
    this.init()
  },
  mounted() {
    if (this.$const.authorityControl) {
      this.GOTO_NEURAL_BTN = !!this.authMap['GOTO_NEURAL_BTN']
    }
  },
  methods: {
    goEntity() {
      this.$router.push(`/mng/class/${this.entityClassTreeNode.entClsID}/entity_v2?clsName=${this.entityClassTreeNode.entClsName}`)
    },
    init() {
      var classId = this.$route.params.classId
      const _vm = this
      _vm.entClsAllowAttrTypeArr = ['GX', 'BQ'] // 设置默认的不可编辑的tab
      _vm.spinning = true
      api.entityClass.getEntityClass(classId).then((data) => {
        _vm.spinning = false
        _vm.entityClassTreeNode.entClsName = data.entClsName
        _vm.entityClassTreeNode.entClsID = data.entClsID
        _vm.entityClassTreeNode.entClsMemo = data.entClsMemo
        _vm.entityClassTreeNode.entClsIcon = data.entClsIcon
        _vm.entityClassTreeNode.backGroundColor = data.backGroundColor
        _vm.breadcrumbList = data.parents
        var allowAttrType = data.entClsAllowAttrType
          ? data.entClsAllowAttrType.split(',')
          : []
        _vm.entClsAllowAttrTypeArr = allowAttrType.concat(
          _vm.entClsAllowAttrTypeArr
        )

        const sortedAttrs = []
        sortAttr.map(attr => {
          if (_vm.entClsAllowAttrTypeArr.indexOf(attr) > -1) {
            sortedAttrs.push(attr)
          }
        })
        // 基础属性在前
        _vm.entClsAllowAttrTypeArr = sortedAttrs
        _vm.entClsIsRoot = data.isRoot
      })
    },
    // 编辑实体类树的名字的模态窗
    handleEditEntityClassName() {
      this.$open(
        'editEntityClassTreeNameModal',
        {
          entClsName: this.entityClassTreeNode.entClsName,
          entClsIcon: this.entityClassTreeNode.entClsIcon,
          entClsID: this.entityClassTreeNode.entClsID,
          backGroundColor: this.entityClassTreeNode.backGroundColor,
          entClsAllowAttrTypeArr: this.entClsAllowAttrTypeArr,
          entClsMemo:
              this.entityClassTreeNode && this.entityClassTreeNode.entClsMemo,
          entClsIsRoot: this.entClsIsRoot
        },
        function(data) {
          if (data) {
            this.init()
            // 刷新左侧实体类树
            // this.$trigger('entityClass:entityClassUpdated', data.data)
            this.$trigger('entityClassZtree:entityClassUpdated', data.data)
          }
        }
      )
    },
    changeTab(tab) {
      this.$router.push({ name: this.paneRouteMap[tab].routeName })
    },
    goSta() {
      window.location.href = `#/sta/entity_class_view?clsId=${this.$route.params.classId}`
    },
    gotoFlow() {
      const classId = this.$route.params.classId
      api.entityClass.getFlowId(classId).then((res) => {
        if (res) {
          window.open(
            window.global.wisdomAtlasUrl + '/index.html#/edit?flowId=' + res
          )
        } else {
          this.$notification['error']({
            message: '获取flowId失败！'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
    .container {
        padding: 24px;
    }

    .container button {
        float: right;
    }

    .container b {
        font-size: 24px;
    }

    .container-header-bj {
        /* padding-top: 12px; */
        line-height: 34px;
    }

    .avatar-edit {
        width: 32px;
        height: 32px;
        display: inline-block;
        margin-right: 8px;
    }

    .avatar-edit img {
        height: 32px;
        vertical-align: top;
        box-shadow: 0 2px 8px #c8ebdf;
        border: 2px solid #fff;
        border-radius: 4px;
    }
</style>
