<template>
  <div class="image_bugs" v-if="data">
    <!-- 安全 -->
    <span class="image_bug">
      <el-tooltip placement="right-start" popper-class="image_bug_tooltip">
        <div slot="content">
          <div class="lower_title lower_title_01">
            <span class="lower_title_img lower_title_img_01"></span>
            漏洞严重程度：没有漏洞
          </div>
          <div style="padding:20px;">
            <div class="bugs_font01">没有发现可识别的漏洞包</div>
            <div class="bugs_font03">扫描完成时间：{{ time }}</div>
          </div>
        </div>
        <span class="bugs_label security" v-if="severity == 1">安全</span>
      </el-tooltip>
    </span>
    <!-- 未知 -->
    <span class="image_bug">
      <el-tooltip placement="right-start" popper-class="image_bug_tooltip">
        <div slot="content">
          <div class="lower_title lower_title_02">
            <span class="lower_title_img lower_title_img_02"></span>
            漏洞严重程度：未知
          </div>
          <div style="padding:20px;">
            <div class="bugs_font01">
              {{ components.total }}
              个组件中
              {{ components.severity_count }}
              个含有漏洞
            </div>
            <div v-for="(s, index) in components.summary" :key="index">
              <div class="bugs_font02" v-if="s.severity == 2">
                <span class="unknown_img"></span>
                未知 ：{{ s.count }}个
              </div>
              <div class="bugs_font02" v-if="s.severity == 1">
                <span class="wu_img"></span>
                无：{{ s.count }}个
              </div>
            </div>
            <div class="bugs_font03">扫描完成时间：{{ time }}</div>
          </div>
        </div>
        <span class="bugs_label unknown" v-if="severity == 2">未知</span>
      </el-tooltip>
    </span>
    <!-- 较低 -->
    <span class="image_bug">
      <el-tooltip placement="right-start" popper-class="image_bug_tooltip">
        <div slot="content">
          <div class="lower_title lower_title_03">
            <span class="lower_title_img lower_title_img_03"></span>
            漏洞严重程度：较低
          </div>
          <div style="padding:20px;">
            <div class="bugs_font01">
              {{ components.total }}
              个组件中
              {{ components.severity_count }}
              个含有漏洞
            </div>
            <div v-for="(s, index) in components.summary" :key="index">
              <div class="bugs_font02" v-if="s.severity == 3">
                <span class="warning"></span>
                较低：{{ s.count }}个
              </div>
              <div class="bugs_font02" v-if="s.severity == 2">
                <span class="unknown_img"></span>
                未知：{{ s.count }}个
              </div>
              <div class="bugs_font02" v-if="s.severity == 1">
                <span class="wu_img"></span>
                无：{{ s.count }}个
              </div>
            </div>
            <div class="bugs_font03">扫描完成时间：{{ time }}</div>
          </div>
        </div>
        <span class="bugs_label lower" v-if="severity == 3">较低</span>
      </el-tooltip>
    </span>
    <!-- 中等 -->
    <span class="image_bug">
      <el-tooltip placement="right-start" popper-class="image_bug_tooltip">
        <div slot="content">
          <div class="lower_title lower_title_04">
            <span class="lower_title_img lower_title_img_04"></span>
            漏洞严重程度：中等
          </div>
          <div style="padding:20px;">
            <div class="bugs_font01">
              {{ components.total }}
              个组件中
              {{ components.severity_count }}
              个含有漏洞
            </div>
            <div v-for="(s, index) in components.summary" :key="index">
              <div class="bugs_font02" v-if="s.severity == 4">
                <span class="medium_img"></span>
                中等：{{ s.count }}个
              </div>
              <div class="bugs_font02" v-if="s.severity == 3">
                <span class="warning"></span>
                较低：{{ s.count }}个
              </div>
              <div class="bugs_font02" v-if="s.severity == 2">
                <span class="unknown_img"></span>
                未知：{{ s.count }}个
              </div>
              <div class="bugs_font02" v-if="s.severity == 1">
                <span class="wu_img"></span>
                无：{{ s.count }}个
              </div>
            </div>
            <div class="bugs_font03">扫描完成时间：{{ time }}</div>
          </div>
        </div>
        <span class="bugs_label medium" v-if="severity == 4">中等</span>
      </el-tooltip>
    </span>
    <!-- 严重 -->
    <span class="image_bug">
      <el-tooltip placement="right-start" popper-class="image_bug_tooltip">
        <div slot="content">
          <div class="lower_title lower_title_05">
            <span class="lower_title_img lower_title_img_05"></span>
            漏洞严重程度：严重
          </div>
          <div style="padding:20px;">
            <div class="bugs_font01">
              {{ components.total }}
              个组件中
              {{ components.severity_count }}
              个含有漏洞
            </div>
            <div v-for="(s, index) in components.summary" :key="index">
              <div class="bugs_font02" v-if="s.severity == 5">
                <span class="seriousness_img"></span>
                严重：{{ s.count }}个
              </div>
              <div class="bugs_font02" v-if="s.severity == 4">
                <span class="medium_img"></span>
                中等：{{ s.count }}个
              </div>
              <div class="bugs_font02" v-if="s.severity == 3">
                <span class="warning"></span>
                较低：{{ s.count }}个
              </div>
              <div class="bugs_font02" v-if="s.severity == 2">
                <span class="unknown_img"></span>
                未知：{{ s.count }}个
              </div>
              <div class="bugs_font02" v-if="s.severity == 1">
                <span class="wu_img"></span>
                无：{{ s.count }}个
              </div>
            </div>
            <div class="bugs_font03">扫描完成时间：{{ time }}</div>
          </div>
        </div>
        <span class="bugs_label seriousness" v-if="severity == 5">严重</span>
      </el-tooltip>
    </span>
  </div>
