<route lang="yaml">
    name: metadataStandardQuery
    </route>

<script lang="ts" setup name="metadataStandardQuery">
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from "element-plus";
import Sankey from './components/Sankey.vue';
import Tree from '@/components/Tree/index.vue';
import RelationNetwork from '@/components/RelationNetwork/index.vue';
import {
  getDataWareCatalogList,
  getMetaStandardTreeList,
  getMetaStandardField,
  getSankeyData
} from '@/api/modules/dataMetaService';
import { useRouter, useRoute } from "vue-router";
import useDataMetaStore from "@/store/modules/dataMeta"
import { cloneDeep } from 'lodash-es';

import { useValidator } from '@/hooks/useValidator';

const { required } = useValidator();

const router = useRouter();
const route = useRoute()

const { proxy } = getCurrentInstance() as any;

const relationNetworkRef = ref();

const treeInfo = ref({
  id: "data-meta-standard-tree",
  filter: true,
  queryValue: "",
  queryPlaceholder: "请输入关键字搜索",
  props: {
    label: "standardName",
    value: "guid",
    isLeaf: "isLeaf",
  },
  nodeKey: 'guid',
  expandedKey: [],
  currentNodeKey: '',
  expandOnNodeClick: false,
  data: <any>[],
  loading: false
});

/** 获取左侧树数据. */
const getTreeData = async () => {
  treeInfo.value.loading = true
  getMetaStandardTreeList('').then((res: any) => {
    treeInfo.value.loading = false;
    if (res?.code == proxy.$passCode) {
      const data = res.data || [];
      treeInfo.value.data = data;
      if (data.length) {
        treeInfo.value.currentNodeKey = data[0].guid;
        treeInfo.value.expandedKey = <any>[data[0].guid];
        nodeClick(treeInfo.value.data[0])
      }
    } else {
      ElMessage.error(res.msg);
    }
  })
}
/** 左侧树的的组件引用. */
const treeInfoRef = ref();

/** 当前选中的树节点数据data */
const lastClickNode: any = ref({});

const treeDataLoading = ref(false);

/** 点击左侧树节点,更新对应的血缘关系图. */
const nodeClick = (data) => {
  const ele = <HTMLElement>document.querySelector(".g6-component-contextmenu")
  if (ele) {
    ele.style.display = "none"
  }
  treeInfo.value.currentNodeKey = data.guid;
  treeInfo.value.expandedKey = <any>[data.guid];
  lastClickNode.value = cloneDeep(data);
  if (!isGraphDisplay.value) {
    getSankeyDataList();
  }
}

