<template>
    <div style="height: 100%">
        <div
                class="panel"
                style="padding:0;height: 50px;margin-bottom: 5px;line-height: 50px;"
        >
            <a-form
                    style="display: inline-block;margin-right: 5px;margin-left: 10px;"
            >
                <a-form-item>
                    <a-input
                            placeholder="请输入实体名称"
                            v-model="searchValue"
                            style="width: 280px;margin-right: 10px"
                    />
                    <button class="ant-btn ant-btn-primary mr-5" @click="handleSearch">
                        查询实体类名称
                    </button>
                    <button class="ant-btn ant-btn-primary" @click="clearSearch">
                        清空查询
                    </button>
                </a-form-item>
            </a-form>
            <a-row style="display: inline-block">
                <a-button
                        style="margin-right: 5px;margin-left: 10px;"
                        type="primary"
                        @click="entClsImport"
                        v-if="editable && OWL_IMPORT"
                >
                    <a-icon type="upload" />实体类导入
                </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
                        style="margin-right: 5px"
                        type="primary"
                        v-if="editable && ENTCLS_GRAPH_VIEW"
                        @click="entClsChart"
                >
                    <a-icon type="dot-chart" />
                    实体类可视化
                </a-button>
                <!-- <a-button
                        style="margin-right: 5px"
                        type="primary"
                        @click="entImportModal"
                        v-if="!editable && BF_ENT_IMPORT"
                >
                    <a-icon type="upload" />集成访问服务导入
                </a-button>
                <a-button
                        type="primary"
                        @click="entExportModal"
                        v-if="!editable && BF_ENT_EXPORT"
                >
                    <a-icon type="export" />集成访问服务导出
                </a-button> -->
            </a-row>
        </div>
        <div
                class="flex-row"
                style="height: calc(100% - 60px)"
        >
            <div id="leftPanel" class="flex-col" style="overflow-y: hidden">
                <div class="flex1 flex-col panel" style="height: 100%">
                    <b class="panel-header">
                        <a-icon type="deployment-unit" />&nbsp;实体类
                    </b>
                    <a-spin
                            tip="Loading..."
                            :spinning="spinning"
                            class="select-input flex1"
                            style="overflow-y: auto"
                    >
                        <ent-cls-list
                                :searchResult="searchResult"
                                :searchValue="searchValue"
                                @emitId="getEntClsId"
                                :activeId="$route.params.classId"
                                v-if="
                $route.path.indexOf('entity') > -1 && searchResult.length > 0
              "
                        ></ent-cls-list>
                    </a-spin>
                    <z-tree
                            class="select-input flex1"
                            :editable="editable"
                            style="margin-top:10px;"
                            v-if="searchResult.length == 0 && spinning == false"
                            @nodeSelected="entityClassNodeSelected"
                            @getAllRootList="entClsRootList"
                    ></z-tree>
                    <!--<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>
            </div>
            <router-view
                    id="rightPanel"
                    name="main"
                    class="flex1 panel flex-col"
                    :key="key"
                    :seaValue="searchValue"
                    :activeId="$route.params.classId"
            />
        </div>
    </div>
</template>

<script>
  import zTree from "@/views/knowledge/graphClass/entityClassZtree";
  import entClsList from "@/views/knowledge/graphClass/entClsList";

  import { searchEntClsByEntName } from "@/api/graph/entity"
  import { getEntityClass } from "@/api/graph/entityClass"
  export default {
    name: "manager",
    components: {
      zTree,
      entClsList,
    },
    data() {
      return {
        // 功能权限控制
        OWL_IMPORT: true,
        OWL_EXPORT: true,
        ENTCLS_GRAPH_VIEW: true,
        BF_ENT_IMPORT: true,
        BF_ENT_EXPORT: true,

        baseUrl: window.global.baseUrl(),
        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
      },
    },
    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()
      }
    },
    methods: {
      getEntClsId(id) {
        const vm = this;
        vm.$router.push({
          name: "class_entity_v2",
          params: { classId: id },
          query: {
            searchValue: vm.searchValue,
          },
        });
      },
      // 清空搜索
      clearSearch() {
        this.searchValue = "";
        this.searchResult = [];
        // this.$router.push({ path: "/mng/class/unknow/entity_v2" });
      },
      // 搜索
      handleSearch() {
        if (this.searchValue === "") {
          this.$message.error("请输入要搜索的实体名称");
          return;
        }
        this.spinning = true;
        // this.$router.push({path: '/mng/class/unknow/entity_v2'})
        searchEntClsByEntName(this.searchValue).then((resp) => {
          let data = resp.data
          let item = { entClsID: "uknow", entClsName: "全部" };
          data.unshift(item);
          this.searchResult = data;
          this.spinning = false;
        });
      },
      // 要导出的根节点实体类列表
      entClsRootList(list) {
        this.rootEntClsList = list;
      },
      entityClassNodeSelected(node) {
        if (this.$route.path.indexOf("entity") === -1) {
          // 实体类大标题下跳转
          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 {
          this.$router.push({
            name: "class_entity_v2",
            params: { classId: node.entClsID },
            query: { clsName: node.name },
          });
        }
      },
      /**
       * 导入模态框
       */
      entClsImport() {
        this.$open("entClsImportModal", {}, function() {
          // 刷新左侧树
          this.$trigger('entityClassZtree:refreshTree')
        });
      },
      entClsChart() {
        this.$router.push("/sta/entity_class_view");
      },
      /**
       * 导出模态框
       */
      entClsExportModal() {
        this.$open(
          "entClsExportModal",
          {
            rootEntClsList: this.rootEntClsList, // 根节点实体类列表
          },
          function() {}
        );
      },
      // 实体导入
      entImportModal() {
        this.$open("uploadZipServiceModal", {});
      },
      // 实体导出
      entExportModal() {
        this.$open("entClsServiceExportModal", {});
      },
    },

    beforeCreate() {
      if (this.$route.name === "manager") {
        this.$router.push("/mng/class");
      }
    },
    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;
        }
      });
    },
    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;
      },
    },
  };
</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>
