<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["网站访问量TOP10"] || [];
tableData2.value = props.data["被攻击网站次数TOP10"] || [];
tableData3.value = props.data["恶意网站被访问次数TOP10"] || [];
const column1 = [
  {
    width: "80px",
    label: "排名",
    prop: "index",
    fixed: "left",
    slotName: "sort",
  },
  {
    prop: "name",
    label: "网站名称",
  },
  {
    prop: "num",
    label: "被访问次数（次）",
  },
];

const column2 = [
  {
    width: "80px",
    label: "排名",
    prop: "index",
    fixed: "left",
    slotName: "sort",
  },
  {
    prop: "name",
    label: "网站名称",
  },
  {
    prop: "attacked_domain",
    label: "被攻击域名",
  },
  {
    prop: "event_name",
    label: "事件类型",
  },
  {
    prop: "num",
    width: "180px",
    label: "被攻击次数（次）",
  },
];

const column3 = [
  {
    width: "80px",
    label: "排名",
    prop: "index",
    fixed: "left",
    slotName: "sort",
  },
  {
    prop: "name",
    label: "网站URL",
  },
  {
    prop: "ip",
    label: "网站IP",
  },
  {
    prop: "location",
    label: "网站位置",
  },
  {
    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>
    <!-- 网站访问量TOP10 -->
    <div class="ya-content-table">
      <div class="ya_name ya-regular-text">网站访问量TOP10：</div>
      <div class="ya_table">
        <ya-table :data="tableData1" theme="light" :column="column1">
          <template #sort="item">
            {{ item.index + 1 }}
          </template>
        </ya-table>
      </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>

    <!-- 恶意网站被访问次数TOP10 -->
    <div class="ya-content-table">
      <div class="ya_name ya-regular-text">恶意网站被访问次数TOP10：</div>
      <div class="ya_table">
        <ya-table :data="tableData3" theme="light" :column="column3">
          <template #sort="item">
            {{ item.index + 1 }}
          </template>
        </ya-table>
      </div>
    </div>
  </div>
</template>

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