<template>
  <div class="gl-page-content-grey-full">
    <div class="content">
      <div class="chart-box">
        <EchartCard
          :title="$t('统计分析.任务完成统计机台')"
          ref="taskCompletionAtWorkstationsChartRef"
          :charts-id="'chart-4'"
          :bar-type="'barChart'"
          @refresh="queryTaskCompletionByWorkspace"
        >
          <!-- <template #formSlot>
            <el-form label-width="auto">
              <el-form-item label="项目">
                <ProjectSelect
                  class="select-width margin-right-12"
                  v-model="taskCompletionAtWorkstationsFormData.tag1"
                  @change="queryTaskCompletionByWorkspace"
                />
              </el-form-item>
            </el-form>
          </template> -->
        </EchartCard>
      </div>
      <div class="chart-box">
        <EchartCard
          :title="$t('统计分析.任务完成统计学科')"
          ref="taskCompletionAtDisciplineChartRef"
          :charts-id="'chart-5'"
          :bar-type="'barChart'"
          @refresh="queryTaskCompletionByDiscipline"
        >
          <!-- <template #formSlot>
            <el-form label-width="auto">
              <el-form-item label="项目">
                <ProjectSelect
                  class="select-width margin-right-12"
                  v-model="initTaskCompletionAtDisciplineFormData.tag1"
                  @change="queryTaskCompletionByDiscipline"
                />
              </el-form-item>
            </el-form>
          </template> -->
        </EchartCard>
      </div>
      <!-- 新增 任务达成统计  工位/学科 -->
      <div class="chart-box">
        <EchartCard
          :title="$t('统计分析.任务达成统计机台')"
          ref="taskQualityAtWorkstationsChartRef"
          :charts-id="'chart-Quality-1'"
          :bar-type="'barChart'"
          @refresh="queryTaskQualityByWorkspace"
        >
        </EchartCard>
      </div>
      <div class="chart-box">
        <EchartCard
          :title="$t('统计分析.任务达成统计学科')"
          ref="taskQualityAtDisciplineChartRef"
          :charts-id="'chart-Quality-2'"
          :bar-type="'barChart'"
          @refresh="queryTaskQualityByDiscipline"
        >
        </EchartCard>
      </div>
      <div class="chart-box">
        <EchartCard
          :title="$t('统计分析.指标完成统计机台')"
          ref="performanceCompletionAtWorkstationsChartRef"
          :charts-id="'chart-6'"
          :bar-type="'barChart'"
          @refresh="queryPerfCompletionByWorkspace"
        >
          <!-- <template #formSlot>
            <el-form label-width="auto">
              <el-form-item label="项目">
                <ProjectSelect
                  class="select-width margin-right-12"
                  v-model="queryPerfCompletionByWorkspaceFormData.tag1"
                  @change="queryPerfCompletionByWorkspace"
                />
              </el-form-item>
            </el-form>
          </template> -->
        </EchartCard>
      </div>
      <div class="chart-box">
        <EchartCard
          :title="$t('统计分析.指标完成统计学科')"
          ref="performanceCompletionAtDisciplineChartRef"
          :charts-id="'chart-7'"
          :bar-type="'barChart'"
          @refresh="queryPerfCompletionByDiscipline"
        >
          <!-- <template #formSlot>
            <el-form label-width="auto">
              <el-form-item label="项目">
                <ProjectSelect
                  class="select-width margin-right-12"
                  v-model="queryPerfCompletionByDisciplineFormData.tag1"
                  @change="queryPerfCompletionByDiscipline"
                />
              </el-form-item>
            </el-form>
          </template> -->
        </EchartCard>
      </div>
      <div class="chart-box">
        <EchartCard
          :title="$t('统计分析.成员任务进度统计')"
          ref="userTaskCompleteChartRef"
          :charts-id="'chart-2'"
          :bar-type="'barChart'"
          @refresh="queryUserTaskCompletion"
        >
          <!-- <template #formSlot>
            <el-form label-width="auto">
              <el-form-item label="用户组">
                <el-select
                  v-model="userTaskCompleteFormData.userGroupId"
                  class="select-width margin-right-12"
                  @change="userTaskCompleteProjectChangeFun"
                >
                  <el-option
                    v-for="item in userGroupOptions"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="项目">
                <ProjectSelect
                  class="select-width margin-right-12"
                  v-model="userTaskCompleteFormData.tag1"
                  @change="userTaskCompleteProjectChangeFun"
                />
              </el-form-item>
              <el-form-item label="学科">
                <el-select
                  v-model="userTaskCompleteFormData.tag2"
                  clearable
                  class="select-width margin-right-12"
                  @change="userTaskCompleteProjectChangeFun"
                >
                  <el-option
                    v-for="item in disciplineOptions"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="用户">
                <UserSelect
                  class="select-width"
                  v-model="userTaskCompleteFormData.userId"
                  @change="userTaskCompleteProjectChangeFun"
                />
              </el-form-item>
            </el-form>
          </template> -->
        </EchartCard>
      </div>
      <div class="chart-box">
        <EchartCard
          :title="$t('统计分析.难度系数统计')"
          ref="userDifficultyCoefficientChartRef"
          :charts-id="'chart-3'"
          :bar-type="'barChart'"
          @refresh="queryUserDifficultStatistics"
        >
          <!-- <template #formSlot>
             <el-form label-width="auto">
              <el-form-item label="用户组">
               <el-select
                  clearable
                  class="select-width margin-right-12"
                  v-model="userDifficultyCoefficientFormData.userGroupId"
                  @change="queryUserDifficultStatistics"
                >
                  <el-option
                    v-for="item in userGroupOptions"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="项目">
                <ProjectSelect
                  class="select-width margin-right-12"
                  v-model="userDifficultyCoefficientFormData.tag1"
                  @change="queryUserDifficultStatistics"
                />
              </el-form-item>
              <el-form-item label="学科">
                <el-select
                  clearable
                  class="select-width margin-right-12"
                  v-model="userDifficultyCoefficientFormData.tag2"
                  @change="queryUserDifficultStatistics"
                >
                  <el-option
                    v-for="item in disciplineOptions"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="用户">
                <UserSelect
                  class="select-width"
                  v-model="userDifficultyCoefficientFormData.userId"
                  @change="queryUserDifficultStatistics"
                />
              </el-form-item>
            </el-form>
          </template> -->
        </EchartCard>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watchEffect } from 'vue';
