<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/components/RealTimeAlarm.vue
 * @Date: 2022-07-27 14:11:39
 * @Description: 实时告警组件
 * @LastEditTime: 2022-09-09 16:43:39
 * @LastEditors: changjun
-->
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import CustomTooltip from '../../../views/screen/components/CustomTooltip.vue'
import ModuleEmpty from '../../../views/screen/components/ModuleEmpty.vue'

import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper';
import 'swiper/css';
import { ICON_REAL_ICON } from '../constants'


const swiperModules = [Autoplay];

const autoplayProps = {
  delay: 1000,
  loop: false,
  disableOnInteraction: false,
  pauseOnMouseEnter: true
}
const mySwiper = ref();


const list = ref([]) as any

const showSwiper = computed(() => {
  return list.value.length > 1
})

const init = async () => {
  // const res = await fetchData('findRealtimeAlarm')
  const res = [
    { "level": "高危资产", "ip": "10.1.1.12", "name": "Genivia gSOAP 缓冲区错误漏洞", "time": "2022-07-21 14:22:12", "status": 1 },
    { "level": "中危资产", "ip": "10.1.1.12", "name": "OpenSSH 安全漏洞", "time": "2022-07-21 14:22:12", "status": 1 },
    { "level": "中危资产", "ip": "10.1.1.12", "name": "OpenSSH 授权问题漏洞", "time": "2022-07-21 14:22:12", "status": 1 },
    { "level": "中危资产", "ip": "10.1.1.12", "name": "OpenSSH 操作系统命令注入漏洞", "time": "2022-07-21 14:22:12", "status": 1 },
    { "level": "中危资产", "ip": "10.1.1.12", "name": "Linux 信息泄露漏洞", "time": "2022-07-21 14:22:12", "status": 3 },
    { "level": "低危资产", "ip": "10.1.1.12", "name": "Linux cp命令 重建符号链接攻击漏洞", "time": "2022-07-21 14:22:12", "status": 3 },
    { "level": "低危资产", "ip": "10.1.1.12", "name": "TCP/IP Protocol 堆栈不确定的远程拒绝服务漏洞", "time": "2022-07-21 14:22:12", "status": 4 },
    { "level": "高危资产", "ip": "10.1.1.12", "name": "Linux udev默认配置任意程序执行漏洞", "time": "2022-07-21 14:22:12", "status": 3 },
    { "level": "低危资产", "ip": "10.1.1.12", "name": "OpenSSH 安全漏洞", "time": "2022-07-21 14:22:12", "status": 1 },
    { "level": "低危资产", "ip": "10.1.1.12", "name": "OpenSSH 操作系统命令注入漏洞", "time": "2022-07-21 14:22:12", "status": 1 }
  ]
  list.value = res.map(item => {
    const _status = item.status
    const _level = item.level
    // @ts-ignore
    item.iconImg = ICON_REAL_ICON[_level]
    const _class = {
      低危资产: 'item-low',
      中危资产: 'item-middle',
      高危资产: 'item-high'
    }
    const _statusType = {
      0: '待下发',
      1: '待修复',
      2: '待复测',
      3: '已修复',
      4: '已忽略'
    }
    // @ts-ignore
    item.className = _class[_level]
    // @ts-ignore
    item.statusName = _statusType[String(_status)]
    return item
  })
}

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

<template>
  <div class="custom-block">
    <Swiper ref="mySwiper" class="screen-real-time-alarm" direction="vertical" :modules="swiperModules" :slidesPerView="3"
      loop :autoplay="autoplayProps" :space-between="10" :observer="true" :observe-parents="true" v-if="showSwiper">
      <SwiperSlide class="item" :class="item.className" v-for="(item, index) in list" :key="index">
        <div class="top">
          <img :src="item.iconImg" alt="" class="icon-img" />
          <div class="title">
            <CustomTooltip :text="item.name"></CustomTooltip>
          </div>
        </div>
        <div class="bottom">
          <div class="type-name">{{ item.statusName }}</div>
          <div class="ip-name">{{ item.ip }}</div>
          <div class="time">{{ item.time }}</div>
        </div>
      </SwiperSlide>
    </Swiper>
    <ModuleEmpty v-else></ModuleEmpty>
  </div>
</template>


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

<style lang="scss">
.screen-real-time-alarm {
  width: 100%;
  display: flex;
  height: 300px;

  .item {
    width: 100%;
    height: 94px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;

    .top {
      display: flex;

      .icon-img {
        width: 16px;
        height: 18px;
        flex-shrink: 0;
        margin-right: 5px;
      }

      .title {
        width: 100%;
        padding-right: 20px;
        box-sizing: border-box;
        cursor: pointer;
        font-size: 14px;
        font-family: 'MicrosoftYaHei';
        font-weight: bold;
        color: #ffffff;
      }
    }

    .bottom {
      display: flex;
      font-weight: 400;
      font-size: 13px;
      font-family: 'MicrosoftYaHei';
      color: #ffffff;
      margin-top: 20px;
      justify-content: space-between;

      .type-name {
        font-size: 13px;
        font-weight: 400;
      }
    }
  }

  .item-high {
    width: 100%;
    height: 94px;
    background: url('../../../assets/image/vulHigh.png') no-repeat !important;
    background-size: 100% !important;
  }

  .item-middle {
    width: 100%;
    height: 94px;
    background: url('../../../assets/image/vulMiddle.png') no-repeat !important;
    background-size: 100% !important;
  }

  .item-low {
    width: 100%;
    height: 94px;
    background: url('../../../assets/image/vulLow.png') no-repeat !important;
    background-size: 100% !important;
  }
}
</style>
