<template>
  <d-layout class="dlayout">
    <d-header class="dheader">
      <div class="title">
        <h1>{{props.selectRow.libraryName || '--'}}</h1>
        <d-icon style="cursor: pointer" name="icon-close" @click="emit('close')"></d-icon>
      </div>
      <div class="sub-title">
        <span>安全漏洞：</span>
        <span class="val">{{props.selectRow.lowVulCount || '--'}}</span>
        <span class="split"></span>
        <span>许可证</span>
        <d-tag color="#3ac295" size="sm" class="ml-2">{{props.selectRow.licenseName || '--'}}</d-tag>
      </div>
    </d-header>
    <div class="card-box">
      <div class="card-body">
        <d-row :gutter="10">
          <d-col :span="24" class="flex">
            <label style="flex: 0.2">简介</label>
            <p>{{'--'}}</p>
          </d-col>
        </d-row>
        <d-row :gutter="10">
          <d-col :span="24" class="flex">
            <label style="flex: 0.2">关联漏洞编号</label>
            <p>{{props.selectRow.cveId || '--'}}</p>
          </d-col>
        </d-row>
      </div>
    </div>
    <div class="card-box">
      <div class="card-header">组件详情</div>
      <div class="card-body">
        <d-row :gutter="10">
          <d-col :span="12" class="flex">
            <label>当前版本</label>
            <p>{{props.selectRow.currentVersion || '--'}}</p>
          </d-col>
          <d-col :span="12" class="flex">
            <label>最新版本</label>
            <p>{{props.selectRow.latestVersion || '--'}}</p>
          </d-col>
        </d-row>
        <d-row :gutter="10">
          <d-col :span="12" class="flex">
            <label>深度</label>
            <p>{{props.selectRow.depth || '--'}}</p>
          </d-col>
          <d-col :span="12" class="flex">
            <label>供应商</label>
            <p>{{props.selectRow.vendor || '--'}}</p>
          </d-col>
        </d-row>
        <d-row :gutter="10">
          <d-col :span="12" class="flex">
            <label>包管理器平台</label>
            <p>{{props.selectRow.platform || '--'}}</p>
          </d-col>
          <d-col :span="12" class="flex">
            <label>范围</label>
            <p>{{props.selectRow.scope || '--'}}</p>
          </d-col>
        </d-row>
        <d-row :gutter="10">
          <d-col :span="12" class="flex">
            <label>程序语言</label>
            <p>{{props.selectRow.language || '--'}}</p>
          </d-col>
          <d-col :span="12" class="flex">
            <label>活跃度</label>
            <p>{{props.selectRow.activityScore || '--'}}</p>
          </d-col>
        </d-row>
        <d-row :gutter="10">
          <d-col :span="12" class="flex">
            <label>下载量</label>
            <p>{{props.selectRow.downloadCount || '--'}}</p>
          </d-col>
          <d-col :span="12" class="flex">
            <label>识别方法</label>
            <p>{{props.selectRow.recogMethod || '--'}}</p>
          </d-col>
        </d-row>
        <d-row :gutter="10">
          <d-col :span="12" class="flex">
            <label>匹配度</label>
            <p>{{props.selectRow.matchingDegree || '--'}}</p>
          </d-col>
          <d-col :span="12" class="flex">
            <label>生命周期终点/服务终止</label>
            <p><d-tag type="danger" size="sm">已停止维护</d-tag></p>
          </d-col>
        </d-row>
        <d-row :gutter="10">
          <d-col :span="12" class="flex">
            <label>组件依赖关系</label>
            <p>{{props.selectRow.treeLevel || '--'}}</p>
          </d-col>
        </d-row>
      </div>
    </div>
  </d-layout>
</template>

<script setup>
import { ref, defineEmits, defineProps } from 'vue';
const props = defineProps(['selectRow']);
console.log(props.selectRow)
debugger
const emit = defineEmits(['close']);
</script>

<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';

.dlayout {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  .dheader {
    width: 100%;
  }

  .title {
    font-size: 20px;
    font-weight: bold;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    d-icon {
      cursor: pointer;
    }
  }

  .sub-title {
    display: flex;
    gap: 2px;
    align-items: center;
    font-size: 12px;
    margin-top: 6px;
    color: #808080;
    .val {
      color: var(--devui-text);
    }
    .split {
      width: 1px;
      height: 14px;
      background-color: #ddd;
    }
  }

  .card-box {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #eef0f5;
    font-size: 14px;
    margin-top: 15px;
    .card-header {
      padding: 10px 16px;
      background-color: #f5f5f5;
      border-bottom: 1px solid #eef0f5;
      font-weight: bold;
    }
    .card-body {
      margin: 10px 16px;
      .flex {
        margin: 10px 0;
        label,
        p {
          flex: 1;
        }
        label {
          color: #595959;
        }
      }
    }
  }
}
</style>