import EchartCard from '@/components/common/echartCard/index.vue';
// import UserSelect from '@/components/common/userSelect/index.vue';
// import { userQueryGroupApi } from '@/api/system/user';
import {} from // getUserGroupProjectStatisticsApi,
// getUserGroupTaskCompleteStatisticsApi,
// queryNodeListApi,
// getWorkstationReviewStatisticsApi,
// getUserGroupDifficultyStatisticsApi,
// getCommonCompleteStatisticsApi,
'@/api/project/node';
import {
  getTaskCompleteStatisticsApi,
  getTaskAchieveStatisticsApi,
  getPerformanceCompleteStatisticsApi,
  getUserDifficultyStatisticsApi,
  getUserTaskCompleteStatisticsApi,
} from '@/api/project/task';
// import ProjectSelect from '@/components/common/projectSelect/index.vue';
import { useDict } from '@/utils/useDict';
import { TASK_CALCULATE_STATUS_OPTIONS } from '@/utils/enum/task';
import { getThemeColor } from '@/utils/theme';

const { TASK_EXE_STATUS, DIFFICULTY_COEFFICIENT } = useDict(
  'TASK_EXE_STATUS',
  'DIFFICULTY_COEFFICIENT'
);
const taskCalculateStatusLegendData = TASK_CALCULATE_STATUS_OPTIONS.map((item) => ({
  name: item.label,
}));
const taskExeStatusLegendData = TASK_EXE_STATUS.value.A.map((item: any) => {
  return {
    name: item.label,
  };
});

interface Props {
  projectUuid: string;
}

const props = withDefaults(defineProps<Props>(), {
  projectUuid: '',
});

const currentProjectUuid = ref('');
watchEffect(() => {
  if (props.projectUuid) {
    currentProjectUuid.value = props.projectUuid;
  }
});

// const userGroupOptions = ref<any>([]);

// const disciplineOptions = ref<any>([]);

// const projectStorageSpaceStatisticsFormData = ref<any>({

//   userId: '',
// });
// const userProjectChartRef = ref();

