<!-- 实体类-上侧 -->
<template>
  <div style="height: 100%">
    <div
      class="panel"
      style="padding:0;height: 50px;margin-bottom: 5px;line-height: 50px;"
    >
      <a-form
        v-if="$route.path.indexOf('entity_v2') > -1"
        style="display: inline-block;margin-right: 5px;margin-left: 10px;"
      >
        <a-form-item>
          <a-input
            v-model="searchValue"
            :placeholder="'请输入' + TEXT.ENT + '名称'"
            style="width: 280px;margin-right: 10px"
          />
          <button class="ant-btn ant-btn-primary mr-5" @click="handleSearch">
            查询{{ TEXT.ENT }}名称
          </button>
          <button class="ant-btn ant-btn-primary" @click="clearSearch">
            清空查询
          </button>
        </a-form-item>
      </a-form>
      <a-row style="display: inline-block">
        <a-button
          v-if="editable && OWL_IMPORT"
          style="margin-right: 5px;margin-left: 10px;"
          type="primary"
          @click="entClsImport"
        >
          <a-icon type="upload" />{{ TEXT.ENT_CLS }}导入
        </a-button>
        <!-- <a-button style="margin-right: 5px" type="primary" @click="entClsExportModal" v-if="editable && OWL_EXPORT">
          <a-icon type="export" />{{TEXT.ENT_CLS}}导出
        </a-button> -->
        <a-button
          v-if="editable && ENTCLS_GRAPH_VIEW"
          style="margin-right: 5px"
          type="primary"
          @click="entClsChart"
        >
          <a-icon type="dot-chart" />
          {{ TEXT.ENT_CLS_VIEW }}
        </a-button>
        <a-button
          v-if="!editable && BF_ENT_IMPORT"
          style="margin-right: 5px"
          type="primary"
          @click="entImportModal"
        >
          <a-icon type="upload" />集成访问服务导入
        </a-button>
        <a-button
          v-if="!editable && BF_ENT_EXPORT"
          type="primary"
          @click="entExportModal"
        >
          <a-icon type="export" />集成访问服务导出
        </a-button>
      </a-row>
    </div>
    <div
      class="flex-row"
      :style="{
        height:
          $route.path.indexOf('entity_v2') > -1 ? 'calc(100% - 60px)' : '100%',
      }"
    >
      <div id="leftPanel" class="flex-col" style="overflow-y: hidden">
        <div class="flex1 flex-col panel">
          <b class="panel-header">
            <a-icon type="deployment-unit" />&nbsp;{{ TEXT.ENT_CLS }}
          </b>
          <a-spin
            tip="Loading..."
            :spinning="spinning"
            class="select-input flex1"
          >
            <ent-cls-list
              v-if="
                $route.path.indexOf('entity') > -1 && searchResult.length > 0
              "
              :search-result="searchResult"
              :search-value="searchValue"
              :active-id="$route.params.classId"
              @emitId="getEntClsId"
            />
          </a-spin>
          <z-tree
            v-if="searchResult.length == 0 && spinning == false"
            class="select-input flex1"
            :editable="editable"
            style="margin-top:10px;"
            @nodeSelected="entityClassNodeSelected"
            @getAllRootList="entClsRootList"
          />
          <!--<keep-alive include="ent-cls-ztree">-->
          <!--<router-view class="select-input flex1" name="treeList" :editable="editable"-->
          <!--@nodeSelected="entityClassNodeSelected" @getAllRootList="entClsRootList"-->
          <!--:key="treeKey1"/>-->
          <!--</keep-alive>-->
        </div>
        <router-view
          v-if="$route.path.indexOf('entity_v2') === -1"
          :key="treeKey"
          class="flex1 panel"
          name="entityList"
        />
      </div>
      <router-view
        id="rightPanel"
        :key="key"
        name="main"
        class="flex1 panel flex-col"
        :sea-value="searchValue"
        :active-id="$route.params.classId"
      />
    </div>
  </div>
