<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2022-11-04 15:00:01
 * @LastEditors: 唐启辉 tangqihui@yuan-info.com
 * @LastEditTime: 2023-09-22 10:31:28
 * @FilePath: \yuan-huoling-browser\src\components\table\table.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="yaTableList">
    <div class="ya-tabs">
      <template v-for="(tab, j) in systemInfo" :key="j">
        <div
          class="ya-tab"
          v-if="tab.num > 0"
          :class="{ 'ya-active': tabIndex == j }"
          @click="handlerToChange(tab, j)"
        >
          <div class="ya-tab-num">{{ tab.num || 0 }}</div>
          <div class="ya-tab-text">{{ tab.title }}</div>
        </div>
      </template>
    </div>
    <div class="ya-detailContent">
      <!-- 硬件信息 -->
      <yaTabulation v-if="type == 'list'" :column="listColumn"></yaTabulation>
      <!-- 账号信息/已装软件/系统进程/环境变量 -->
      <div class="ya-table" v-if="type == 'table'">
        <ya-table
          :data="tableData"
          :column="tabLeColumn"
          :page-sizes="[10, 20, 50, 100]"
          :currentPage="pageIndex"
          :pageObj="{ layout: 'total,sizes, prev, pager, next', total: total }"
          :pageSize="10"
          @currentPageChange="handlePageChange"
          small
        >
          <template
            v-for="(tableSlot, index1) in getTableSlots"
            :key="index1"
            #[tableSlot]="{ item, index }"
          >
            <slot :name="tableSlot" :item="item" :index="index"></slot>
          </template>
        </ya-table>
      </div>
      <!-- 网络配置/路由 -->
      <div class="ya-block" v-if="type == 'block'">
        <template v-if="blockData.length > 0">
          <div class="ya-item" v-for="(item, i) in blockData" :key="i">
            <div class="ya-top">
              <div class="ya-title">
                {{ blockType ? 'IP地址' : '目标地址' }}：{{
                  item.ip || item.target || '-'
                }}
              </div>
              <div class="ya-num">
                {{ blockType ? '网卡名称' : '输出接口' }}：{{
                  item.name || item.outputInterface || '-'
                }}
              </div>
            </div>
            <div class="ya-middle">
              <div class="ya-ip">
                {{ blockType ? '掩码' : '子网掩码：' }}：{{ item.mask || '-' }}
              </div>
              <div class="ya-ip">
                {{ blockType ? 'MAC地址' : '网关地址：' }}：{{
                  item.mac || item.gateway || '-'
                }}
              </div>
            </div>
            <div class="ya-bottom">
              <!-- v-if="item.图片 == '登录采集'" -->
              <img src="../../../assets/image/icon-login.png" alt="" />
              <!-- <img
                v-if="item.图片 == '远程扫描'"
                src="../../../assets/image/icon-scan.png"
                alt=""
              /> -->
              <!-- <img
                v-if="item.图片 == '手动'"
                src="../../../assets/image/icon-hand.png"
                alt=""
              /> -->
              <span class="ya-time">{{ item.gatherTime }}</span>
            </div>
          </div>
        </template>
        <ya-empty v-else></ya-empty>
      </div>
      <!-- 端口/web端口/中间件/数据库 -->
      <div class="ya-tree" v-if="type == 'tree'">
        <customerTree
          v-if="treeData.length > 0"
          :chartData="treeData"
        ></customerTree>
        <ya-empty class="ya-border" v-else></ya-empty>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, defineProps, computed, onMounted } from 'vue';
import customerTree from '../../../components/customTree/customTree.vue';
import yaTabulation from './yaTabulation.vue';
import {
  getSyStemData,
  getSystemInfoTab,
} from '../../../api/collection/infoCollection/inventory';
const { systemInfo, code } = defineProps({
  systemInfo: Array,
  code: String,
});
//当前点击的tab的索引
let tabIndex = ref(0);

//第一个tab的type(类型)
let type = ref(systemInfo[0].type);

//type为tree的数据
const treeData = ref([]);

