<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2023-09-18 10:34:41
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-09-19 09:40:30
 * @FilePath: \yuan-asset-module-browser\src\views\riskDetection\riskIdentification\addTask.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="yaBox">
    <div class="ya-block">
      <div class="ya-title">任务类型</div>
      <div class="ya-items">
        <div class="ya-item" v-for="item in taskType" :key="item.key"  @click="handlerAddTask(item)">
          <img v-if="item.是否购买 == '未购买'" :src="item.img" alt="" />
          <img v-else :src="item.buyImg" alt=""/>
          <div class="ya-right">
            <div class="ya-text">{{ item.title || '-' }}</div>
            <div class="ya-state" :class="{ 'ya-buy': item.是否购买 == '未购买' }">
              {{ item.是否购买 || '-' }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ya-block" style="margin-top: 12px">
      <div class="ya-title">基本信息</div>
      <div class="ya-items">
        <div class="ya-item" v-for="item in baseInfo" :key="item.key"  @click="handlerAddTask(item)">
          <img v-if="item.是否购买 == '未购买'"  :src="item.img" alt="" />
          <img v-else :src="item.buyImg" alt="" />
          <div class="ya-right">
            <div class="ya-text">{{ item.title || '-' }}</div>
            <div class="ya-state" :class="{ 'ya-buy': item.是否购买 == '未购买' }">
              {{ item.是否购买 || '-' }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import hostBuyImg from '../../../assets/image/icon-host-buy.png'
import hostImg from '../../../assets/image/icon-host.png'
import webBuyImg from '../../../assets/image/icon-web-buy.png'
import webImg from '../../../assets/image/icon-web.png'
import assetsBuyImg from '../../../assets/image/icon-assets-buy.png'
import assetsImg from '../../../assets/image/icon-assets.png'
import weakBuyImg from '../../../assets/image/icon-weak-buy.png'
import weakImg from '../../../assets/image/icon-weak.png'
import baselineBuyImg from '../../../assets/image/icon-baseline-buy.png'
import baselineImg from '../../../assets/image/icon-baseline.png'
import pocBuyImg from '../../../assets/image/icon-poc-buy.png'
import pocImg from '../../../assets/image/icon-poc.png'
import { useRouter } from 'vue-router';
const router=useRouter()
//任务类型
const taskType = ref([
  {
    key: '主机',
    buyImg: hostBuyImg,
    img:hostImg,
    title: '主机漏洞扫描',
    是否购买: '已购买',
    router:'hostScan'
  },
  {
    key: 'WEB',
    buyImg: webBuyImg,
    img:webImg,
    title: 'WEB漏洞扫描',
    是否购买: '已购买',
    router:'webScan'
  },
  {
    key: '弱口令',
    buyImg: weakBuyImg,
    img:weakImg,
    title: '弱口令扫描',
    是否购买: '已购买',
    router:'weakPWScan'
  },
  {
    key: '资产扫描',
    buyImg: assetsBuyImg,
    img:assetsImg,
    title: '异常资产扫描',
    是否购买: '未购买',
    router:'assetsScan'
  },
  // {
  //   key: '基线扫描',
  //   buyImg: baselineBuyImg,
  //   img:baselineImg,
  //   title: '基线扫描',
  //   是否购买: '已购买',
  // },
]);
//基本信息
const baseInfo = ref([
  {
    key: 'POC',
    buyImg: pocBuyImg,
    img:pocImg,
    title: 'PoC漏洞扫描',
    是否购买: '已购买',
    router:'pocScan'
  },
]);

//每块的点击事件
const handlerAddTask=(data)=>{
  data.是否购买=='已购买'&&router.push('/riskDetect/riskIdentify/addTask/'+data.router)
}
onMounted(()=>{

})
</script>
<style scoped lang="scss">
.yaBox {
  padding: 16px;
  box-sizing: border-box;
  .ya-block {
    .ya-title {
      font-size: 16px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.8);
      line-height: 22px;
      position: relative;
      padding-left: 8px;
      margin-bottom: 16px;
      &::before {
        content: '';
        display: block;
        width: 3px;
        height: 14px;
        background: var(--el-color-primary);
        position: absolute;
        left: 0;
        top: 3px;
      }
    }
    .ya-items {
      display: flex;
      flex-wrap: wrap;
      .ya-item {
        //宽度样式待修改
        min-width: 199px;
        flex: 1;
        max-width: calc(20% - 32px);
        display: flex;
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding: 32px 0px 32px 32px;
        margin-bottom: 12px!important;
        &:nth-child(n + 2) {
          margin-left: 16px;
          margin-right: 8px;
        }
        &:nth-child(n + 3) {
          margin: 0px 8px;
        }
        &:nth-child(n + 4) {
          margin-left: 8px;
          margin-right: 16px;
        }
        &:nth-child(n + 5) {
          margin: 0px;
        }
        img {
          width: 32px;
          height: 30px;
          margin-right: 16px;
        }
        .ya-right {
          .ya-text {
            font-weight: 500;
            color: #333333;
            line-height: 20px;
          }
          .ya-state {
            color: #999999;
            line-height: 20px;
            margin-top: 8px;
          }
          .ya-buy {
            color: rgba(0, 0, 0, 0.4);
          }
        }
      }
    }
  }
}
</style>