// 进度状态颜色列表：已驳回、未开始、进行中、已完成、已暂停、已关闭、已延期
const statusColorList = [
  getThemeColor('--el-color-danger'),
  'rgb(200, 201, 204)',
  getThemeColor('--el-color-primary'),
  getThemeColor('--el-color-success'),
  getThemeColor('--el-color-warning'),
  'rgb(222, 223, 224)',
  'rgb(250, 182, 182)',
];
// 完成情况颜色列表：未分析、不合格、合格
const completionStatusColorList = [
  getThemeColor('--el-color-info'),
  getThemeColor('--el-color-danger'),
  getThemeColor('--el-color-success'),
];
const difficultyCountColorList = [
  '#67c23a',
  'rgb(179, 225, 157)',
  'rgb(248, 227, 197)',
  'rgb(243, 209, 158)',
  'rgb(248, 152, 152)',
  '#f56c6c',
];
// 封装方法，根据对象的某个属性对对象数组进行排序 升序
const sortObjectArray = (arr: any, key: any) => {
  return arr.sort((a: any, b: any) => {
    return a[key] - b[key];
  });
};

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

//   return {
//     xData,
//     yData,
//   };
// };
// const initUserProjectStatistics = async () => {
//   const { xData, yData } = await getUserGroupProjectStatistics();

//   userProjectChartRef.value.commonChartRef.disposeEchartsByKey('chart-1');
//   userProjectChartRef.value.commonChartRef.option = {
//     title: {
//       show: false,
//     },
//     tooltip: {
//       trigger: 'axis',
//     },
//     legend: {
//       show: false,
//       top: '0%',
//       left: 'center',
//     },
//     grid: {
//       top: '10%',
//       bottom: '10%',
//       left: '5%',
//       right: '5%',
//     },
//     xAxis: {
//       type: 'category',
//       data: xData,
//     },
//     yAxis: {
//       type: 'value',
//       minInterval: 1,
//     },
//     dataZoom:
//       xData.length > 4
//         ? [
//             {
//               type: 'slider',
//               show: true,
//               xAxisIndex: [0],
//               start: 0,
//               end: 100,
//               textStyle: {
//                 color: 'transparent',
//               },
//               maxValueSpan: 4,
//               minValueSpan: 4,
//               moveHandleSize: 10,
//               height: 0,
//               filterMode: 'empty',
//               bottom: 15,
//             },
//           ]
//         : null,
//     series: [
//       {
//         type: 'bar',
//         barWidth: '30%',
//         data: yData,
//       },
//     ],
//   };
//   userProjectChartRef.value.commonChartRef.initChart();
// };

const userTaskCompleteChartRef = ref();

// const userTaskCompleteFormData = ref<any>({
//   userGroupId: '',
//   userId: '',
//   tag1: '',
//   tag2: '',
// });
// const userTaskCompleteProjectChangeFun = async () => {
//   await queryUserTaskCompletion();
// };
const getUserTaskCompleteStatistics = async () => {
  const xData: any = [];
  const seriesData: any = [];
  const res: any = await getUserTaskCompleteStatisticsApi({
    tag1: currentProjectUuid.value,
  });
  if (res.code === 200) {
    res.data.result.forEach((item: any) => {
      xData.push(item.userName);
    });

    for (let i = 0; i < TASK_EXE_STATUS.value.A.length; i++) {
      const item = TASK_EXE_STATUS.value.A[i];
      const obj: any = {
        name: item.label,
        type: 'bar',
        barWidth: '30%',
        stack: 'total',
        emphasis: {
          focus: 'series',
        },
        data: [],
        label: {
          show: true,
          formatter: function (params: { value: any }) {
            // 当值为0时返回空字符串
            return params.value === 0 ? '' : params.value;
          },
        },
      };

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

      seriesData.push(obj);
    }
  }
  return {
    xData,
    seriesData,
  };
};
const queryUserTaskCompletion = async () => {
  const { xData, seriesData } = await getUserTaskCompleteStatistics();
  userTaskCompleteChartRef.value.commonChartRef.disposeEchartsByKey('chart-2');
  userTaskCompleteChartRef.value.commonChartRef.option = {
    color: statusColorList,
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      show: true,
      top: '0%',
      left: 'center',
      data: taskExeStatusLegendData,
    },
    grid: {
      top: '10%',
      bottom: '50',
      left: '5%',
      right: '5%',
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
    },
    dataZoom: xData.length > 5 ? [] : null,
    series: seriesData,
  };
  userTaskCompleteChartRef.value.commonChartRef.initChart();
};

