<!--
 * @Author: changjun
 * @FilePath: /qingdao-safety-product/src/views/threatIntelligence/components/CommonDetailTop.vue
 * @Date: 2022-08-10 11:23:05
 * @Description: 详情公共顶部组件
 * @LastEditTime: 2023-09-01 17:03:25
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { computed } from 'vue'

import { ElIcon, ElDivider, ElRate } from 'element-plus'
import { CopyDocument, Share, Warning } from '@element-plus/icons-vue'
import { detailTopImg } from '../fakeData'

interface CommonDetailTopProps {
  type: string | ['IP', 'DOMAIN', 'EMAIL', 'FILE'];
  title?: string;
  tags?: any[];
  riskLevel?: string | number;
  confidenceLevel?: string | number; //置信度
  list?: any[];
  propsData?: any;
}

const { type = '', tags = [], title = '', riskLevel = '', list, confidenceLevel = '', propsData = {} } = defineProps<CommonDetailTopProps>()

const getLevelText = computed(() => {
  const riskLevelObj = {
    1: '低',
    2: '中',
    3: '高',
  }
  return riskLevelObj[riskLevel]
})

const getConfidenceLevelText = computed(() => {
  const confidenceLevelObj = {
    1: '低',
    2: '中',
    3: '高',
  }
  return confidenceLevelObj[confidenceLevel]
})
</script>

<template>
  <div class="common-detail-top">
    <div class="top-box">
      <div class="left">
        <img :src="detailTopImg" alt="" class="left-img">
        <div class="bottom-left">
          <div class="bottom-left-item ">
            <span class="title">风险评估</span>
            <span class="level level-error">{{ getLevelText }}</span>
          </div>
          <ElDivider direction="vertical" />
          <div class="bottom-left-item">
            <span class="title">置信度</span>
            <span class="level">{{ getConfidenceLevelText }}</span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title-tip">{{ type }}</div>
        <div class="title-content-box">
          <div class="title-content">{{ title }}</div>
          <div class="title-content-icon">
            <ElIcon>
              <CopyDocument />
            </ElIcon>
          </div>
          <div class="title-content-icon">
            <ElIcon>
              <Share />
            </ElIcon>
          </div>
        </div>
        <div class="tag-label">
          <span>情报标签</span>
          <ElIcon class="question-icon">
            <Warning />
          </ElIcon>
        </div>
        <div class="tag-list">
          <div class="tag tag-waring" v-for="(tag, index) in tags" :class="`tag-${tag.type}`">{{ tag.name }}</div>
        </div>
        <div class="empty-border"></div>

        <div class="bottom-list-block">
          <div class="list-block-item" v-for="(item, index) in list" :key="index">
            <div class="left-icon">
              <i class="iconfont" :class="`${item.icon}`"></i>
            </div>
            <div class="list-block-item-right">
              <div class="list-block-item-right-title">{{ item.title }}</div>
              <div class="popularity-box" v-if="item.title === '流行度'">
                <ElRate class="custom-rate" v-model="item.rank" disabled size="small" />
                <ElIcon class="question-icon">
                  <Warning />
                </ElIcon>
              </div>
              <div class="desc" v-else>{{ item.desc }}</div>
            </div>
          </div>
        </div>

      </div>
    </div>


  </div>
</template>


<style lang="scss" scoped>
.common-detail-top {
  width: 100%;
  padding: 16px 24px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;

  .top-box {
    width: 100%;
    display: flex;

    .left {
      width: 126px;
      margin-right: 35px;
      display: flex;
      flex-direction: column;

      .left-img {
        width: 126px;
        height: 126px;
        flex-shrink: 0;
        margin-right: 35px;
      }

      .bottom-left {
        display: flex;
        align-items: center;
        margin-top: 32px;

        .bottom-left-item {
          display: flex;
          flex-direction: column;
          flex: 1;
          align-items: center;
          position: relative;

          .title {
            font-size: 12px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.4000);
          }

          .level {
            font-size: 16px;
            font-weight: 400;
            color: rgba(3, 3, 3, 0.6500);
          }

          .level-error {
            color: #D90808;
          }
        }


      }
    }

    .right {
      display: flex;
      flex-direction: column;
      flex: 1;

      .title-tip {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.4000);
      }

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

        .title-content {
          font-size: 30px;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.6500);
        }

        .title-content-icon {
          width: 19px;
          height: 19px;
          background: #F4F5F7;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 10px;
          color: rgba(0, 0, 0, 0.6500);
          margin-left: 12px;
        }
      }

      .tag-label {
        display: flex;
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.4000);
        align-items: center;

        .question-icon {
          margin-left: 5px;
          color: rgba(0, 0, 0, 0.6500);
          font-size: 10px;
        }
      }

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

        .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;
        }
      }


      .empty-border {
        width: 100%;
        height: 12px;
        margin-top: 18px;
        box-shadow: inset 0px -1px 0px 0px #EBEBEB;
      }


      .bottom-list-block {
        display: flex;
        width: 100%;
        margin-top: 16px;
        height: 59px;

        .list-block-item {
          display: flex;
          width: calc(100% / 6);

          .left-icon {
            font-size: 16px;
          }
        }

        .list-block-item-right {
          display: flex;
          flex-direction: column;
          margin-left: 8px;

          .list-block-item-right-title {
            font-size: 14px;
            font-weight: 400;
            color: rgba(3, 3, 3, 0.6500);
          }

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

            .custom-rate {
              --el-rate-icon-margin: 4px;
              --el-rate-icon-size: 16px;
            }

            .question-icon {
              color: rgba(0, 0, 0, 0.6500);
              font-size: 10px;
            }
          }

          .desc {
            width: 140px;
            margin-top: 5px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(3, 3, 3, 0.4000);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
  }
}
</style>
