<template>
  <commonChart
    :title="$t('数据统计.用户组难度系数统计')"
    :charts-id="'chart-3-userDifficulty'"
    :bar-type="'barChart'"
    :option="chartOption"
    :filterItems="['userGroup', 'user', 'projectName', 'projectCode', 'discipline']"
    @update="initUserDifficultyCoefficientChart"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import commonChart from '@/components/common/echartCard/commonChart.vue';
import { getUserGroupDifficultyStatisticsApi } from '@/api/project/node';
import { useDict } from '@/utils/useDict';

const props = defineProps({
  difficultyCountColorList: {
    type: Array,
    default: () => [],
  },
});
// 数组对象排序
const sortObjectArray = (arr: any, key: any) => {
  return arr.sort((a: any, b: any) => {
    return a[key] - b[key];
  });
};
// 难度系数字典
const { DIFFICULTY_COEFFICIENT } = useDict('DIFFICULTY_COEFFICIENT');
const getDifficultyLevel = (difficulty: number) => {
  const str = DIFFICULTY_COEFFICIENT.value.O[difficulty];
  return str ? str : '难度系数';
};

// 初始化用户组项目统计
const chartOption = ref();
const initUserDifficultyCoefficientChart = async (formData: any) => {
  let xData: any = [];
  let titles: any = [];
  const seriesList: any = [];
  const res: any = await getUserGroupDifficultyStatisticsApi({
    ...formData,
  });
  if (res && res.code === 200) {
    xData =
      res.data?.result?.map((item: any) => {
        return item.userName;
      }) || [];
    titles = res.data?.alldifficultyValue || [];
    for (let i = 0; i < titles.length; i++) {
      const str = titles[i].toFixed(1);
      const obj: any = {
        name: getDifficultyLevel(Number(str)) + str,
        coefficient: Number(str),
        type: 'bar',
        emphasis: {
          focus: 'series',
        },
        data: [],
      };
      for (let j = 0; j < res.data.result.length; j++) {
        obj.data.push(res.data.result[j]?.difficultyCount[str] || 0);
      }
      seriesList.push(obj);
    }
    const option = {
      color: props.difficultyCountColorList,
      title: {
        textStyle: {
          fontSize: 20,
        },
        subtextStyle: {
          color: '#175ce5',
          fontSize: 15,
          fontWeight: 'bold',
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {
        top: '0%',
        left: 'center',
        data: titles,
      },
      grid: {
        top: '10%',
        bottom: '50',
        left: '5%',
        right: '5%',
      },
      xAxis: {
        type: 'category',
        data: xData,
      },
      yAxis: {
        type: 'value',
      },
      dataZoom: xData.length > 4 ? [] : null,
      series: sortObjectArray(seriesList, 'coefficient'),
    };
    chartOption.value = option;
  }
};
</script>
