<script setup lang="ts">
import { ref, computed, onMounted, nextTick, watch } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";
import { getPersonDimensionChartsRanking } from "@/api/draw";
import { reactive } from "vue";
const props = defineProps({
  title: {
    type: String
  },
  barDimEchartsList: {
    type: Object
  },
  itemDim: {
    type: Object
  },
  bigFull: {
    type: Number
  }
});
const dataProp = reactive({
  title: "",
  data: {}
});
const propItem = ref();
onMounted(() => {
  nextTick(() => {
    if (props) {
      propItem.value = props;
      init(
        props.barDimEchartsList.data,
        props.barDimEchartsList.type,
        props.itemDim
      );
    }
  });
});
watch(
  propItem,
  newVal => {
    if (props.bigFull == 2) {
      let dimList = {
        name: newVal.barDimEchartsList.name,
        id: newVal.barDimEchartsList.id
      };
      let type = newVal.barDimEchartsList.type;
      delete newVal.barDimEchartsList.type;
      init(newVal.barDimEchartsList, type, dimList);
    } else {
      init(
        newVal.barDimEchartsList.data,
        newVal.barDimEchartsList.type,
        newVal.itemDim
      );
    }
  },
  { deep: true }
);
// 兼容dark主题
const { isDark } = useDark();
let theme = computed(() => {
  return isDark.value ? "dark" : "default";
});
// 初始化ECharts
const chartRef = ref();
const { setOptions } = useECharts(chartRef, { theme });
const dataList = reactive({
  title: [],
  data: []
});
const init = async (item?: any, type?: number, dimList?: any) => {
  dataList.title = [];
  dataList.data = [];
  let dataFullBig = [];
  if (item) {
    const { data, code } = await getPersonDimensionChartsRanking({
      ...item,
      dimensionName: dimList?.name,
      dimId: dimList?.id,
      type
    });
    if (code === 200) {
      dataFullBig = data;
    }
    if (dataFullBig) {
      let aa = [];
      let bb = [];
      dataFullBig.map((it, id) => {
        // if (id < 10) {
        // if (dataList.data.length < 10) {
        // }
        // }
        dataList.title.push(it.assessmentObjectName);
        dataList.data.push(it.totalScore);
        aa.push(it.assessmentObjectName);
        bb.push(it.totalScore);
      });
      if (aa.length > 10 || bb.length > 10) {
        aa.splice(10); // 从索引 10 开始删除所有元素
        bb.splice(10); // 从索引 10 开始删除所有元素
      }
      setOptions({
        title: {
          text: `${props.title}Top10`
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: aa,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0, // 强制显示所有标签
              rotate: 0, // 旋转45度
              formatter: function (value) {
                // 可以根据需要截取过长的标签，避免布局问题
                return value.length > 4 ? value.slice(0, 4) + "..." : value;
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "得分",
            type: "bar",
            barWidth: props.title == "总得分" ? "30%" : "40%",
            data: bb
          }
        ]
      });
    }
  }
};
// nextTick(() => {
//   init();
// });
defineExpose({
  init
});
</script>

<template>
  <div ref="chartRef" class="w-full h-full" />
</template>