</template>

<script>
import helper from "@/services/helper";

export default {
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
  computed: {
    severity: function() {
      return this.data.severity;
    },
    time: function() {
      return helper.dateFormat("YYYY-mm-dd HH:MM:SS", this.data.update_time);
    },
    components: function() {
      return this.data.components;
    },
  },
};
</script>

<style>
.image_bugs {
  display: inline-block;
}
.bugs_label {
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 12px;
}
.security {
  background-color: #dde4ff;
  border: solid 1px #9cb5f8;
  color: #315efc;
}
.unknown {
  background-color: #f4f7fc;
  border: solid 1px #bcc1d0;
  color: #58617a;
}
.lower {
  background-color: #fff8dd;
  border: solid 1px #f2d065;
  color: #e79e00;
}
.medium {
  background-color: #fff2e2;
  border: solid 1px #ffc29a;
  color: #ff7200;
}
.seriousness {
  background-color: #ffebeb;
  border: solid 1px #f2a6a6;
  color: #da4251;
}
.bug_scaning {
  background-color: #dde4ff;
  color: #315efc;
  margin-left: 27px;
  padding: 3px 5px;
}
.image_bug_tooltip {
  background: #1a2236 !important;
  color: #f4f7fc !important;
  border-radius: 10px !important;
  padding: 0px !important;
}
.lower_title {
  height: 55px;
  width: 242px;
  background-color: #242c43;
  border-radius: 12px 12px 0px 0px;
  border-bottom: 1px solid #3f4864;
  text-align: left;
  line-height: 55px;
  vertical-align: middle;
  font-size: 16px;
  padding: 0px 20px;
}
.lower_title_img {
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}
.bug_scaning_img {
  width: 12px;
  height: 12px;
  display: inline-block;
  vertical-align: middle;
  background: url("../assets/imgs/ic_loading.png") right center no-repeat;
}
.lower_title_01 {
  color: #5c82ff;
}
.lower_title_img_01 {
  background: url("../assets/imgs/ld_ic_spot_blue.png") center center no-repeat;
}
.lower_title_02 {
  color: #bcc1d0;
}
.lower_title_img_02 {
  background: url("../assets/imgs/ld_ic_spot_grey.png") center center no-repeat;
}
.lower_title_03 {
  color: #e79e00;
}
.lower_title_img_03 {
  background: url("../assets/imgs/ld_ic_spot_yellow.png") center center
    no-repeat;
}
.lower_title_04 {
  color: #ff7200;
}
.lower_title_img_04 {
  background: url("../assets/imgs/ld_ic_spot_orange.png") center center
    no-repeat;
}
.lower_title_05 {
  color: #da4251;
}
.lower_title_img_05 {
  background: url("../assets/imgs/ld_ic_spot_red.png") center center no-repeat;
}
.el-tooltip__popper[x-placement^="right-start"] .popper__arrow {
  border-right-color: #1a2236;
  margin-top: 1px;
}
.el-tooltip__popper[x-placement^="right-start"] .popper__arrow:after {
  border-right-color: #1a2236;
  margin-top: 1px;
}
.warning {
  width: 15px;
  height: 15px;
  display: inline-block;
  background: url("../assets/imgs/ld_l_ic_low.png") center center no-repeat;
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 50%;
}
.bugs_font01 {
  color: #bcc1d0;
  font-size: 14px;
  padding-bottom: 10px;
}
.bugs_font02 {
  color: #f4f7fc;
  font-size: 14px;
  padding: 5px 0;
}
.bugs_font03 {
  color: #bcc1d0;
  font-size: 12px;
  padding: 12px 0 0 0;
}
.seriousness_img {
  width: 15px;
  height: 15px;
  display: inline-block;
  background: url("../assets/imgs/ld_l_ic_high.png") center center no-repeat;
  margin-right: 10px;
  vertical-align: middle;
}
.medium_img {
  width: 15px;
  height: 15px;
  display: inline-block;
  background: url("../assets/imgs/ld_l_ic_medium.png") center center no-repeat;
  margin-right: 10px;
  vertical-align: middle;
}
.wu_img {
  width: 15px;
  height: 15px;
  display: inline-block;
  background: url("../assets/imgs/ld_ic_safe.png") center center no-repeat;
  margin-right: 10px;
  vertical-align: middle;
}
.unknown_img {
  width: 15px;
  height: 15px;
  display: inline-block;
  background: url("../assets/imgs/ld_l_ic_unknown.png") center center no-repeat;
  margin-right: 10px;
  vertical-align: middle;
}
</style>
