<script setup>
import { ref } from "vue";
import { raiInterface } from "@/api/api.js";
import mDialog from "../components/mapDialog.vue";
import { Plus, Edit, Delete } from "@element-plus/icons-vue";
const showData = ref(false); //数据
const isShowDia = ref(false);

const poper = ref(null);

const treeData = ref({});
const nodeData = ref({});
const dia_tit = ref("新增子级");

const defaultProps = ref({
  label: "IndustryMapName",
  children: "Children",
});

/* 获取树节点 */
const getNodeTree = async () => {
  raiInterface.getMap().then((res) => {
    if (res.Ret === 200) {
      treeData.value = res.Data.Node || {};
      showData.value = true;
    }
  });
};

/* 节点操作 */
const nodeHandle = (type, data) => {
  dia_tit.value = type;
  nodeData.value = {
    id: data.IndustryMapId,
    name: data.IndustryMapName,
    level: data.Level,
  };
  isShowDia.value = true;
};
/* 节点操作完成 */
const handleOver = () => {
  isShowDia.value = false;
  getNodeTree();
};

// 是否超出盒子宽度
const isOverflow = (box) => {
  return box.scrollWidth > box.offsetWidth;
};

getNodeTree();
</script>

<template>
  <div class="industryMap_container">
    <div class="tree_cont">
      <vue3-tree-org
        :data="treeData"
        :props="{
          label: 'IndustryMapName',
          id: 'ParentId',
          children: 'Children',
        }"
        :toolBar="false"
        :horizontal="true"
        :scalable="false"
      >
        <!-- 自定义节点内容 -->
        <template v-slot="{ node }">
          <div class="tem_node_item" v-if="showData">
        	<div class="title" :style="{ 'font-weight': node.id === 0 ? '600' : '' }">
              {{ node.label }}
            </div>
            <div class="tem_footer" v-if="node.id !== 0">
              <img @click.stop="nodeHandle('add', node)" src="~@/assets/img/set_m/add.png" alt="" style="width: 14px; height: 14px; margin-right: 8px" />
              <img @click.stop="nodeHandle('edit', node)" src="~@/assets/img/set_m/edit.png" alt="" style="width: 14px; height: 14px; margin-right: 8px" />
              <img v-if="!node.children || !node.children.length" @click.stop="nodeHandle('del', node)" src="~@/assets/img/set_m/del.png" alt="" style="width: 14px; height: 14px" />
            </div>
            <div class="tem_footer" v-else>
              <img @click.stop="nodeHandle('add', node)" src="~@/assets/img/set_m/add.png" alt="" style="width: 14px; height: 14px; margin-right: 8px" />
            </div>
          </div>
        </template>
      </vue3-tree-org>
    </div>
    <m-dialog :isShowDia="isShowDia" :nodeData="nodeData" :title="dia_tit" :selectedKey="'医药1'" selectedClassName="active_node" @cancel="isShowDia = false" @over="handleOver" />
  </div>
</template>

<style lang="scss">
.industryMap_container {
  padding: 20px 30px;
  background: #fff;
  min-height: calc(100vh - 200px);
  /* tree css */
  .zm-tree-org {
    padding: 0;
  }
  .tree-org-node__content .tree-org-node__inner {
    background: #e0eefd;
    color: #409eff;
    padding: 8px 10px;
    .tem_node_item .title {
      width: 110px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .horizontal .tree-org-node__children {
    padding-left: 30px;
  }
  .horizontal .tree-org-node__children:before {
    width: 30px;
  }
  .horizontal .tree-org-node:only-child:before {
    top: 0;
  }
  .horizontal .tree-org-node.is-leaf,
  .horizontal .tree-org-node.collapsed {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .tree_cont {
    min-width: 900px;
    margin-top: 50px;
    height: 700px;
    .tem_node_item {
      display: flex;
      align-items: center;
      .title {
        font-size: 14px;
      }
      .tem_footer {
        display: flex;
        cursor: pointer;
        margin-left: 10px;
      }
    }
  }
  .zm-tree-org .zoom-container {
    overflow-y: scroll;
  }
  .industryMap_top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
  }
  .poper {
    position: absolute;
    display: none;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border-radius: 5px;
  }
}
</style>
