<!--
 * @Author: changjun
 * @FilePath: /qingdao-safety-product/src/views/screen/components/HighFrequencyVulnerability.vue
 * @Date: 2022-07-27 14:09:59
 * @Description: 高频漏洞TOP10
 * @LastEditTime: 2022-07-28 16:27:10
 * @LastEditors: changjun
-->
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import ProgressBarItem from '../../../views/screen/components/ProgressBarItem.vue';
import ModuleEmpty from '../../../views/screen/components/ModuleEmpty.vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper';
import 'swiper/css';

const swiperModules = [Autoplay];

const autoplayProps = {
  delay: 4000,
  loop: false,
  disableOnInteraction: false,
  pauseOnMouseEnter: true
};

const list = ref([]) as any;
const listdata = ref([
  {
    name: '点击劫持漏洞',
    count: 1988,
    index: '1',
    color1: '#E67873',
    gress: 80
  },
  {
    name: 'SOL注入漏洞',
    count: 1724,
    index: '2',
    color1: '#FF9800',
    gress: 60
  },
  {
    name: '输入验证码错误漏洞',
    count: 1642,
    index: '3',
    color1: '#EAC018',
    gress: 40
  },
  {
    name: '缓冲区间错误漏洞',
    count: 1289,
    index: '4',
    color1: '#049BFB',
    gress: 35
  },
  {
    name: '竞争条件问题漏洞',
    count: 1588,
    index: '5',
    color1: '#049BFB',
    gress: 30
  }
]);

const listdata2 = ref([
  {
    name: 'OpenSSH 安全漏洞',
    count: 1988,
    index: '6',
    color1: '#E67873',
    gress: 60
  },
  {
    name: 'OpenSSH 授权问题漏洞',
    count: 1724,
    index: '7',
    color1: '#FF9800',
    gress: 50
  },
  {
    name: 'OpenSSH 操作系统命令注入漏洞',
    count: 1642,
    index: '8',
    color1: '#EAC018',
    gress: 45
  },
  {
    name: 'Linux 信息泄露漏洞',
    count: 1289,
    index: '9',
    color1: '#049BFB',
    gress: 35
  },
  {
    name: 'TCP/IP Protocol 堆栈不确定的远程拒绝服务漏洞',
    count: 1588,
    index: '10',
    color1: '#049BFB',
    gress: 30
  }
]);
const init = async () => {
  // const res = await fetchData('findHighLeak')
  const res = [
    { num: 2, name: 'test81' },
    { num: 2, name: 'test82' },
    { num: 2, name: 'test83' },
    { num: 2, name: 'test84' },
    { num: 2, name: 'test85' }
  ];
  const result = res || ([] as any);
  const total = result.reduce((total, item) => {
    return total + item.num;
  }, 0);
  list.value = result
    .map((item) => {
      // @ts-ignore
      item.percent = (item.num / total) * 100;
      return item;
    })
    .sort((a, b) => {
      return b.num - a.num;
    })
    .map((item, index) => {
      // @ts-ignore
      item.ranking = index + 1;
      return item;
    });
};

onMounted(() => {
  init();
});
</script>

<template>
  <div class="custom-block">
    <template v-if="listdata.length">
      <Swiper ref="mySwiper" class="screen-real-time-alarm" :modules="swiperModules" loop :autoplay="autoplayProps"
        :observer="true" :observe-parents="true">
        <SwiperSlide>
          <ProgressBarItem v-for="(item, index) in listdata" :key="index" :name="item.name" :value="item.count"
            :number="item.index" :percentage="item.gress"></ProgressBarItem>
        </SwiperSlide>
        <SwiperSlide>
          <ProgressBarItem v-for="(item, index) in listdata2" :key="index" :name="item.name" :value="item.count"
            :number="item.index" :percentage="item.gress"></ProgressBarItem>
        </SwiperSlide>
      </Swiper>
    </template>
    <ModuleEmpty v-else></ModuleEmpty>
  </div>
</template>


<style lang="scss" scoped>
.custom-block {
  width: 100%;
  color: #fff;
  height: 255px;
  padding-top: 20px;
  box-sizing: border-box;
}
</style>
