<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 tableData = ref([]) as any;
const tableData1 = ref([]) as any;
const tableData2 = ref([]) as any;
const tableData3 = ref([]) as any;
const tableData4 = ref([]) as any;
tableData1.value = props.data["域名访问TOP10"] || [];
tableData2.value = props.data["被篡改的数量比例"] || [];
tableData3.value = props.data["恶意域名访问TOP5"] || [];
tableData4.value = props.data["恶意域名类型TOP5"] || [];

const column = [
  {
    width: "80px",
    label: "排名",
    prop: "index",
    fixed: "left",
    slotName: "sort",
  },
  {
    prop: "name",
    label: "域名",
  },
  {
    prop: "num",
    label: "被访问次数（次）",
  },
];
const column1 = [
  {
    minWidth: "120px",
    label: "类型名称",
    prop: "name",
  },
  {
    prop: "num",
    label: "数量",
  },
  {
    prop: "pre",
    label: "占比",
  },
];
const column3 = [
  {
    width: "80px",
    label: "排名",
    prop: "index",
    slotName: "sort",
  },
  {
    prop: "name",
    label: "恶意域名",
  },
  {
    prop: "num",
    label: "被访问次数（次）",
  },
];

// demo数据不对
const column4 = [
  {
    width: "80px",
    label: "排名",
    prop: "index",
    slotName: "sort",
  },
  {
    prop: "name",
    label: "恶意类型",
  },
  {
    prop: "num",
    label: "被访问次数（次）",
  },
  {
    prop: "pre",
    label: "占比",
  },
];

const roseChartData1 = ref([]) as any;
roseChartData1.value = tableData2.value.map((item) => {
  return {
    name: item.name,
    value: item.num,
  };
});

const roseChartData4 = ref([]) as any;
roseChartData4.value = tableData4.value.map((item) => {
  return {
    name: item.name,
    value: item.num,
  };
});
</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="column">
          <template #sort="item">
            {{ item.index + 1 }}
          </template>
        </ya-table>
      </div>
    </div>

    <!-- 被篡改域名比例： -->
    <!-- <div class="ya-content-table">
      <div class="ya_name">被篡改域名比例：</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="tableData2" theme="light" :column="column1">
            <template #sort="item">
              {{ item.index + 1 }}
            </template>
          </ya-table>
        </div>
      </div>
    </div> -->

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

    <!-- 恶意域名类型TOP5： -->
    <div class="ya-content-table">
      <div class="ya_name ya-regular-text">恶意域名类型TOP5：</div>
      <div class="ya-content-pie">
        <div v-if="roseChartData4.length" class="yj_left">
          <RoseChart :chartData="roseChartData4" :labelShow="false" :legendShow="false" :radius="['10%', '80%']"
            name="恶意域名类型TOP5" />
        </div>
        <div class="yj_right">
          <ya-table :data="tableData4" theme="light" :column="column4">
            <template #sort="item">
              {{ item.index + 1 }}
            </template>
          </ya-table>
        </div>
      </div>
    </div>
  </div>
</template>

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