// const userDifficultyCoefficientFormData = reactive<any>({
//   userGroupId: '',
//   userId: '',
//   tag1: '',
//   tag2: '',
// });
const getDifficultyLevel = (difficulty: number) => {
  const str = DIFFICULTY_COEFFICIENT.value.O[difficulty];
  return str ? str : '难度系数';
};
const userDifficultyCoefficientChartRef = ref();
const queryUserDifficultStatistics = async () => {
  let xData: any = [];
  let titles: any = [];
  const seriesData: any = [];

  const res: any = await getUserDifficultyStatisticsApi({
    tag1: currentProjectUuid.value,
    tag2: '',
    tag3: '',
    tag4: '',
    tag5: '',
    tag6: '',
    tag7: '',
    tag8: '',
    tag9: '',
    tag10: '',
  });

  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]);
      }

      seriesData.push(obj);
    }
  }

  userDifficultyCoefficientChartRef.value.commonChartRef.disposeEchartsByKey('chart-3');
  userDifficultyCoefficientChartRef.value.commonChartRef.option = {
    color: 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',
      minInterval: 1,
    },
    dataZoom: xData.length > 5 ? [] : null,
    // series: seriesData,
    series: sortObjectArray(seriesData, 'coefficient'),
  };
  userDifficultyCoefficientChartRef.value.commonChartRef.initChart();
};

const taskCompletionAtWorkstationsChartRef = ref();
// const taskCompletionAtWorkstationsFormData = reactive<any>({
//   tag1: '',
// });
const queryTaskCompletionByWorkspace = async () => {
  let xData: any = [];
  const seriesData: any = [];
  const res: any = await getTaskCompleteStatisticsApi({
    resultTagType: 'tag4',
    tag1: currentProjectUuid.value,
    tag2: '',
    tag3: '',
    tag4: '',
    tag5: '',
    tag6: '',
    tag7: '',
    tag8: '',
    tag9: '',
    tag10: '',
  });

  if (res && res.code === 200) {
    xData = res.data.result.map((item: any) => {
      return item.name;
    });
    for (let i = 0; i < TASK_EXE_STATUS.value.A.length; i++) {
      const item = TASK_EXE_STATUS.value.A[i];
      const obj: any = {
        name: item.label,
        type: 'bar',
        emphasis: {
          focus: 'series',
        },
        data: [],
      };

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

      seriesData.push(obj);
    }
  }
  taskCompletionAtWorkstationsChartRef.value.commonChartRef.disposeEchartsByKey('chart-4');
  taskCompletionAtWorkstationsChartRef.value.commonChartRef.option = {
    color: statusColorList,
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      top: '0%',
      left: 'center',
      data: taskExeStatusLegendData,
    },
    grid: {
      top: '10%',
      bottom: '10%',
      left: '5%',
      right: '5%',
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
    },
    dataZoom:
      xData.length > 4
        ? [
            {
              type: 'slider',
              show: true,
              xAxisIndex: [0],
              start: 0,
              end: 100,
              textStyle: {
                color: 'transparent',
              },
              maxValueSpan: 4,
              minValueSpan: 4,
              moveHandleSize: 10,
              height: 0,
              filterMode: 'empty',
              bottom: 15,
            },
          ]
        : null,
    series: seriesData,
  };
  taskCompletionAtWorkstationsChartRef.value.commonChartRef.initChart();
};

// const initTaskCompletionAtDisciplineFormData = reactive<any>({
//   tag1: '',
// });

