<script lang="ts" setup>
import { ref, reactive, onMounted, watch, getCurrentInstance } from 'vue';
import LineChart from '../../../components/chart/LineChart/LineChart.vue';
import CommonCardVue from '../../../components/CommonCard/CommonCard.vue';
import yaDetailBlock from '../components/yaDetailBlock.vue';
import yaSystemInfo from '../components/yaSystemInfo.vue';
import Dialog from '../components/dialog.vue';
import {
  getByCodeDetail,
  getSyStemData,
} from '../../../api/collection/infoCollection/inventory';
import {
  detailData,
  assetsColumn,
  equipmentTypeColumn,
  complianceInfoColumn,
  cpuColor,
  memoryColor,
  ioColor,
  systemInfo,
} from './data';
import { useRoute } from 'vue-router';
import { openSocket, registerSockets } from '@/utils/socket/useSocket';
const { proxy } = getCurrentInstance();
const route = useRoute();
const dataList = ref({});
//基本数据初始化
const initBaseData = () => {
  getByCodeDetail(route.query).then((res) => {
    const { code, data } = res;
    if (code == 200) {
      dataList.value = { ...data, ...data.feature } || {};
      const assetTagNameSet = dataList.value.assetTagNameSet?.split(',') || [];
      dataList.value.tagData = assetTagNameSet?.map((item, index) => {
        return {
          code: index,
          name: item,
        };
      });
      detailData.map((item) => {
        item.value = dataList.value[item.key];
        item.key == 'internetAccess' && (item.value = item.value ? '是' : '否');
        item.key == 'gatherTypeNameSet' &&
          (item.value = item.value?.toString());
      });
      assetsColumn.map((item) => (item.value = dataList.value[item.key]));
      equipmentTypeColumn.map((item) => {
        item.value = dataList.value[item.key];
        item.img = Boolean(dataList.value[item.imgKey]);
      });
      complianceInfoColumn.map(
        (item) => item.key && (item.value = dataList.value[item.key])
      );
    }
  });
};
//性能监控数据初始化

