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

<template>
  <div class="main_wrap" v-loading="graphDataLoading">
    <div className='g6-component-topbar'>
      <graphTopbar ref="topBarRef" @displaySwitchChange="displaySwitchChange" :isGraphDisplay="isGraphDisplay" />
    </div>
    <RelationNetwork v-show="graphTreeData?.guid && isGraphDisplay" ref="relationNetworkRef" :tree-data="graphTreeData"
      :noContextMenu="true" @nodeItemClick="handleNodeItemClick">
    </RelationNetwork>
    <Sankey v-show="!isGraphDisplay && (sankeyNames?.length || sankeyDataLoading)" v-loading="sankeyDataLoading"
      :tree-data="sankeyData" :names="sankeyNames">
    </Sankey>
    <div v-show="(isGraphDisplay ? !graphTreeData?.guid : (!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>
</template>

<script lang="ts" setup name="metadataStandardQueryView">
import {
  getMetaStandardField,
  getSankeyData,
  getMetaStandardTreeList
} from '@/api/modules/dataMetaService';
import Sankey from './components/Sankey.vue';
import { ElMessage } from 'element-plus';

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

const metaGuid = ref(route.query.guid);

const { proxy } = getCurrentInstance() as any;

const relationNetworkRef = ref();

const graphDataLoading = ref(false);

/** 关系网树形数据 */
const graphTreeData: any = ref({});

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

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(metaGuid.value).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');
  let parentData = graph.findDataById(nodeId);
  if (!parentData.children) {
    parentData.children = [];
  }
  if (parentData.isHaveData == 'N') {
    ElMessage.warning('没有可展开的下级字段');
    return;
  }
  // graph.updateConfig({ animate: false });
  // graph.refresh();
  nodeItem.getModel().collapsed = false;
  parentData.collapsed = false;
  graphDataLoading.value = true;
  getMetaStandardField(nodeId).then((res: any) => {
    graphDataLoading.value = false;
    if (res?.code == proxy.$passCode) {
      parentData = graph.findDataById(nodeId);
      const data = res.data || [];
      parentData.children = [];
      if (!data?.length) {
        parentData.isHaveData = 'N';
        ElMessage.warning('没有可展开的下级字段');
        return;
      }
      data.forEach(d => {
        parentData.children.push(d);
      })
      parentData.isLoading = false;
      nodeItem.getModel().collapsed = false;
      parentData.collapsed = false;
      graph.updateItem(nodeItem, {
        ...nodeItem.getModel(),
        collapsed: false
      });
      graph.layout();
      setTimeout(() => {
        // graph.updateConfig({ animate: true });
        // graph.refresh();
        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: 400 // 动画时长为500ms
  });
      }, 500);
    } else {
      parentData.isLoading = false;
      ElMessage.error(res.msg);
    }
  })
}

onBeforeMount(() => {
  graphDataLoading.value = true
  getMetaStandardTreeList(metaGuid.value).then((res: any) => {
    graphDataLoading.value = false;
    if (res?.code == proxy.$passCode) {
      const data = res.data || [];
      let resultData = data?.[0] || {};
      if (!resultData?.children?.length && resultData.isHaveData == 'Y') {
        graphDataLoading.value = true;
        getMetaStandardField(resultData.guid).then((res: any) => {
          graphDataLoading.value = false;
          if (res?.code == proxy.$passCode) {
            resultData.children = res.data || [];
            graphTreeData.value = resultData;
          } else {
            graphTreeData.value = resultData;
            ElMessage.error(res.msg);
          }
        });
      } else {
        graphTreeData.value = resultData;
      }
    } else {
      ElMessage.error(res.msg);
    }
  })
})

</script>

<style lang="scss" scoped>
.main_wrap {
  height: 100%;
  width: 100%;
  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;
}
</style>