const taskCompletionAtDisciplineChartRef = ref();
const queryTaskCompletionByDiscipline = async () => {
  let xData: any = [];
  const seriesData: any = [];
  const res: any = await getTaskCompleteStatisticsApi({
    resultTagType: 'tag6',
    tag1: currentProjectUuid.value,
    tag2: '',
    tag3: '',
    tag4: '',
    tag5: '',
    tag6: '',
    tag7: '',
    tag8: '',
    tag9: '',
    tag10: '',
  });

  if (res && res.code === 200) {
    xData = res.data.result.map((item: any) => {
      return item.name;
    });

    for (let i = 0; i < TASK_EXE_STATUS.value.A.length; i++) {
      const item = TASK_EXE_STATUS.value.A[i];
      const obj: any = {
        name: item.label,
        type: 'bar',
        emphasis: {
          focus: 'series',
        },
        data: [],
      };

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

      seriesData.push(obj);
    }
  }

  taskCompletionAtDisciplineChartRef.value.commonChartRef.disposeEchartsByKey('chart-5');
  taskCompletionAtDisciplineChartRef.value.commonChartRef.option = {
    color: statusColorList,
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      top: '0%',
      left: 'center',
      data: taskExeStatusLegendData,
    },
    grid: {
      top: '10%',
      bottom: '10%',
      left: '5%',
      right: '5%',
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
    },
    dataZoom:
      xData.length > 4
        ? [
            {
              type: 'slider',
              show: true,
              xAxisIndex: [0],
              start: 0,
              end: 100,
              textStyle: {
                color: 'transparent',
              },
              maxValueSpan: 4,
              minValueSpan: 4,
              moveHandleSize: 10,
              height: 0,
              filterMode: 'empty',
              bottom: 15,
            },
          ]
        : null,
    series: seriesData,
  };
  taskCompletionAtDisciplineChartRef.value.commonChartRef.initChart();
};

// 新增 任务达成统计 —— 工位
const taskQualityAtWorkstationsChartRef = ref();
const queryTaskQualityByWorkspace = async () => {
  let xData: any = [];
  const seriesData: any = [];
  const res: any = await getTaskAchieveStatisticsApi({
    resultTagType: 'tag4',
    tag1: currentProjectUuid.value,
    tag2: '',
    tag3: '',
    tag4: '',
    tag5: '',
    tag6: '',
    tag7: '',
    tag8: '',
    tag9: '',
    tag10: '',
  });

  if (res && res.code === 200) {
    xData = res.data.result.map((item: any) => {
      return item.name;
    });

    for (let i = 0; i < TASK_CALCULATE_STATUS_OPTIONS.length; i++) {
      const item = TASK_CALCULATE_STATUS_OPTIONS[i];
      const obj: any = {
        name: item.label,
        type: 'bar',
        emphasis: {
          focus: 'series',
        },
        data: [],
      };

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

      seriesData.push(obj);
    }
  }
  taskQualityAtWorkstationsChartRef.value.commonChartRef.disposeEchartsByKey('chart-Quality-1');
  taskQualityAtWorkstationsChartRef.value.commonChartRef.option = {
    // color: ['#808080', '#de4231', '#37a93d'],
    color: completionStatusColorList,
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      show: true,
      top: '0%',
      left: 'center',
      data: taskCalculateStatusLegendData,
    },
    grid: {
      top: '10%',
      bottom: '10%',
      left: '5%',
      right: '5%',
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
    },
    dataZoom:
      xData.length > 4
        ? [
            {
              type: 'slider',
              show: true,
              xAxisIndex: [0],
              start: 0,
              end: 100,
              textStyle: {
                color: 'transparent',
              },
              maxValueSpan: 4,
              minValueSpan: 4,
              moveHandleSize: 10,
              height: 0,
              filterMode: 'empty',
              bottom: 15,
            },
          ]
        : null,
    series: seriesData,
  };
  taskQualityAtWorkstationsChartRef.value.commonChartRef.initChart();
};

const performanceCompletionAtWorkstationsChartRef = ref();

// const queryPerfCompletionByWorkspaceFormData = reactive<any>({
//   tag1: '',
// });

