<script setup lang="ts">
import { ref, defineProps, nextTick } from 'vue'
import RoseChart from "../../../../components/chart/RoseChart/RoseChart.vue";
import pdfTitleIcon from "../../../../assets/image/report/pdf-title-icon.png";
interface yaProps {
  data: object;
}
const props = defineProps<yaProps>();
// 表格
const tableData1 = ref([]) as any;
const tableData2 = ref([]) as any;
const tableData3 = ref([]) as any;
tableData1.value = props.data["网络通信端口异常IpTOP10"] || [];
tableData2.value = props.data["地域流量占比"] || [];
const roseChartData2 = ref([]) as any;
roseChartData2.value = tableData2.value.map((item) => {
  return {
    name: item.name,
    value: item.num,
  };
});
tableData3.value = props.data["事件类型占比"];
const roseChartData3 = ref([]) as any;
roseChartData3.value = tableData3.value.map((item) => {
  return {
    name: item.name,
    value: item.num,
  };
});

const column1 = [
  {
    width: "80px",
    label: "排名",
    prop: "index",
    fixed: "left",
    slotName: "sort",
  },
  {
    prop: "name",
    label: "IP地址",
  },
  {
    prop: "num",
    label: "连接次数",
  },
];

const column2 = [
  {
    width: "80px",
    label: "排名",
    prop: "index",
    fixed: "left",
    slotName: "sort",
  },
  {
    prop: "name",
    label: "地域",
  },
  {
    prop: "num",
    label: "流量",
  },
  {
    prop: "pre",
    label: "占比",
  },
];

const column3 = [
  {
    width: "80px",
    label: "排名",
    prop: "index",
    fixed: "left",
    slotName: "sort",
  },
  {
    prop: "name",
    label: "事件类型名称",
  },
  {
    prop: "num",
    label: "个数",
  },
  {
    prop: "pre",
    label: "占比",
  },
];
</script>

<template>
  <div>
    <!-- 异常通信行为 -->
    <div class="ya-content-title ya-fill-color">
      <span class="ya_title ya-primary-text">
        <img :src="pdfTitleIcon" alt="" />
        <span>异常通信行为：</span>
      </span>
    </div>
    <!-- 网络通信端口异常IPTOP10 -->
    <div class="ya-content-table">
      <div class="ya_name ya-regular-text">网络通信端口异常IPTOP10：</div>
      <div class="ya_table">
        <ya-table :data="tableData1" theme="light" :column="column1">
          <template #sort="item">
            {{ item.index + 1 }}
          </template>
        </ya-table>
      </div>
    </div>

    <!-- 地域流量占比 -->
    <div class="ya-content-table">
      <div class="ya_name ya-regular-text">地域流量占比：</div>
      <div class="ya-content-pie">
        <div v-if="roseChartData2.length" class="yj_left">
          <RoseChart :chartData="roseChartData2" :labelShow="false" :legendShow="false" :radius="['10%', '80%']"
            name="地域流量占比" />
        </div>
        <div class="yj_right">
          <ya-table :data="tableData2" theme="light" :column="column2">
            <template #sort="item">
              {{ item.index + 1 }}
            </template>
          </ya-table>
        </div>
      </div>
    </div>

    <!-- 网络流量异常事件类型TOP10占比 -->
    <div class="ya-content-table">
      <div class="ya_name ya-regular-text">网络流量异常事件类型TOP10占比：</div>
      <div class="ya-content-pie">
        <div v-if="roseChartData3.length" class="yj_left">
          <RoseChart :chartData="roseChartData3" :labelShow="false" :legendShow="false" :radius="['10%', '80%']"
            name="网络流量异常事件类型TOP10占比" />
        </div>
        <div class="yj_right">
          <ya-table :data="tableData3" theme="light" :column="column3">
            <template #sort="item">
              {{ item.index + 1 }}
            </template>
          </ya-table>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
