<script setup lang="ts">
import { ref, defineProps } 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["各次传播中各协议及协议占比"] || [];
tableData2.value = props.data["传播次数最多恶意代码文件TOP10"] || [];
const column1 = [
  {
    minWidth: "120px",
    label: "协议",
    prop: "name",
    fixed: "left",
  },
  {
    prop: "num",
    label: "传播次数（次）",
  },
  {
    prop: "pre",
    label: "占比",
  },
];

// 扇形
const roseChartData1 = ref([]) as any;
roseChartData1.value = tableData1.value.map((item) => {
  return {
    name: item.name,
    value: item.num,
  };
});
const column2 = [
  {
    width: "80px",
    label: "排名",
    prop: "index",
    slotName: "sort",
  },
  {
    prop: "name",
    label: "文件MD5",
  },
  {
    prop: "num",
    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>

    <!-- 各次传播中各协议及协议占比 -->
    <div class="ya-content-table">
      <div class="ya_name ya-regular-text">各次传播中各协议及协议占比：</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="各次传播中各协议及协议占比" />
        </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>

    <!-- 传播次数最多的恶意代码文件排名TOP10 -->
    <div class="ya-content-table">
      <div class="ya_name ya-regular-text">
        传播次数最多的恶意代码文件排名TOP10：
      </div>
      <div class="ya_table">
        <ya-table :data="tableData2" theme="light" :column="column2">
          <template #sort="item">
            {{ item.index + 1 }}
          </template>
        </ya-table>
      </div>
    </div>
  </div>
</template>

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