<template>
  <commonChart
    :title="$t('数据统计.工位评审通过统计')"
    :charts-id="'chart-reviewPassed'"
    :bar-type="'barChart'"
    :option="chartOption"
    :filterItems="['projectName', 'projectCode', 'discipline']"
    @update="initReviewPassedChart"
  >
    <!-- <template #extraFilters></template> -->
  </commonChart>
</template>

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

const props = defineProps({
  processNodeColorList: {
    type: Array,
    default: () => [],
  },
});
// 封装方法，根据对象的某个属性对对象数组进行排序 升序
const sortObjectArray = (arr: any, key: any) => {
  return arr.sort((a: any, b: any) => {
    return a[key] - b[key];
  });
};
// 初始化用户组项目统计
const chartOption = ref();

const initReviewPassedChart = async (formData: any) => {
  let xData: any = [];
  let titles: any = [];
  const seriesData: any = [];
  const res: any = await getWorkstationReviewStatisticsApi({
    resultTagType: 'tag5',
    ...formData,
  });
  if (res && res.code === 200) {
    xData =
      res.data?.result?.map((item: any) => {
        return item.name;
      }) || [];

    titles = res.data.allApprovalStatus;
    const statusMap: any = {
      0: '未评审',
      1: '评审中',
      2: '已通过',
      3: '已拒绝',
    };

    for (let i = 0; i < titles.length; i++) {
      const obj: any = {
        name: statusMap[titles[i]],
        nameValue: titles[i],
        type: 'bar',
        emphasis: {
          focus: 'series',
        },
        data: [],
      };
      for (let j = 0; j < res.data.result.length; j++) {
        obj.data.push(res.data.result[j]?.statusCount[titles[i]] || 0);
      }
      seriesData.push(obj);
    }
    chartOption.value = {
      color: props.processNodeColorList,
      title: {
        textStyle: {
          fontSize: 20,
        },
        subtextStyle: {
          color: '#175ce5',
          fontSize: 15,
          fontWeight: 'bold',
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {
        show: true,
        top: '0%',
        left: 'center',
        data: ['未评审', '评审中', '已通过', '已拒绝'],
      },
      grid: {
        top: '10%',
        bottom: '50',
        left: '5%',
        right: '5%',
      },
      xAxis: [
        {
          type: 'category',
          data: xData,
        },
      ],
      yAxis: [
        {
          type: 'value',
        },
      ],
      dataZoom: xData.length > 4 ? [] : null,
      series: sortObjectArray(seriesData, 'nameValue'),
    };
  }
};
</script>
