<template>
  <commonChart
    :title="
      resultTagType === 'mechine'
        ? $t('数据统计.指标完成统计（机台）')
        : $t('数据统计.指标完成统计（学科）')
    "
    :charts-id="'performanceCompletion-' + resultTagType"
    :bar-type="'barChart'"
    :option="chartOption"
    :filterItems="['projectName', 'projectCode']"
    @update="initCompleteChart"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import commonChart from '@/components/common/echartCard/commonChart.vue';
import { TASK_CALCULATE_STATUS_OBJ } from '@/utils/enum/task';
import {
  getCommonCompleteStatisticsApi,
  getPerformanceCompleteStatisticsByDisciplineApi,
} from '@/api/project/node';

const props = defineProps({
  // x轴 机台、学科discipline
  resultTagType: {
    type: String,
    default: '',
  },
  performanceColorList: {
    type: Array,
    default: () => [],
  },
});

const chartOption = ref();
const initCompleteChart = async (formData: any) => {
  let xData: any = [];
  let titles: any = [];
  const seriesData: any = [];
  const params =
    props.resultTagType == 'mechine'
      ? {
          queryType: 'performance',
          resultTagType: 'tag4', // 机台
          ...formData,
        }
      : {
          ...formData,
        };
  const api =
    props.resultTagType == 'mechine'
      ? getCommonCompleteStatisticsApi
      : getPerformanceCompleteStatisticsByDisciplineApi;
  const res: any = await api({
    ...params,
  });
  if (res && res.code === 200) {
    xData =
      res.data?.result?.map((item: any) => {
        return item.name;
      }) || [];

    titles =
      res.data?.allExeStatus?.map((item: any) => {
        return TASK_CALCULATE_STATUS_OBJ[item] || item; // todo 返回的状态待确认
      }) || [];
    const names = res.data?.allExeStatus || [];

    for (let i = 0; i < names.length; i++) {
      const str = names[i];
      const obj: any = {
        name: TASK_CALCULATE_STATUS_OBJ[str] || str,
        type: 'bar',

        emphasis: {
          focus: 'series',
        },
        data: [],
      };

      for (let j = 0; j < res.data.result.length; j++) {
        obj.data.push(res.data.result[j]?.statusCount[str] || 0);
      }

      seriesData.push(obj);
    }
    chartOption.value = {
      color: props.performanceColorList,
      title: {
        show: false,
      },
      tooltip: {
        trigger: 'axis',
      },
      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: seriesData,
    };
  }
};
</script>