// type为block的数据
const blockData: any = ref([]);
//区分网络配置和路由（true：网络配置，false:路由）
const blockType = ref();
//type为list的数据
const listColumn = ref([]);
let activeKey = ref('');
//tab切换
const handlerToChange = (data, i) => {
  tabIndex.value = i;
  type.value = data.type;
  blockType.value = data.key == 'loginNetwork';
  activeKey.value = data.key;
  tabLeColumn.value = [];
  initData();
};
//获取tab
const initTab = () => {
  getSystemInfoTab().then((res) => {
    const { code, data } = res || {};
    if (code == 200) {
      for (let key in data) {
        systemInfo?.map((item) => {
          item.key == key && (item.num = data[key]);
        });
      }
      activeKey.value = systemInfo[0].key;
      initData();
    }
  });
};
//数据变化
const initData = () => {
  let params = {
    code: code,
    type: activeKey.value,
  };
  if (type.value == 'table') {
    params.pageIndex = pageIndex.value;
    params.pageSize = 10;
  }
  getSyStemData(params).then((res) => {
    const { code, data } = res || {};
    if (code == 200) {
      switch (type.value) {
        case 'block':
          blockData.value = data?.records || [];
          break;
        case 'list':
          let params = data?.records[0] || {};
          let children =
            systemInfo?.find((item) => item.key == activeKey.value) || {};
          children.column?.map((item) => {
            item.key && (item.value = params[item.key]);
          });
          listColumn.value = children.column;
          break;
        case 'tree':
          treeData.value = data?.records || [];
          break;
        case 'table':
          let child =
            systemInfo?.find((item) => item.key == activeKey.value) || {};
          tabLeColumn.value = child.column;
          tableData.value = data?.records || [];
          total.value = data?.total;
          break;
      }
    }
  });
};

//table的翻页--start
let pageIndex = ref(1);
let total = ref(0);
const tableData = ref([]);
const tabLeColumn = ref([]);
const handlePageChange = (val: Number) => {
  pageIndex.value = val;
  initData();
};
//table的翻页--end
const getTableSlots = computed(() => {
  const tableSlots = [];
  tabLeColumn.value?.map((item) => {
    const { slotName } = item;
    slotName && tableSlots.push(slotName);
  });
  return tableSlots;
});
onMounted(() => {
  initTab();
});
</script>
<style lang="scss" scoped>
.yaTableList {
  .ya-tabs {
    display: flex;
    flex-wrap: wrap;

    .ya-tab {
      width: 123px;
      height: 58px;
      background: var(--el-color-primary);
      border-radius: 6px;
      padding: 8px 24px;
      box-sizing: border-box;
      margin: 0px 6px 12px 6px;
      cursor: pointer;

      .ya-tab-num {
        font-size: 18px;
        color: var(--el-color-white);
        line-height: 21px;
      }

      .ya-tab-text {
        color: rgba(255, 255, 255, 0.6);
        line-height: 20px;
      }
    }

    .ya-active {
      background: #f6fbff;

      .ya-tab-num {
        color: var(--el-color-primary);
      }

      .ya-tab-text {
        color: var(--el-color-primary);
      }
    }
  }
  .ya-title {
    font-size: 18px;
    font-weight: 600;
    color: #082e58;
    line-height: 25px;
  }

  .ya-detailContent {
    padding-left: 0px;
    .ya-block {
      display: flex;
      flex-wrap: wrap;

      .ya-item {
        width: calc((100% - 32px) / 3);
        padding: 16px;
        box-sizing: border-box;
        border-radius: 6px;
        border: 1px solid var(--el-border-color);
        margin-bottom: 12px;

        .ya-top {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12px;

          .ya-title {
            font-size: 16px;
            font-weight: 500;
            color: #313131;
            line-height: 22px;
          }

          .ya-num {
            color: var(--el-color-success);
            line-height: 20px;
          }
        }

        .ya-middle {
          margin-bottom: 34px;
          display: flex;

          .ya-ip {
            width: 50%;
            color: var(--el-text-color-regular);
            line-height: 20px;
            position: relative;

            &:not(:last-child)::after {
              content: '';
              display: block;
              width: 1px;
              height: 13px;
              background-color: #eceff2;
              position: absolute;
              top: 3px;
              right: 0px;
              margin: 0 16px;
            }
          }
        }

        .ya-bottom {
          img {
            width: 28px;
            height: 28px;
            margin-right: 12px;
            vertical-align: middle;
          }

          .ya-time {
            color: rgba(0, 0, 0, 0.6);
            line-height: 20px;
          }
        }

        &:nth-child(3n-1) {
          margin: 0px 16px 12px 16px;
        }
      }
    }
  }
}
</style>
