<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2022-11-02 19:39:01
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-02-20 16:21:49
 * @FilePath: \yuan-huoling-browser\src\views\digitalAssets\assetRisk\hostVulnerability\detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="yaBox">
    <div class="yaHeader">
      <div class="ya-title">
        <img src="../../../../assets/imgs/name.png" alt="" />
        <span
          >漏洞名称: {{ obj.name || "-" }} &nbsp;&nbsp; &nbsp;&nbsp;漏洞来源:
          {{ obj.sourceStr || "-" }}</span
        >
      </div>
    </div>
    <div class="yaContent">
      <div class="ya-title">
        <img src="../../../../assets/imgs/icon.png" alt="" /><span>概述</span>
      </div>
      <div class="ya-content">
        <el-row class="ya-row">
          <el-col :span="24" class="ya-col"
            ><div class="ya-col-left">漏洞等级</div>
            <div class="ya-col-right">
              {{ obj.levelStr || obj.riskLevelStr || "-" }}
            </div></el-col
          >
          <el-col :span="24" class="ya-col"
            ><div class="ya-col-left">漏洞细节</div>
            <div class="ya-col-right">
              {{ obj.detail || obj.riskDetail || "-" }}
            </div></el-col
          >
          <el-col :span="24" class="ya-col"
            ><div class="ya-col-left">漏洞描述</div>
            <div class="ya-col-right">{{ obj.description || "-" }}</div></el-col
          >
          <el-col :span="24" class="ya-col"
            ><div class="ya-col-left">漏洞影响</div>
            <div class="ya-col-right">{{ obj.influence || "-" }}</div></el-col
          >
          <el-col :span="24" class="ya-col"
            ><div class="ya-col-left">解决方案</div>
            <div class="ya-col-right">
              {{ obj.repairAdvice || "-" }}
            </div></el-col
          >
          <el-col :span="24" class="ya-col"
            ><div class="ya-col-left">漏洞cvss分值(主机漏洞)</div>
            <div class="ya-col-right">{{ obj.cvss || "-" }}</div></el-col
          >
          <el-col :span="24" class="ya-col"
            ><div class="ya-col-left">漏洞标识(CVE/CNVD)</div>
            <div class="ya-col-right">{{ obj.flag || "-" }}</div></el-col
          >
          <el-col :span="24" class="ya-col"
            ><div class="ya-col-left">漏洞分类(主机漏洞）</div>
            <div class="ya-col-right">
              {{ obj.classification || "-" }}
            </div></el-col
          >
          <el-col :span="24" class="ya-col"
            ><div class="ya-col-left">相关端口(主机漏洞）</div>
            <div class="ya-col-right">{{ obj.port || "-" }}</div></el-col
          >
          <el-col :span="24" class="ya-col"
            ><div class="ya-col-left">关联资产</div>
            <div class="ya-col-right">{{ obj.asset || "-" }}</div></el-col
          >
          <el-col :span="24" class="ya-col"
            ><div class="ya-col-left">处理状态</div>
            <div class="ya-col-right">
              {{ obj.handleStatusStr || "-" }}
            </div></el-col
          >
        </el-row>
      </div>
    </div>
    <div class="yaFooter">
      <div class="yaFooter-top">
        <img src="../../../../assets/imgs/icon.png" alt="" /><span>风险描述</span>
      </div>
      <div class="yaFooter-bottom">{{ obj.description || "暂无数据" }}</div>
    </div>
    <div class="yaFooter">
      <div class="yaFooter-top">
        <img src="../../../../assets/imgs/icon.png" alt="" /><span>风险危害</span>
      </div>
      <div class="yaFooter-bottom">{{ obj.influence || "暂无数据" }}</div>
    </div>
    <div class="yaFooter">
      <div class="yaFooter-top">
        <img src="../../../../assets/imgs/icon.png" alt="" /><span>风险详情</span>
      </div>
      <div class="yaFooter-bottom">{{ obj.detail || "暂无数据" }}</div>
    </div>
    <div class="yaFooter">
      <div class="yaFooter-top">
        <img src="../../../../assets/imgs/icon.png" alt="" /><span>恢复建议</span>
      </div>
      <div class="yaFooter-bottom">{{ obj.repairAdvice || "暂无数据" }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted } from "vue";
const router = useRouter();
const route = useRoute();
const obj: any = ref({});
onMounted(() => {
  obj.value = JSON.parse(localStorage.getItem("YA_VUL_DATA") as string) || {};
});
</script>
<style lang="scss" scoped>
.yaBox {
  overflow: auto;
  background-color: #f3f5f6;
  .yaHeader {
    padding: 23px 25px;
    background: #ffffff;
    border-radius: 4px;
    .ya-title {
      height: 66px;
      line-height: 66px;
      background: #fff5ea;
      img {
        width: 17px;
        height: 18px;
        vertical-align: middle;
        padding-left: 19px;
        padding-right: 9px;
      }
      span {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #545555;
      }
    }
  }
  .yaContent {
    background: #ffffff;
    border-radius: 4px;
    margin-top: 30px;
    .ya-title {
      height: 69px;
      line-height: 69px;
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      img {
        width: 20px;
        height: 20px;
        margin-left: 23px;
        margin-right: 13px;
        vertical-align: middle;
      }
    }
    .ya-content {
      padding: 0px 23px 23px 23px;
      .ya-row {
        width: 100%;
        border: 1px solid #d1dae2;
        border-bottom: none;
        border-radius: 2px;
        .ya-col {
          width: 100%;
          border-bottom: 1px solid #d1dae2;
          display: flex;
          align-items: center;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 22px;

          .ya-col-left {
            width: 12.5%;
            height: 100%;
            background: #fafbfc;
            border-right: 1px solid #d1dae2;
            color: #677b8e;
            padding: 9px 0px 9px 25px;
            box-sizing: border-box;
          }
          .ya-col-right {
            flex: 1;
            padding: 9px 0px 9px 27px;
            box-sizing: border-box;
            color: #333333;
          }
        }
      }
    }
  }
  .yaFooter {
    width: 100%;
    background: #ffffff;
    border-radius: 4px;
    margin-top: 30px;
    .yaFooter-top {
      padding: 25px 0px 12px 23px;
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-right: 13px;
      }
    }
    .yaFooter-bottom {
      padding: 12px 0px 24px 32px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #545555;
      line-height: 30px;
    }
  }
}
</style>