/** 选中树节点后自动滚动到可视范围内. */
const scrollToNode = (nodeId) => {
  nextTick(() => {
    const nodeElement = treeInfoRef.value.treeRef.$el.querySelector(`[data-key="${nodeId}"]`);
    if (nodeElement) {
      nodeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  });
}

/** 处理从详情处跳转而来的默认展示. */
const processRouter = () => {
  const { guid, databaseName, tableName, databaseChName, databaseGuid, fieldGuid, fieldEnName, set } = useDataMetaStore()
  let isFL = useDataMetaStore().isFieldLineage;
  if (fieldGuid) {//查看字段血缘的
    nextTick(() => {
      treeInfo.value.expandedKey = <any>[databaseGuid, guid];
      treeInfo.value.currentNodeKey = fieldGuid as string;
      scrollToNode(fieldGuid);
      treeInfoRef.value.setCurrentKey(fieldGuid);
    })
    lastClickNode.value = { guid: fieldGuid, tableGuid: guid, databaseGuid: databaseGuid, enName: fieldEnName, tableName, databaseName, type: 4, isLeaf: true, databaseChName };
    // getTableFieldLineageMap();
    set()
  } else if (guid) {
    treeInfo.value.currentNodeKey = guid as string;
    treeInfo.value.expandedKey = <any>[databaseGuid, guid];
    lastClickNode.value = { guid: guid, tableName, databaseName, type: 3, databaseChName };
    scrollToNode(guid);
    // if (isFL) {
    //   getAllTableFieldLineageMap();
    // } else {
    //   getTableLineageMap()
    // }
    set()
  }
}

onActivated(() => {
  //processRouter();
});

onBeforeMount(async () => {
  await getTreeData()
  // processRouter();
})

onMounted(() => { })

const sankeyDataLoading = ref(false);

const sankeyData: any = ref([]);

const sankeyNames: any = ref([]);

const isGraphDisplay = ref(true);

const displaySwitchChange = (val) => {
  if (val == isGraphDisplay.value) {
    return;
  }
  isGraphDisplay.value = val;
  if (!val) {
    getSankeyDataList();
  }
}

const getSankeyDataList = () => {
  sankeyDataLoading.value = true;
  getSankeyData(lastClickNode.value.guid).then((res: any) => {
    sankeyDataLoading.value = false;
    if (res?.code == proxy.$passCode) {
      sankeyData.value = res.data?.links || [];
      sankeyNames.value = res.data?.data || [];
    } else {
      ElMessage.error(res.msg);
    }
  })
}

const handleNodeItemClick = (graph, nodeItem) => {
  const nodeId = nodeItem.get('id');
  const parentData = graph.findDataById(nodeId);
  if (!parentData.children) {
    parentData.children = [];
  }
  if (parentData.noData) {
    ElMessage.warning('没有可展开的下级字段');
    return;
  }
  treeDataLoading.value = true;
  getMetaStandardField(nodeId).then((res: any) => {
    treeDataLoading.value = false;
    if (res?.code == proxy.$passCode) {
      const data = res.data || [];
      parentData.children = [];
      if (!data?.length) {
        parentData.noData = true;
        ElMessage.warning('没有可展开的下级字段');
        return;
      }
      data.forEach(d => {
        parentData.children.push(d);
      })
      parentData.isLoading = false;
      parentData.collapsed = false;
      graph.layout();
      setTimeout(() => {
        graph.updateItem(nodeItem, {
          ...nodeItem.getModel(),
          collapsed: false
        });
        graph.setMinZoom(1);
        graph.setMaxZoom(1);
        graph.layout();
        graph.setMinZoom(0.5);
        graph.setMaxZoom(5);
        graph.focusItem(nodeItem, true, {
    duration: 500 // 动画时长为500ms
  });
      }, 500);
    } else {
      parentData.isLoading = false;
      ElMessage.error(res.msg);
    }
  })
}

const handleContextMenu = (model) => {
  if (model.isHaveData == 'N') {
    ElMessage.warning('当前标准下无字段，请先添加字段');
    return;
  }
  contextNodeData.value = model;
  dialogInfo.value.visible = true;
  formItems.value[0].default = '';
  getDataWareCatalogList({}).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      dataCatalogList.value = res.data || [];
      formItems.value[0].options = dataCatalogList.value;
    } else {
      ElMessage.error(res.msg);
    }
  })
}

onBeforeUnmount(() => {
  relationNetworkRef.value.destroy();
})

/** 数仓目录树形列表 */
const dataCatalogList = ref([]);

const formItems = ref([{
  label: "数仓目录",
  type: "tree-select",
  placeholder: "请选择",
  field: "domainGuid",
  default: '',
  options: dataCatalogList.value,
  props: {
    label: 'name',
    value: 'guid'
  },
  showAllLevels: false,
  checkStrictly: false,//只能选择叶子节点。
  lazy: false,
  filterable: true,
  clearable: true,
  required: true,
}]);

const formRules = ref({
  domainGuid: [required('请选择数仓目录')],
});

const dialogInfo = ref({
  visible: false,
  size: 400,
  direction: "column",
  header: {
    title: "引用标准新建数据集",
  },
  type: '',
  contents: [
    {
      type: 'form',
      title: '',
      formInfo: {
        id: 'select-subject-domain-list',
        items: formItems.value,
        rules: formRules.value
      }
    }
  ],
  footer: {
    btns: [
      { type: "default", label: "取消", value: "cancel" },
      { type: "primary", label: "确定", value: "submit", loading: false },
    ],
  },
});

const contextNodeData: any = ref({});

const selectDataCatalogNodeObj: any = ref({});

const handleTreeSelectNodeChange = (node, item, nodeObj) => {
  selectDataCatalogNodeObj.value = nodeObj;
}