const queryPerfCompletionByWorkspace = async () => {
  let xData: any = [];
  const seriesData: any = [];
  const res: any = await getPerformanceCompleteStatisticsApi({
    resultTagType: 'tag4',
    tag1: currentProjectUuid.value,
    tag2: '',
    tag3: '',
    tag4: '',
    tag5: '',
    tag6: '',
    tag7: '',
    tag8: '',
    tag9: '',
    tag10: '',
  });

  if (res && res.code === 200) {
    xData = res.data.result.map((item: any) => {
      return item.name;
    });

    for (let i = 0; i < TASK_CALCULATE_STATUS_OPTIONS.length; i++) {
      const item = TASK_CALCULATE_STATUS_OPTIONS[i];
      const obj: any = {
        name: item.label,
        type: 'bar',
        emphasis: {
          focus: 'series',
        },
        data: [],
      };

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

      seriesData.push(obj);
    }
  }
  if (
    !performanceCompletionAtWorkstationsChartRef.value ||
    !performanceCompletionAtWorkstationsChartRef.value.commonChartRef
  )
    return;
  performanceCompletionAtWorkstationsChartRef.value.commonChartRef.disposeEchartsByKey('chart-6');
  performanceCompletionAtWorkstationsChartRef.value.commonChartRef.option = {
    // color: ['#808080', '#de4231', '#37a93d'],
    color: completionStatusColorList,
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      show: true,
      top: '0%',
      left: 'center',
      data: taskCalculateStatusLegendData,
    },
    grid: {
      top: '10%',
      bottom: '10%',
      left: '5%',
      right: '5%',
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
    },
    dataZoom:
      xData.length > 4
        ? [
            {
              type: 'slider',
              show: true,
              xAxisIndex: [0],
              start: 0,
              end: 100,
              textStyle: {
                color: 'transparent',
              },
              maxValueSpan: 4,
              minValueSpan: 4,
              moveHandleSize: 10,
              height: 0,
              filterMode: 'empty',
              bottom: 15,
            },
          ]
        : null,
    series: seriesData,
  };
  performanceCompletionAtWorkstationsChartRef.value.commonChartRef.initChart();
};

// 新增 任务达成统计 —— 学科
const taskQualityAtDisciplineChartRef = ref();
const queryTaskQualityByDiscipline = async () => {
  let xData: any = [];
  const seriesData: any = [];
  const res: any = await getTaskAchieveStatisticsApi({
    resultTagType: 'tag6',
    tag1: currentProjectUuid.value,
    tag2: '',
    tag3: '',
    tag4: '',
    tag5: '',
    tag6: '',
    tag7: '',
    tag8: '',
    tag9: '',
    tag10: '',
  });

  if (res && res.code === 200) {
    xData = res.data.result.map((item: any) => {
      return item.name;
    });

    for (let i = 0; i < TASK_CALCULATE_STATUS_OPTIONS.length; i++) {
      const item = TASK_CALCULATE_STATUS_OPTIONS[i];
      const obj: any = {
        name: item.label,
        type: 'bar',
        emphasis: {
          focus: 'series',
        },
        data: [],
      };

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

      seriesData.push(obj);
    }
  }

  taskQualityAtDisciplineChartRef.value.commonChartRef.disposeEchartsByKey('chart-Quality-2');
  taskQualityAtDisciplineChartRef.value.commonChartRef.option = {
    // color: ['#808080', '#de4231', '#37a93d'],
    color: completionStatusColorList,
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      show: true,
      top: '0%',
      left: 'center',
      data: taskCalculateStatusLegendData,
    },
    grid: {
      top: '10%',
      bottom: '10%',
      left: '5%',
      right: '5%',
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
    },
    dataZoom:
      xData.length > 4
        ? [
            {
              type: 'slider',
              show: true,
              xAxisIndex: [0],
              start: 0,
              end: 100,
              textStyle: {
                color: 'transparent',
              },
              maxValueSpan: 4,
              minValueSpan: 4,
              moveHandleSize: 10,
              height: 0,
              filterMode: 'empty',
              bottom: 15,
            },
          ]
        : null,
    series: seriesData,
  };
  taskQualityAtDisciplineChartRef.value.commonChartRef.initChart();
};

const performanceCompletionAtDisciplineChartRef = ref();

// const queryPerfCompletionByDisciplineFormData = reactive<any>({
//   tag1: '',
// });

