<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2023-03-06 18:52:12
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-04-13 19:47:33
 * @FilePath: \yuan-huoling-browser\src\views\screen\components\CenterTop.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import {
  ref,
  watch,
  reactive,
  onMounted,
  computed,
  defineProps,
  toRefs,
} from "vue";
import { getAssetSituationCount } from "../../../api/screen/index";
import host from "../../../assets/image/screen/icon-host.png";
import survive from "../../../assets/image/screen/icon-survive.png";
import offline from "../../../assets/image/screen/icon-offline.png";
import deptObj from "../../../store/modules/dept";
const dept = deptObj();
//遍历的数据
const list = ref([
  {
    name: "主机资产",
    tab: "hostAssetCount",
    tabDetail: "hostAssetCountForShow",
    num: 0,
    detailNum: 0,
    icon: host,
  },
  {
    name: "存活资产",
    tab: "surviveHostAssetCount",
    tabDetail: "surviveHostAssetCountForShow",
    num: 0,
    detailNum: 0,
    icon: survive,
  },
  {
    name: "离线资产",
    tab: "offLineHostAssetCount",
    tabDetail: "offLineHostAssetCountForShow",
    num: 0,
    detailNum: 0,
    icon: offline,
  },
]);
//数据初始化
const init = () => {
  let params = { deptId: dept.id };
  getAssetSituationCount(params).then((res) => {
    const { code, data = {} } = res;
    if (code == 200) {
      list.value.forEach((item) => {
        item.num = (data && data[item.tab]) || 0;
        item.detailNum = (data && data[item.tabDetail]) || 0;
      });
    }
  });
};
watch(
  dept,
  () => {
    init();
  },
  {
    immediate: true,
  }
);
</script>

<template>
  <div class="custom-screen-center-top">
    <div class="ya-item" v-for="(item, index) in list" :key="index">
      <img :src="item.icon" alt="" />
      <div class="ya-right">
        <ya-tooltip
          placement="top-start"
          trigger="hover"
          :content="item.num"
          :enterable="false"
          :hide-after="0"
        >
          <div class="ya-count" :class="`ya-count-${index}`">
            {{ item.detailNum }}
          </div>
        </ya-tooltip>
        <span class="ya-title">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.custom-screen-center-top {
  width: 839px;
  height: 80px;
  background: url("../../../assets/image/screen/icon-assets.png") no-repeat;
  background-size: 100% 100%;
  margin-top: 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  img {
    width: 135px;
    height: 87px;
    margin-right: 9px;
    vertical-align: middle;
  }
  .ya-item:first-child {
    margin-left: 42px;
  }
  .ya-item:last-child {
    margin-right: 42px;
  }
  .ya-item {
    height: 80px;
    display: flex;
    align-items: center;
    .ya-right {
      .ya-title {
        font-size: 18px;
        font-family: MicrosoftYaHei;
        font-weight: normal;
        color: #c6d1db;
        margin-top: 10px;
        letter-spacing: 2px;
      }
      .ya-count {
        font-size: 26px;
        font-family: PangMenZhengDao;
        font-weight: 400;
        color: #23f5ea;
      }
      .ya-count-1 {
        color: #10abff;
      }
      .ya-count-2 {
        color: #ffd482;
      }
    }
  }
}
</style>
