<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2023-03-06 19:53:39
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-03-28 10:30:04
 * @FilePath: \yuan-huoling-browser\src\views\screen\components\componentTypeAndQuantityStatistics.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import {
  ref,
  watch,
  reactive,
  onMounted,
  computed,
  defineProps,
  toRefs,
} from "vue";
import { getComponentTypePie } from "../../../api/screen/index";
import deptObj from "../../../store/modules/dept";
import ModuleEmpty from "./ModuleEmpty.vue";
const dept = deptObj();
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  BarChart,
  CanvasRenderer,
]);
//echarts配置项
let option = ref({
  color: [
    {
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        { offset: 0, color: "#2B8AFF" }, // 设置颜色渐变
        { offset: 1, color: "#2FF3FF" },
      ],
    },
  ],
  grid: {
    left: "-10%",
    right: "0",
    top: "0%",
    bottom: "0",
    containLabel: true,
  },
  tooltip: {
    show: true,
    trigger: "item",
    backgroundColor: "rgba(9,24,50,0.9)",
    borderColor: "#3D94FF",
    textStyle: {
      align: "left",
      color: "rgba(255, 255, 255, 0.8)",
    },
    formatter: function (val) {
      const params: any = tooltipData.value[val.dataIndex];
      return `<div class='ya-tooltip'>
          <div style="background:#2B8AFF;width: 6px;height: 6px;"></div>
          <div class="ya-data-name">${params.name} </div>
          <div class="ya-data-value"> ${params.count}</div>
        </div>`;
    },
  },
  xAxis: [
    {
      data: [],
      type: "category",
      axisLabel: {
        fontSize: 14,
        fontFamily: "Microsoft YaHei",
        fontWeight: "normal",
        color: "#FFFFFF",
      },
      axisTick: {
        show: false, // 不显示坐标轴刻度线
      },
    },
    {
      type: "category",
      show: false,
      data: [],
    },
  ],
  yAxis: {
    type: "value",
    show: false,
  },
  series: [
    {
      data: [],
      barWidth: 12,
      type: "bar",
    },
    {
      xAxisIndex: 1,
      itemStyle: {
        color: "rgba(255,255,255,0.07)",
      },
      data: [],
      barWidth: 40,
      type: "bar",
    },
  ],
});
const tooltipData = ref([]);
//数据初始化
const init = () => {
  let params = { deptId: dept.id };
  getComponentTypePie(params).then((res) => {
    const { code, data = [] } = res || {};
    if (code == 200 && data) {
      tooltipData.value = data;
      option.value.xAxis[0].data = data.map((item) => {
        if (item.name && item.name.length > 5) {
          return item.name.substr(0, 5) + "..";
        } else {
          return item.name;
        }
      });
      option.value.xAxis[1].data = option.value.xAxis[0].data;
      option.value.series[0].data = data.map((item) => item.count);
      const max = option.value.series[0].data.reduce(
        (pre, cur) => (pre > cur ? pre : cur),
        0
      );

      if (data.length == 1) {
        option.value.series[0].barWidth = 246;
        option.value.series[1].barWidth = 356;
        option.value.series[1].data = option.value.series[0].data.map(
          () => max + max * 0.2
        );
      } else {
        option.value.series[0].barWidth = 12;
        option.value.series[1].barWidth = 40;
        option.value.series[1].data = option.value.series[0].data.map(
          () => max + max * 0.1
        );
      }
    }
  });
};
watch(
  dept,
  () => {
    init();
  },
  {
    immediate: true,
  }
);
</script>
<template>
  <v-chart
    style="height: 260px"
    :option="option"
    v-if="option.xAxis[0].data && option.xAxis[0].data.length > 0"
  ></v-chart>
  <ModuleEmpty v-else></ModuleEmpty>
</template>
<style scoped lang="scss">
::v-deep .ya-tooltip {
  display: flex;
  align-items: center;
  padding: 0px 13px;
  box-sizing: border-box;
}
::v-deep .ya-data-name {
  font-size: 12px;
  transform: scale(0.91667);
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 9px;
}
::v-deep .ya-data-value {
  font-size: 13px;
  font-family: PangMenZhengDao;
  font-weight: 400;
  color: #ffffff;
  margin-left: 23px;
}
</style>