const linexAxisData = ref([]);
const cpuChartData = ref([
  {
    name: 'CPU使用率',
    data: [],
  },
]);
const memoryChartData = ref([
  {
    name: '内存使用率',
    data: [],
  },
]);
const ioChartData = ref([
  {
    name: 'IO使用率',
    data: [],
  },
]);
const sockets = {
  message(res) {
    if (res.type == 'ws_performanceInfo') {
      const { data, code } = res.data;
      code == 200 && data && data.records?.length > 0&&getChartData(data.records)
    }
  },
};
const initPerformanceData = () => {
  let params = {
    code: route.query.code,
    type: 'loginPerformance',
  };
  getSyStemData(params).then((res) => {
    const { code, data } = res || {};
    code == 200 && data && data.records?.length > 0&&getChartData(data.records)
  });
  openSocket('ws_performanceInfo', params, sockets);
};
//将接口获取到的性能监控的数据转为chartData
const getChartData=(data)=>{
  linexAxisData.value = data.map((item) => item.gatherTime);
      cpuChartData.value[0].data = data.map((item) => item.cpuUsage);
      memoryChartData.value[0].data = data.map(
        (item) => item.memoryUsage
      );
      ioChartData.value[0].data = data.map((item) => item.ioUsage);
}
onMounted(() => {
  registerSockets(sockets, proxy);
  initBaseData();
  initPerformanceData();
});
</script>
<template>
  <div class="yaBox">
    <div class="ya-top">
      <img src="../../../assets/image/collection/img-1.png" alt="" />
      <div class="ya-right">
        <div class="ya-right-top">
          <div class="ya-right-top-left">
            <div class="ya-title">
              {{ dataList.ipv4 || '-' }}（{{ dataList.name || '-' }}）
            </div>
            <div
              style="
                 {
                  position: relative;
                  z-index: 11;
                }
              "
            >
              <Dialog :list="dataList.tagData" />
            </div>
          </div>
          <div class="ya-right-top-right">
            <div class="ya-tag">{{ dataList.networkAreaName || '-' }}</div>
            <div class="ya-dot"></div>
            {{ dataList.statusName || '-' }}
          </div>
        </div>
        <div class="ya-right-bottom">
          <div class="ya-item" v-for="item in detailData" :key="item.key">
            <div class="ya-item-left">{{ item.label }}：</div>
            <div class="ya-item-right">
              <yaTooltip v-if=" item.value" placement="top" trigger="hover" :enterable="false" :hide-after="0" :content="item.value"
              >{{ item.value }}</yaTooltip>
            <div v-else>-</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ya-block">
      <yaDetailBlock title="资产归属" :column="assetsColumn"></yaDetailBlock>
    </div>
    <div class="ya-block">
      <yaDetailBlock
        title="设备型号"
        :column="equipmentTypeColumn"
      ></yaDetailBlock>
    </div>
    <div class="ya-block">
      <yaDetailBlock
        title="合规信息"
        :column="complianceInfoColumn"
      ></yaDetailBlock>
    </div>
    <div class="ya-block">
      <yaDetailBlock title="系统信息">
        <template #content>
          <yaSystemInfo :systemInfo="systemInfo" :code="route.query?.code">
            <template #yaGroup="{ item }">
              <div class="ya-group">{{ item.group }}</div>
            </template>
            <template #yaOrigin>
              <div>登录采集</div>
            </template>
          </yaSystemInfo>
        </template>
      </yaDetailBlock>
    </div>
    <div class="ya-block">
      <yaDetailBlock title="性能监控">
        <template #content>
          <div class="ya-performance">
            <div class="ya-performance-item">
              <CommonCardVue title="CPU使用率(%)" class="custom-row-item">
                <LineChart
                  v-if="cpuChartData[0]?.data?.length > 0"
                  :colors="cpuColor.color"
                  :isShowSide="true"
                  :chartData="cpuChartData"
                  :xAxisData="linexAxisData"
                  :areaGradientColor="cpuColor.areaGradientColor"
                  :boundaryGap="true"
                />
                <ya-empty v-else></ya-empty>
              </CommonCardVue>
            </div>
            <div class="ya-performance-item">
              <CommonCardVue title="内存使用率(%)" class="custom-row-item">
                <LineChart
                  v-if="memoryChartData[0]?.data?.length > 0"
                  :colors="memoryColor.color"
                  :isShowSide="true"
                  :chartData="memoryChartData"
                  :xAxisData="linexAxisData"
                  :areaGradientColor="memoryColor.areaGradientColor"
                  :boundaryGap="true"
                />
                <ya-empty v-else></ya-empty>
              </CommonCardVue>
            </div>
            <div class="ya-performance-item">
              <CommonCardVue title="IO使用率(%)" class="custom-row-item">
                <LineChart
                  v-if="ioChartData[0]?.data?.length > 0"
                  :colors="ioColor.color"
                  :isShowSide="true"
                  :chartData="ioChartData"
                  :xAxisData="linexAxisData"
                  :areaGradientColor="ioColor.areaGradientColor"
                  :boundaryGap="true"
                />
                <ya-empty v-else></ya-empty>
              </CommonCardVue>
            </div>
          </div>
        </template>
      </yaDetailBlock>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.yaBox {
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;

  .ya-top {
    padding: 24px;
    background: #ebf7ff;
    border-radius: 6px;
    display: flex;
    ::v-deep .tag-item {
      margin-bottom: 0px;
    }

    img {
      width: 58px;
      height: 58px;
      margin-right: 16px;
    }

    .ya-right {
      flex: 1;

      .ya-right-top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .ya-tag {
          height: 20px;
          box-sizing: border-box;
          background: #ebf7ff;
          border-radius: 12px;
          border: 1px solid var(--el-color-primary);
          font-size: 10px;
          color: var(--el-color-primary);
          text-align: center;
          line-height: 16px;
          margin-right: 8px;
        }

        .ya-right-top-left {
          display: flex;
          align-items: center;

          .ya-title {
            font-size: 16px;
            font-weight: 500;
            color: var(--el-overlay-color);
            line-height: 22px;
          }
        }

        .ya-right-top-right {
          display: flex;
          align-items: center;
          color: var(--el-overlay-color);

          .ya-tag {
            color: var(--el-color-success);
            border: 1px solid var(--el-color-success);
          }

          .ya-dot {
            width: 8px;
            height: 8px;
            background: var(--el-color-success);
            border-radius: 50%;
            margin-right: 8px;
          }
        }
      }

      .ya-right-bottom {
        display: flex;
        flex-wrap: wrap;

        .ya-item {
          display: flex;
          line-height: 20px;
          margin-top: 12px;

          .ya-item-left {
            color: rgba(0, 0, 0, 0.6);
          }

          .ya-item-right {
            max-width: 85px;
            overflow: hidden; //块元素超出隐藏
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--el-overlay-color);
          }
        }

        .ya-item:not(:last-child) {
          position: relative;
          margin-right: 32px;
          .ya-item-right {
            &::after {
              content: '';
              display: block;
              width: 1px;
              height: 14px;
              background: var(--el-overlay-color-lighter);
              border-radius: 1px;
              position: absolute;
              top: 3px;
              right: -16px;
            }
          }
        }
      }
    }
  }

  .ya-block {
    .ya-group {
      width: fit-content;
      padding: 4px 16px;
      box-sizing: border-box;
      background: #ebf7ff;
      border-radius: 4px;
      color: var(--el-color-primary);
    }

    .ya-performance {
      display: flex;
      justify-content: space-between;

      .ya-performance-item {
        width: 30%;
        height: 288px;

        ::v-deep .ya-card {
          padding: 0px;

          .prefix {
            &::after {
              display: none !important;
            }
          }
        }

        .custom-row-item {
          height: 100%;
        }
      }
    }
  }
}
</style>
