<script setup lang="ts">
import { ref } from 'vue'
import CommonCard from '../CommonCard.vue';

const list = ref([
  {
    title: 'IOBit IOTransfer 远程代备份',
    level: 'high',
    levelText: '高危',
    desc: 'IOBit IOTransfer 是1oBit公司的一个易子使用的iOs文件传输工具，它可以将文件远程备份到云端，并且可以在云端进行恢复。',
    tags: [
      { name: 'EXP公开', type: 'waring' },
      { name: '影响万级', type: 'success' },
      { name: 'POC公开', type: 'default' },
      { name: '关键漏洞', type: 'error' }
    ],
    vulNumber: 'CVE-2022-24562',
    updateTime: '2022-07-29 11:33'
  },
  {
    title: 'Codoforum远程代码执行漏洞',
    level: 'low',
    levelText: '低危',
    desc: '在CodoForum中存在文件上传漏洞,可以通过上传文件来执行本地命令。',
    tags: [
      { name: 'EXP公开', type: 'waring' },
      { name: '影响万级', type: 'success' },
      { name: '关键漏洞', type: 'error' }
    ],
    vulNumber: 'CVE-2022-24562',
    updateTime: '2022-07-29 11:33'
  },
  {
    title: 'Strapi 任意代码执行漏洞',
    level: 'high',
    levelText: '高危',
    desc: 'Strapi v.4.1.12的Add New Assets 功能中存在任意文件上传漏…',
    tags: [
      { name: '技术细节公开', type: 'waring' },
      { name: '影响万级', type: 'success' },
      { name: 'POC公开', type: 'default' },
      { name: '关键漏洞', type: 'error' }
    ],
    vulNumber: 'CVE-2022-24562',
    updateTime: '2022-07-29 11:33'
  },
  {
    title: 'IOBit IOTransfer 远程代备份',
    level: 'high',
    levelText: '高危',
    desc: 'IOBit IOTransfer 是1oBit公司的一个易子使用的iOs文件传输工具，它可以将文件远程备份到云端，并且可以在云端进行恢复。',
    tags: [
      { name: '影响万级', type: 'success' },
      { name: '关键漏洞', type: 'error' }
    ],
    vulNumber: 'CVE-2022-24562',
    updateTime: '2022-07-29 11:33'
  }
])

</script>

<template>
  <CommonCard title="最新漏洞" class="ptb-16">
    <div class="latese-vulnerability-box">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="title-box">
          <div class="title">{{ item.title }}</div>
          <div class="level-tag" :class="`level-tag-${item.level}`">{{ item.levelText }}</div>
        </div>

        <div class="desc">{{ item.desc }}</div>

        <div class="tag-list">
          <div class="tag tag-waring" v-for="(tag, index) in item.tags" :class="`tag-${tag.type}`">{{ tag.name }}</div>
        </div>

        <div class="botttom">
          <div class="left">漏洞编号{{ item.vulNumber }}</div>
          <div class="right-time">更新于{{ item.updateTime }}</div>
        </div>

      </div>
      <div class="find-more">查看更多 ></div>
    </div>
  </CommonCard>
</template>

<style lang="scss" scoped>
.latese-vulnerability-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 532px;

  .item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #EBEBEB;
    box-sizing: border-box;
    flex: 1;
    justify-content: center;

    .title-box {
      display: flex;
      align-items: center;

      .title {
        flex: 1;
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.6500);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
      }

      .level-tag {
        width: 52px;
        height: 24px;
        border-radius: 2px;
        font-size: 14px;
        font-weight: 400;
        flex-shrink: 0;
        margin-left: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .level-tag-high {
        background: rgba(217, 8, 8, 0.0800);
        color: #D90808;
      }

      .level-tag-low {
        background: rgba(37, 159, 47, 0.0800);
        color: #259F2F;
      }

      .level-tag-middle {
        background: rgba(241, 131, 1, 0.0800);
        color: #F18301;
      }
    }

    .desc {
      margin-top: 4px;
      font-size: 12px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.4000);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
    }

    .tag-list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 6px;

      .tag {
        padding: 0 8px;
        box-sizing: border-box;
        height: 20px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #45BCCA;
        font-size: 12px;
        font-weight: 400;
        color: #45BCCA;
      }

      .tag+.tag {
        margin-left: 8px;
      }

      .tag-waring {
        border-color: #FE7F09;
        color: #FE7F09;
      }

      .tag-success {
        border-color: #4E9B40;
        color: #4E9B40;
      }

      .tag-error {
        border-color: #E65857;
        color: #E65857;
      }
    }

    .botttom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.4000);
      margin-top: 8px;
    }


  }

  .item:nth-last-of-type(2) {
    border-bottom: none !important;
  }


  .find-more {
    font-size: 12px;
    font-weight: 400;
    color: #467FEA;
    cursor: pointer;
  }
}

.ptb-16 {
  padding: 16px 24px;
}
</style>