const queryPerfCompletionByDiscipline = async () => {
  let xData: any = [];
  const seriesData: any = [];
  const res: any = await getPerformanceCompleteStatisticsApi({
    resultTagType: 'tag6',
    tag1: currentProjectUuid.value,
    tag2: '',
    tag3: '',
    tag4: '',
    tag5: '',
    tag6: '',
    tag7: '',
    tag8: '',
    tag9: '',
    tag10: '',
  });

  if (res && res.code === 200) {
    xData = res.data.result.map((item: any) => {
      return item.name;
    });

    for (let i = 0; i < TASK_CALCULATE_STATUS_OPTIONS.length; i++) {
      const item = TASK_CALCULATE_STATUS_OPTIONS[i];
      const obj: any = {
        name: item.label,
        type: 'bar',
        emphasis: {
          focus: 'series',
        },
        data: [],
      };

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

      seriesData.push(obj);
    }
  }
  if (
    !performanceCompletionAtDisciplineChartRef.value ||
    !performanceCompletionAtDisciplineChartRef.value.commonChartRef
  )
    return;
  performanceCompletionAtDisciplineChartRef.value.commonChartRef.disposeEchartsByKey('chart-7');
  performanceCompletionAtDisciplineChartRef.value.commonChartRef.option = {
    // color: ['#808080', '#de4231', '#37a93d'],
    color: completionStatusColorList,
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      show: true,
      top: '0%',
      left: 'center',
      data: taskCalculateStatusLegendData,
    },
    grid: {
      top: '10%',
      bottom: '10%',
      left: '5%',
      right: '5%',
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
    },
    dataZoom:
      xData.length > 4
        ? [
            {
              type: 'slider',
              show: true,
              xAxisIndex: [0],
              start: 0,
              end: 100,
              textStyle: {
                color: 'transparent',
              },
              maxValueSpan: 4,
              minValueSpan: 4,
              moveHandleSize: 10,
              height: 0,
              filterMode: 'empty',
              bottom: 15,
            },
          ]
        : null,
    series: seriesData,
  };
  performanceCompletionAtDisciplineChartRef.value.commonChartRef.initChart();
};

// const userProjectFromData = ref<any>({
//   userGroupId: '',
//   userId: '',
// });
// const getGroupList = async () => {
//   const res: any = await userQueryGroupApi({
//     current: 1,
//     size: 1000,
//   });
//   if (res && res.code === 200) {
//     userGroupOptions.value = [];
//     res.data.data.forEach((item: any) => {
//       userGroupOptions.value.push({
//         label: item.groupName,
//         value: item.id,
//       });
//     });
//     if (userGroupOptions.value?.length) {
//       userProjectFromData.value.userGroupId = userGroupOptions.value[0].value;
//       userTaskCompleteFormData.value.userGroupId = userGroupOptions.value[0].value;
//       userDifficultyCoefficientFormData.userGroupId = userGroupOptions.value[0].value;
//     }
//   }
// };

// const getDisciplineOptionsFun = async () => {
//   queryNodeListApi({ current: 1, size: 999, nodeType: 'discipline', pid: null }).then(
//     (res: any) => {
//       if (res.code === 200) {
//         disciplineOptions.value = res.data.data.map((item: any) => {
//           return {
//             label: item.nodeName,
//             value: item.id,
//           };
//         });
//       }
//     }
//   );
// };
const initData = async () => {
  // await getGroupList();
  // await getDisciplineOptionsFun();

  // 按工位仿真任务达成统计：传项目id，工位id，查各个工位下任务的状态  完成、进行中、驳回等
  await queryTaskCompletionByWorkspace();
  // 按学科仿真任务达成统计：传项目id，学科id，查各个学科下任务的状态  完成、进行中、驳回等
  await queryTaskCompletionByDiscipline();
  // 按学科仿真指标达成统计：传项目id，学科id，查各个学科下任务的指标的达成状态  合格、不合格、未分析
  await queryPerfCompletionByWorkspace();
  // 按工位仿真指标达成统计：传项目id，学科id，查各个学科下任务的指标的达成状态  合格、不合格、未分析
  await queryPerfCompletionByDiscipline();
  // 成员任务进度统计：传项目id，查各个人完成和未完成的任务数量
  await queryUserTaskCompletion();
  // 难度系数统计：难度系数有1、2、3、4、5，统计1有几个，2有几个。。。
  await queryUserDifficultStatistics();

  // 新增
  // 按照工位统计任务质量达成情况
  await queryTaskQualityByWorkspace();
  // 按照学科统计任务质量达成情况
  await queryTaskQualityByDiscipline();
};
watchEffect(() => {
  if (props.projectUuid) {
    initData();
  }
});
onMounted(async () => {});
</script>
<style lang="scss" scoped>
.gl-page-content-grey-full {
  overflow: auto;

  .content {
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    overflow: auto;

    .margin-style {
      width: 100% !important;
    }

    .chart-box {
      width: calc(50% - 8px);
      height: 400px;
      position: relative;

      .el-form {
        width: 100%;
        display: flex;
        justify-content: flex-end;

        .el-form-item {
          margin-bottom: 0 !important;
          margin-right: 0 !important;

          .el-select {
            width: 215px;
          }

          .select-width {
            width: 90px !important;
          }

          .margin-right-12 {
            margin-right: 12px;
          }
        }
      }

      .chart-item {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
