<template>
  <commonChart
    :title="$t('数据统计.用户组项目统计')"
    :charts-id="'chart-1-UserProjectStatistics'"
    :bar-type="'barChart'"
    :option="chartOption"
    :filterItems="['userGroup', 'user']"
    @update="initUserProjectStatistics"
  />
</template>

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

const getUserGroupProjectStatistics = async (formData: any) => {
  const xData: any = [];
  const yData: any = [];
  try {
    const res: any = await getUserGroupProjectStatisticsApi({ ...formData });
    if (res.code === 200) {
      res.data.forEach((item: any) => {
        xData.push(item.userName);
        yData.push(item.projectCount);
      });
    }
  } catch {}

  return {
    xData,
    yData,
  };
};

// 初始化用户组项目统计
const chartOption = ref();
const initUserProjectStatistics = async (formData: any) => {
  const { xData, yData } = await getUserGroupProjectStatistics(formData);
  chartOption.value = {
    grid: {
      top: '10%',
      bottom: '50',
      left: '5%',
      right: '5%',
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    dataZoom: xData.length > 4 ? [] : null,
    series: [
      {
        type: 'bar',
        name: '项目数量',
        barWidth: '30%',
        data: yData,
        itemStyle: {
          color: getThemeColor('--el-color-primary'),
        },
      },
    ],
  };
};
</script>