</template>

<script>
import ClassTree from '../../components/manager/entityClass/entityClassTree'
import zTree from '../../components/manager/entityClass/entityClassZtree'
import entClsList from './entityClass/entClsList'

const api = require('@/api/index')
const isTemplateVersion = window.global.const.isTemplateVersion
const TEXT = window.USER_ROLE_LANGUAGE[window.USER_ROLE]
let timeout
export default {
  name: 'Manager',
  components: {
    ClassTree,
    zTree,
    entClsList
  },
  beforeRouteUpdate(to, from, next) {
    const path = to.path
    if (path.indexOf('entity') > -1) {
      this.editable = false
    } else {
      this.editable = true
      this.searchResult.length = 0
      this.searchValue = ''
      this.spinning = false
    }
    next()
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      const path = vm.$route.path
      if (path.indexOf('entity') > -1) {
        vm.editable = false
      } else {
        vm.editable = true
      }
    })
  },
  data() {
    return {
      // 功能权限控制
      OWL_IMPORT: true,
      OWL_EXPORT: true,
      ENTCLS_GRAPH_VIEW: true,
      BF_ENT_IMPORT: true,
      BF_ENT_EXPORT: true,

      baseUrl: window.global.baseUrl(),
      TEXT,
      searchValue: '', // 搜索的实体名称字符串
      searchResult: [],
      spinning: false,
      rootEntClsList: [], // 根节点实体类列表
      editable: true // 判断左侧树是否显示操作按钮
    }
  },
  events: {
    /**
     * 新建实体类成功,打开新建的实体类
     * @param classId 实体类id
     */
    'entityClass:nodeCreated'(classId) {
      this.entityClassNodeSelected({
        entClsID: classId
      })
      // this.$router.push({name: 'ECM_item', params: {classId}})
    },
    /**
     * 删除实体类成功,关闭打开的实体类
     * @param classId 实体类id
     */
    'entityClass:nodeDestroyed'(classId) {
      if (this.$route.params.classId === classId) {
        this.$router.push({ name: 'ECM_home' })
      }
    },
    /**
     * 新建实体成功,打开新建的实体
     * @param entityId 实体类id
     */
    'entity:nodeCreated'(entityId) {
      this.$router.push({ name: 'e_base', params: { entityId }})
    },
    /**
     * 删除实体成功,关闭打开的实体
     * @param entityId 实体类id
     */
    'entity:nodeDestroyed'(entityId) {
      if (this.$route.params.entityId === entityId) {
        this.$router.push({ name: 'class_entity' })
      }
    },
    /**
     * 新建实体成功,打开新建的实体类
     * @param relationId 关系类id
     */
    'relationClass:nodeCreated'(relationId) {
      this.$router.push({ name: 'relation_edit', params: { relationId }})
    },
    /**
     * 删除关系类成功,关闭打开的关系类
     * @param relationId 关系类id
     */
    'relationClass:nodeDestroyed'(relationId) {
      if (this.$route.params.relationId === relationId) {
        this.$router.push({ name: 'relation' })
      }
    },
    /**
     * 清空搜索，让左侧树恢复
     */
    'entityClass:clearSearch'() {
      this.searchValue = ''
      this.searchResult = []
      this.spinning = false
    }
  },
  computed: {
    treeKey1() {
      var key =
        this.$route.path + this.$route.params ? this.$route.params.classId : ''
      return key
    },
    treeKey() {
      var key =
        this.$route.path + this.$route.params ? this.$route.params.classId : ''
      return key
    },
    key() {
      var key =
        this.$route.path + this.$route.params
          ? this.$route.params.classId + this.$route.params.entityId
          : ''
      return key
    }
  },
  mounted() {
    // 获取用户功能权限
    if (this.$const.authorityControl) {
      this.OWL_IMPORT = !!this.authMap['OWL_IMPORT']
      this.OWL_EXPORT = !!this.authMap['OWL_EXPORT']
      this.ENTCLS_GRAPH_VIEW = !!this.authMap['ENTCLS_GRAPH_VIEW']
      this.BF_ENT_IMPORT = !!this.authMap['BF_ENT_IMPORT']
      this.BF_ENT_EXPORT = !!this.authMap['BF_ENT_EXPORT']
    }
    const searchValue = this.$route.query.searchValue
    if (typeof searchValue !== 'undefined') {
      this.searchValue = searchValue
      this.handleSearch()
    }
  },

  beforeCreate() {
    if (this.$route.name === 'manager') {
      this.$router.push('/mng/class')
    }
  },
  methods: {
    getEntClsId(id) {
      const vm = this
      if (vm.$route.path.indexOf('entity_v2') > -1) {
        vm.$router.push({
          name: 'class_entity_v2',
          params: { classId: id },
          query: {
            searchValue: vm.searchValue
          }
        })
      } else {
        vm.$router.push({
          name: 'class_entity',
          params: { classId: id, entClsName: vm.searchValue }
        })
      }
    },
    // 清空搜索
    clearSearch() {
      this.searchValue = ''
      this.searchResult = []
      this.$router.push({ path: '/mng/class/unknow/entity_v2' })
    },
    // 搜索
    handleSearch() {
      if (this.searchValue === '') {
        this.$message.error('请输入要搜索的' + this.TEXT.ENT + '名称')
        return
      }
      this.spinning = true
      // this.$router.push({path: '/mng/class/unknow/entity_v2'})
      api.entity.searchEntClsByEntName(this.searchValue).then((res) => {
        const item = { entClsID: 'uknow', entClsName: '全部' }
        res.unshift(item)
        this.searchResult = res
        this.spinning = false
      })
    },
    // 要导出的根节点实体类列表
    entClsRootList(list) {
      this.rootEntClsList = list
    },
    entityClassNodeSelected(node) {
      if (this.$route.path.indexOf('entity') === -1) {
        // 实体类大标题下跳转
        api.entityClass.getEntityClass(node.entClsID).then((data) => {
          if (
            data.entClsAllowAttrType &&
            data.entClsAllowAttrType.includes('ELEM')
          ) {
            this.$router.push({
              name: 'base',
              params: { classId: node.entClsID }
            }) // 有基础属性跳到基础属性
          } else {
            this.$router.push({
              name: 'relation',
              params: { classId: node.entClsID }
            }) // 否则调到关系属性
          }
        })
      } else {
        // 实体大标题下跳转
        if (this.$route.path.indexOf('entity_v2') > -1) {
          if (isTemplateVersion) {
            // 如果是带实体模板的版本
            this.$router.push({
              name: 'class_entity_v2',
              params: { classId: node.entClsID },
              query: { clsName: node.name }
            })
          } else {
            this.$router.push({
              name: 'class_entity_v2',
              params: { classId: node.entClsID }
            })
          }
        } else {
          this.$router.push({
            name: 'class_entity',
            params: { classId: node.entClsID }
          })
        }
      }
    },
    /**
     * 导入模态框
     */
    entClsImport() {
      this.$open('entClsImportModal', {}, function() {
        // 刷新左侧树
        this.$router.push('/mng/class')
      })
    },
    entClsChart() {
      this.$router.push('/sta/entity_class_view')
    },
    /**
     * 导出模态框
     */
    entClsExportModal() {
      this.$open(
        'entClsExportModal',
        {
          rootEntClsList: this.rootEntClsList // 根节点实体类列表
        },
        function() {}
      )
    },
    // 实体导入
    entImportModal() {
      this.$open('uploadZipServiceModal', {})
    },
    // 实体导出
    entExportModal() {
      this.$open('entClsServiceExportModal', {})
    }
  }
}
</script>

<style scoped>
.rela-box {
  display: block;
  width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#leftPanel {
  height: 100%;
  min-width: 300px;
  overflow: auto;
}
</style>
