<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;
tableData1.value = props.data["各地域受到的DDoS攻击流量及流量占比"] || [];
tableData2.value = props.data["各DDoS攻击中各协议流量及流量占比"] || [];
const roseChartData1 = ref([]) as any;
const roseChartData2 = ref([]) as any;
const column1 = [
  {
    width: "140px",
    label: "地域",
    prop: "name",
    fixed: "left",
  },
  {
    prop: "num",
    label: "攻击流量（GB）",
  },
  {
    prop: "pre",
    label: "流量占比",
  },
];

const column2 = [
  {
    width: "120px",
    label: "协议",
    prop: "name",
    fixed: "left",
  },
  {
    prop: "num",
    label: "攻击流量（GB）",
  },
  {
    prop: "pre",
    label: "流量占比",
  },
];
roseChartData1.value = tableData1.value.map((item) => {
  return {
    name: item.name,
    value: item.num,
  };
});
roseChartData2.value = tableData2.value.map((item) => {
  return {
    name: item.name,
    value: item.num,
  };
});
</script>

<template>
  <div>
    <!-- DDos攻击事件： -->
    <div class="ya-content-title ya-fill-color">
      <span class="ya_title ya-primary-text">
        <img :src="pdfTitleIcon" alt="" />
        <span>DDos攻击事件：</span>
      </span>
    </div>

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

    <!-- 各DDoS攻击中各协议流量及流量占比 -->
    <div class="ya-content-table">
      <div class="ya_name ya-regular-text">
        各DDoS攻击中各协议流量及流量占比：
      </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="各DDoS攻击中各协议流量及流量占比" />
        </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>
  </div>
</template>

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