<script setup lang="ts">
import { getFdmData } from './fdm.server';
import { ref, reactive, watch } from 'vue';
import { traduction } from '@/utils/language';
import { showElMessage, compareObjectEqual } from '@/utils/utils';
import { displayDateTime, getDetailsData, getTableData } from './functions/fdmFunctions';

import TablePart from './components/TablePart.vue';
import DetailsPart from './components/DetailsPart.vue';
import GlobalStoreService from '@/services/gloabal-store-service';
import NoDataAvailable from '@/components/NoDataAvailable/NoDataAvailable.vue';
import { loading } from '@/utils/composition';

const globalStoreService = new GlobalStoreService();
const errorMsg = traduction('COMMON_FAILED');

let treeList: any[] = reactive([]);
const treeProps = {
  children: 'setChildren',
  label: 'label',
};
let detailsData: any[] = reactive([]);
let tableData: any[] = reactive([]);
let lastCheckNode = {};

const systemLock = ref(false);
// 请求数据完成结果
let reqRes = reactive({
  tree: false,
  details: false,
  table: false,
});

const watchList: any[] = [() => reqRes.tree, () => reqRes.details, () => reqRes.table];
watch(watchList, (val: boolean[]) => {
  for (let i = 0; i < val.length; i++) {
    if (!val[i]) {
      return;
    }
  }
  loading(false);
});

function getTreeNode(arr: any) {
  const treeNode: any[] = [];
  arr.forEach((item: any) => {
    const nodeItem: any = {
      label: item.SilkName,
      componentID: Number(item.ComponentID),
      eventReports: item.EventReports,
      deviceInfo: item.DeviceInfo,
      onlineTime: displayDateTime(item.OnlineTimeStamp, item.OnlineTimeZone),
      setChildren: [],
    };
    if (item.AssociateDevice && item.AssociateDevice.length > 0) {
      nodeItem.setChildren = getTreeNode(item.AssociateDevice);
    }
    treeNode.push(nodeItem);
  });
  return treeNode;
}

// 点击节点 获取详情和表格数据
function checkNode(nodeData: any) {
  if (!compareObjectEqual(lastCheckNode, nodeData)) {
    lastCheckNode = nodeData;
    globalStoreService.setValue('isLoading', true);
    detailsData.splice(0);
    tableData.splice(0);
    // 详情数据
    getDetailsData(nodeData, detailsData, reqRes);
    // 表格数据
    getTableData(nodeData, tableData, reqRes);
  }
}

// 获取数据
function getData() {
  reqRes.tree = false;
  treeList.splice(0);
  globalStoreService.setValue('isLoading', true);
  getFdmData()
    .then((data: any) => {
      const list = getTreeNode(data.DeviceTree);
      treeList.push(...list);
      reqRes.tree = true;
      if (treeList[0]) {
        checkNode(treeList[0]);
      } else {
        globalStoreService.setValue('isLoading', false);
      }
    })
    .catch((err: any) => {
      reqRes.tree = true;
      globalStoreService.setValue('isLoading', false);
    });
}

getData();
</script>

<template>
  <div id="fdm" class="fdm">
    <div id="fdmContent" class="left-tree">
      <!-- 需要注意current-node-key要想生效，必须设置正确的node-key -->
      <el-tree
        v-if="treeList.length"
        id="netLeftMenu"
        ref="tree"
        v-reqKeepAlive.tree
        :accordion="true"
        :data="treeList"
        :props="treeProps"
        :node-key="treeProps.label"
        :highlight-current="true"
        :current-node-key="treeList.length ? treeList[0][treeProps.label] : ''"
        @node-click="checkNode"
      />
      <NoDataAvailable v-if="!treeList.length" />
    </div>

    <div class="content">
      <div class="detials-part">
        <DetailsPart :details-data="detailsData" />
      </div>
      <div v-if="treeList.length" id="fdmDeviceCase" class="table-part">
        <TablePart :table-data="tableData" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.fdm {
  font-size: 12px;
  color: var(--o-text-color-secondary);
  display: flex;
  padding-right: 24px;
  flex: 1;

  .left-tree {
    flex: 2;
    min-width: 150px;
    background-color: var(--o-bg-color-base);
    border-radius: 4px;
    padding: 24px 8px;
    height: 100%;
    overflow: auto;
    position: relative;

    :deep(.el-tree) {
      background-color: rgba(0, 0, 0, 0);

      .is-current {
        > .el-tree-node__content {
          background-color: var(--o-color-primary);
          border-radius: 4px;

          .el-icon,
          .el-tree-node__label {
            color: white;
            font-weight: 600;
          }
        }

        > .el-tree-node__content:hover {
          .el-tree-node__label,
          .el-icon {
            color: white;
          }
        }
      }

      .el-tree-node__content:hover {
        .el-tree-node__label,
        .el-icon {
          color: var(--o-color-primary-secondary);
        }
      }

      .is-leaf {
        opacity: 0;
      }
    }
  }

  .content {
    flex: 8;
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    min-width: 0;

    .detials-part {
      padding: 24px 16px;
      border-radius: 4px;
      background-color: var(--o-bg-color-base);
      width: 100%;
      min-width: 0;
    }

    .table-part {
      padding: 16px;
      margin-top: 8px;
      flex: 1;
      border-radius: 4px;
      background-color: var(--o-bg-color-base);
      width: 100%;
      min-width: 0;
    }
  }
}
</style>
