<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2023-03-06 19:42:54
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-03-13 19:37:44
 * @FilePath: \yuan-huoling-browser\src\views\screen\components\openServeNum.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import highVulProcessItem from "./highVulProcessItem.vue";
import { getOpenServiceHistogram } from "../../../api/screen/index";
import deptObj from "../../../store/modules/dept";
import ModuleEmpty from "./ModuleEmpty.vue";
const dept = deptObj();

const list = ref([]);
const init = () => {
  let params = { deptId: dept.id };
  getOpenServiceHistogram(params).then((res) => {
    const { code, data = [] } = res || {};
    if (code == 200) {
      const result = data || [];
      const total =
        result &&
        result.reduce((total, item) => {
          return total + item.count;
        }, 0);
      list.value = result
        .map((item) => {
          item.percent = (item.count / total) * 100;
          return item;
        })
        .sort((a, b) => {
          return b.count - a.count;
        })
        .map((item, index) => {
          item.ranking = index + 1;
          return item;
        });
    }
  });
};
watch(
  dept,
  () => {
    init();
  },
  {
    immediate: true,
  }
);
</script>

<template>
  <div class="ya-box">
    <template v-if="list && list.length">
      <highVulProcessItem
        v-for="(item, index) in list"
        :key="index"
        :name="item.name"
        :value="item.count"
        :number="item.ranking"
        :percentage="item.percent"
      ></highVulProcessItem>
    </template>
    <ModuleEmpty class="ModuleEmpty" v-else></ModuleEmpty>
  </div>
</template>

<style scoped lang="scss">
.ya-box {
  width: 100%;
  color: #fff;
  height: 280px;
}
.ya-empty {
  margin-top: 30px;
}
</style>
