<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2023-03-06 11:41:42
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-04-13 18:47:29
 * @FilePath: \yuan-huoling-browser\src\views\screen\components\BlockHeader.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { ref, onMounted, defineProps } from "vue";
interface BlockHeaderProps {
  name: string;
}
//标题
let TabImg = {
  AssetsStatistics: "资产情况统计",
  AssetTypeDistribution: "资产类型分布情况",
  operatingSystemTypeAndNumberStatistics: "操作系统类型统计TOP5",
  openPortNum: "开放端口统计TOP5",
  openServeNum: "开放服务统计TOP5",
  componentTypeTop5: "组件类型统计TOP5",
};
const { name = "" } = defineProps<BlockHeaderProps>();
const num = ref(1);
//判断是左边还是右边，判断显示那张图片
onMounted(() => {
  if (
    name == "openPortNum" ||
    name == "openServeNum" ||
    name == "componentTypeTop5"
  ) {
    num.value = 2;
  } else {
    num.value = 1;
  }
});
</script>

<template>
  <div class="custom-screen-block-header">
    <span class="ya-title" :class="num == 1 ? 'ya-left' : 'ya-right'">{{
      TabImg[name]
    }}</span>
    <img
      src="../../../assets/image/screen/icon-left.png"
      v-show="num == 1"
      alt=""
      class="ya-img"
    />
    <img
      v-show="num == 2"
      src="../../../assets/image/screen/icon-right.png"
      alt=""
      class="ya-img"
    />
  </div>
</template>

<style scoped lang="scss">
.custom-screen-block-header {
  width: 100%;
  height: 37px;
  position: relative;
  display: flex;
  padding-left: 20px;
  box-sizing: border-box;
  .ya-img {
    width: 100%;
    height: 37px;
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  .ya-title {
    font-family: "yixinchangyouti";
    font-weight: 400;
    color: #ffffff;
    font-size: 17px;
    z-index: 1;
    margin-top: 8px;
    letter-spacing: 2px;
  }
  .ya-left {
    margin-left: 60px;
  }
  .ya-right {
    width: 100%;
    text-align: end;
    margin-right: 83px;
    box-sizing: border-box;
  }
}
</style>
