<!--
 * @Author: 李佐宁 lizuoning@yuan-info.com
 * @Date: 2023-04-10 14:29:44
 * @LastEditors: 曹文丽
 * @LastEditTime: 2023-09-01 16:59:32
 * @FilePath: \yuan-risk-management-browser\src\views\system\probeManagement.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="probeManagement">
    <div class="ya-top">
      <CommonCardVue title="探针状态分布" style="width: 450px; margin-right: 16px">
        <CircularDiagram otherType="one" v-if="chartData.length" :chartData="chartData" :colorBg="['#8BC17C', '#59718A']"
          :radius="['50%', '63%']" :legendClick="false" :pieCenter="['50%', '50%']"
          :tooltipValueFormatter="(val) => val + '%'" />
        <ya-empty v-else></ya-empty>
      </CommonCardVue>
      <CommonCardVue title="今日总流量趋势" class="ya-today-flow">
        <LineChart v-if="lineChartData.length" title="单位：Gbps" :showSymbol="true" :chartData="lineChartData"
          :xAxisData="linexAxisData" />
        <ya-empty v-else></ya-empty>
      </CommonCardVue>
    </div>
    <CommonCardVue class="ya-content">
      <div class="ya-left">
        <div class="ya_title">探针列表</div>
        <div class="ya_content">
          <ElScrollbar v-if="list.length">
            <div class="ya-box ya-border-color" v-for="(item, i) in list"
              :class="current === i ? 'ya-primary-bg-color' : 'ya-fill-color'" :key="i" @click="handleChoose(i)">
              <img class="ya-box-icon ya-primary-bg-color ya-button is-plain"
                src="../../assets/image/system/icon_probe.png" />
              <div class="ya-box-cot">
                <div class="ya_name ya-primary-text">{{ item.probeName }}</div>
                <div class="ya_ip ya-regular-text">{{ item.ip }}</div>
              </div>
              <div class="ya-box-state" :class="{ online: item.status === '在线' }">
                {{ item.status }}
              </div>
            </div>
          </ElScrollbar>
          <ya-empty v-else></ya-empty>
        </div>
      </div>
      <div class="ya-right">
        <div class="ya_title">探针流量趋势</div>
        <div class="ya_cot">
          <LineChart v-if="flowChartData.length" title="单位：Gbps" :chartData="flowChartData" :xAxisData="flowxAxisData" />
          <ya-empty v-else></ya-empty>
        </div>
      </div>
    </CommonCardVue>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import CircularDiagram from "../../components/chart/CircularDiagram/CircularDiagram.vue";
import CommonCardVue from "../../components/CommonCard/CommonCard.vue";
import LineChart from "../../components/chart/LineChart/LineChart.vue";
import {
  getQueryStyletStatusDistribution,
  getQueryToDayFlowTrend,
  getQueryStyletList,
  getQueryStyletFlowTrend,
} from "../../api/permission/probeManagement";
const lineChartData = ref([
  // {
  //   data: [
  //     0, 1, 1, 0, 1, 1, 3, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0,
  //   ],
  //   name: "总流量",
  // },
]) as any;
const linexAxisData = ref([
  // "01:00",
  // "01:00",
  // "01:00",
  // "01:00",
  // "01:00",
  // "01:00",
  // "01:00",
  // "01:00",
  // "01:00",
  // "01:00",
  // "01:00",
  // "01:00",
]) as any;
const chartData = ref([
  // { name: "在线", value: 200 },
  // { name: "离线", value: 502 },
]);
const flowChartData = ref([]);
const flowxAxisData = ref([]);

const current = ref(0);

const list = ref([
  // { styletName: "探针名称", ip: "129.21.222.222", status: "离线" },
  // { styletName: "探针名称", ip: "129.21.222.222", status: "在线" },
]);

// 选中列表
const handleChoose = (i) => {
  current.value = i;
  getStyletFlowTrend(list.value[i].ip);
};

// 探针流量趋势
const getStyletFlowTrend = (ip) => {
  getQueryStyletFlowTrend({ ip })
    .then((res: any) => {
      const { code, data } = res || {};
      if (code === 200 && data) {
        const flowSum = data.flowSum.split(",");
        const time = data.time.split(",");
        flowChartData.value = [
          {
            name: data.name,
            data: flowSum,
          },
        ];
        flowxAxisData.value = time;
      } else {
        flowChartData.value = [];
      }
    })
    .catch(() => {
      flowChartData.value = [];
    });
};

// 初始化数据
const initData = () => {
  // 探针状态分布
  getQueryStyletStatusDistribution().then((res: any) => {
    const { code, data } = res || {};
    if (code === 200 && data) {
      data.forEach((item) => {
        chartData.value.push({
          name: item.status,
          value: item.count,
        });
      });
    }
  });
  // 今日总流量趋势
  getQueryToDayFlowTrend().then((res: any) => {
    const { code, data } = res || {};
    if (code === 200 && data) {
      const flowSum = data.flowSum.split(",");
      const time = data.time.split(",");
      lineChartData.value = [
        {
          name: data.name,
          data: flowSum,
        },
      ];
      linexAxisData.value = time;
    }
  });

  // 获取探针列表
  getQueryStyletList().then((res: any) => {
    const { code, data } = res || {};
    if (code === 200 && data) {
      // data.forEach((item) => {});
      if (data && data.rows) {
        list.value = data.rows;
        if (list.value.length) {
          getStyletFlowTrend(list.value[0].ip);
        }
      }
    }
  });
};

onMounted(() => {
  initData();
});
</script>

<style lang="scss">
.probeManagement {
  .custom-circle-legend-one {
    padding: 0 25px;
    box-sizing: border-box;
  }
}
</style>
<style lang="scss" scoped>
.probeManagement {
  display: flex;
  flex-direction: column;

  .ya-top {
    display: flex;
    height: 330px;
    padding-bottom: 30px;
    box-sizing: border-box;

    .ya-today-flow {
      flex: 1;
    }
  }

  .ya-content {
    flex: 1;
    min-height: 400px;
    background: none;

    :deep .title-center {
      display: flex;
      height: 100%;
    }

    .ya_title {
      font-size: 18px;
      padding-bottom: 10px;
      font-family: YouSheBiaoTiHei;
      color: #1ad7ff;
      line-height: 23px;
      text-shadow: 0px 0px 7px rgba(5, 252, 255, 0.64);
      background: linear-gradient(180deg, #ffffff 0%, #1ad7ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .ya-left {
      width: 430px;
      margin-right: 24px;
      display: flex;
      flex-direction: column;

      .ya_content {
        flex: 1;
        overflow: auto;
      }

      .ya-box {
        border: 1px solid;
        padding: 16px;
        display: flex;
        align-items: center;
        margin-bottom: 16px;

        &:nth-last-child(1) {
          margin-bottom: 0;
        }

        .ya-box-icon {
          margin-right: 8px;
          padding: 0;
        }

        .ya-box-cot {
          flex: 1;
          font-size: 14px;

          // div {
          //   line-height: 1;
          // }
          .ya_name {
            font-size: 16px;
            font-weight: bold;
            padding-bottom: 3px;
          }
        }

        .ya-box-state {
          background-color: #59718a;
          border-radius: 2px;
          font-size: 14px;
          padding: 1px 9px;
          color: #ffffff;

          &.online {
            background-color: #8bc17c;
          }
        }
      }
    }

    .ya-right {
      flex: 1;
      display: flex;
      flex-direction: column;

      .ya_cot {
        flex: 1;
      }
    }
  }
}
</style>