const dialogBtnClick = (btn, info) => {
  if (btn.value == 'submit') {
    dialogInfo.value.visible = false;
    if (selectDataCatalogNodeObj.value.parent.data.layereAttribute == 2) { //维度
      router.push({
        name: 'dimTableCreateManual',
        query: {
          domainGuid: info.domainGuid,
          domainName: selectDataCatalogNodeObj.value.data.name,
          metaStandard: contextNodeData.value.guid,
          standardName: contextNodeData.value.label
        }
      });
    } else {
      if (selectDataCatalogNodeObj.value.parent.data.layereAttribute == 4) {
        router.push({
          name: 'tableCreateManual',
          query: {
            domainGuid: info.domainGuid,
            domainName: selectDataCatalogNodeObj.value.data.name,
            metaStandard: contextNodeData.value.guid,
            layereAttribute: selectDataCatalogNodeObj.value.parent.data.layereAttribute,
            standardName: contextNodeData.value.label
          }
        });
      } else {
        router.push({
          name: 'tableCreateManual',
          query: {
            domainGuid: info.domainGuid,
            domainName: selectDataCatalogNodeObj.value.data.name,
            metaStandard: contextNodeData.value.guid,
            standardName: contextNodeData.value.label
          }
        });
      }
    }
  } else if (btn.value == 'cancel') {
    dialogInfo.value.visible = false;
  }
}

</script>

<template>
  <div class="container_wrap full flex">
    <div class="aside_wrap">
      <div class="aside_title">元数据标准列表</div>
      <Tree ref="treeInfoRef" :treeInfo="treeInfo" @nodeClick="nodeClick" />
    </div>
    <div class="main_wrap">
      <div className='g6-component-topbar'>
        <graphTopbar ref="topBarRef" @displaySwitchChange="displaySwitchChange" :isGraphDisplay="isGraphDisplay" />
      </div>
      <RelationNetwork v-show="lastClickNode?.guid && isGraphDisplay" ref="relationNetworkRef"
        :tree-data="lastClickNode" v-loading="treeDataLoading" @nodeItemClick="handleNodeItemClick"
        @contextMenu="handleContextMenu">
      </RelationNetwork>
      <Sankey v-show="lastClickNode?.guid && !isGraphDisplay && (sankeyNames?.length || sankeyDataLoading)"
        v-loading="sankeyDataLoading" :tree-data="sankeyData" :names="sankeyNames">
      </Sankey>
      <div
        v-show="!lastClickNode?.guid && !treeInfo.data?.length || (!isGraphDisplay && !sankeyDataLoading && !sankeyNames?.length)"
        class="main-placeholder">
        <img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
        <div class="empty-text">暂无数据</div>
      </div>
    </div>
    <Dialog :dialogInfo="dialogInfo" @btnClick="dialogBtnClick" @treeSelectNodeChange="handleTreeSelectNodeChange" />
  </div>
</template>

<style scoped lang="scss">
.container_wrap {

  .aside_wrap {
    width: 200px;
    margin-right: 1px;
  }

  .main_wrap {
    position: relative;

    :deep(.canvas-wrapper) {
      background-color: #f7f7f9;
    }

    .main-placeholder {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .empty-text {
        font-size: 14px;
        color: #b2b2b2;
      }
    }
  }

}

.g6-component-topbar {
  position: absolute;
  left: 24px;
  bottom: unset;
  top: 14px;
  padding: 0;
  text-align: center;
  z-index: 999;
}

.container_wrap.flex .main_wrap {
  padding: 0px;
}

.tree_panel {
  height: calc(100% - 36px);
  padding-top: 0;

  :deep(.el-tree) {
    margin: 0;
    overflow: hidden auto;
  }
}

.card-noData {
  height: 100%;
  width: 100%;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #909399;
  font-size: 14px;
}

:deep(.el-form .el-form-item) {
  width: calc(100%);
  // margin-right: 8px;
}

:deep(.el-message) {
  position: fixed;
  /* 使用fixed或absolute定位 */
  z-index: 10000;
  /* 设置一个较高的z-index值确保在最上层显示 */
}
</style>