<template>
  <div class="gl-page-content-grey-full">
    <div class="content">
      <div class="chart-box">
        <EchartCard title="用户组项目统计" ref="userProjectChartRef" :charts-id="'chart-1'" :bar-type="'barChart'">
          <template #formSlot>
            <el-form :model="userProjectFromData" :inline="true">
              <el-form-item label="用户组">
                <el-select
                  v-model="userProjectFromData.userGroupId"
                  class="margin-right-12"
                  @change="changeUserGroupProjectFun"
                >
                  <el-option
                    v-for="item in userGroupOptions"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  ></el-option>
                </el-select>
                <el-form-item label="用户">
                  <UserSelect v-model="userProjectFromData.userId" @change="changeUserGroupProjectFun" />
                </el-form-item>
              </el-form-item>
            </el-form>
          </template>
        </EchartCard>
      </div>
      <div class="chart-box">
        <EchartCard title="用户组任务完成情况统计" ref="userTaskCompleteChartRef" :charts-id="'chart-2'" :bar-type="'barChart'">
          <template #formSlot>
            <el-form :inline="true">
              <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="项目">
                <!-- <el-select clearable class="select-width margin-right-12">
                  <el-option v-for="item in projectOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select> -->
                <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="用户组难度系数统计"
          ref="userDifficultyCoefficientChartRef"
          :charts-id="'chart-3'"
          :bar-type="'barChart'"
        >
          <template #formSlot>
            <el-form :inline="true">
              <el-form-item label="用户组">
                <el-select
                  clearable
                  class="select-width margin-right-12"
                  v-model="userDifficultyCoefficientFormData.userGroupId"
                  @change="initUserDifficultyCoefficientStatistics"
                >
                  <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="initUserDifficultyCoefficientStatistics"
                />
                <!-- <el-select clearable class="select-width margin-right-12" v-model="userDifficultyCoefficientFormData.tag1" @change="initUserDifficultyCoefficientStatistics">
                  <el-option v-for="item in projectOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select> -->
              </el-form-item>
              <el-form-item label="学科">
                <el-select
                  clearable
                  class="select-width margin-right-12"
                  v-model="userDifficultyCoefficientFormData.tag2"
                  @change="initUserDifficultyCoefficientStatistics"
                >
                  <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="initUserDifficultyCoefficientStatistics"
                />
              </el-form-item>
            </el-form>
          </template>
        </EchartCard>
      </div>
      <div class="chart-box">
        <EchartCard
          title="任务完成统计（工位）"
          ref="taskCompletionAtWorkstationsChartRef"
          :charts-id="'chart-4'"
          :bar-type="'barChart'"
        >
          <template #formSlot>
            <el-form :inline="true">

              <el-form-item label="项目">
                <ProjectSelect
                  class="select-width margin-right-12"
                  v-model="taskCompletionAtWorkstationsFormData.tag1"
                  @change="initTaskCompletionAtWorkstations"
                />
                <!-- <el-select clearable class="select-width">
                  <el-option v-for="item in projectOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select> -->
              </el-form-item>
            </el-form>
          </template>
        </EchartCard>
      </div>
      <div class="chart-box">
        <EchartCard
          title="任务完成统计（学科）"
          ref="taskCompletionAtDisciplineChartRef"
          :charts-id="'chart-5'"
          :bar-type="'barChart'"
        >
          <template #formSlot>
            <el-form :inline="true">
              <el-form-item label="项目">
                <ProjectSelect
                  class="select-width margin-right-12"
                  v-model="initTaskCompletionAtDisciplineFormData.tag1"
                  @change="initTaskCompletionAtDiscipline"
                />

                <!-- <el-select clearable class="select-width">
                  <el-option v-for="item in projectOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select> -->
              </el-form-item>

            </el-form>
          </template>
        </EchartCard>
      </div>
      <div class="chart-box">
        <EchartCard
          title="指标完成统计（工位）"
          ref="performanceCompletionAtWorkstationsChartRef"
          :charts-id="'chart-6'"
          :bar-type="'barChart'"
        >
          <template #formSlot>
            <el-form :inline="true">
              <el-form-item label="项目">

                <ProjectSelect
                  class="select-width margin-right-12"
                  v-model="initPerformanceCompletionAtWorkstationsFormData.tag1"
                  @change="initPerformanceCompletionAtWorkstations"
                />
                <!-- <el-select clearable class="select-width">
                  <el-option v-for="item in projectOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select> -->
              </el-form-item>

            </el-form>
          </template>
        </EchartCard>
      </div>
      <div class="chart-box">
        <EchartCard
          title="指标完成统计（学科）"
          ref="performanceCompletionAtDisciplineChartRef"
          :charts-id="'chart-7'"
          :bar-type="'barChart'"
        >
          <template #formSlot>
            <el-form :inline="true">
              <el-form-item label="项目">
                <ProjectSelect
                  class="select-width margin-right-12"
                  v-model="initPerformanceCompletionAtDisciplineFormData.tag1"
                  @change="initPerformanceCompletionAtDiscipline"
                />
                <!-- <el-select clearable class="select-width">
                  <el-option v-for="item in projectOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select> -->
              </el-form-item>

            </el-form>
          </template>
        </EchartCard>
      </div>
      <div class="chart-box ">
        <EchartCard title="工位评审通过统计" ref="reviewPassedChartRef" :charts-id="'chart-8'" :bar-type="'barChart'">
          <template #formSlot>
            <el-form :inline="true">
              <el-form-item label="项目">
                <!-- <el-select clearable class="select-width margin-right-12">
                  <el-option v-for="item in projectOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select> -->

                <ProjectSelect
                  class="select-width margin-right-12"
                  v-model="reviewPassedChartFormData.tag1"
                  @change="reviewPassedChangeFun"
                />
              </el-form-item>
              <el-form-item label="学科">

                <el-select
                  v-model="reviewPassedChartFormData.tag2"
                  clearable
                  class="select-width margin-right-12"
                  @change="reviewPassedChangeFun"
                >
                  <el-option
                    v-for="item in disciplineOptions"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  ></el-option>
                </el-select>

                <!-- <el-select clearable class="select-width" >
                  <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>
          </template>
        </EchartCard>
      </div>
      <!-- <div class="chart-box ">
        <EchartCard
          title="工位异常统计"
          ref="abnormalWorkstationChartRef"
          :charts-id="'chart-9'"
          :bar-type="'pieChart'"
        >
          <template #formSlot>
            <el-form :inline="true">
              <el-form-item label="项目" >
                <el-select clearable class="select-width margin-right-12">
                  <el-option v-for="item in projectOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="学科" >
                <el-select clearable class="select-width" >
                  <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>
          </template>
        </EchartCard>
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } 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 { getUserGroupProjectStatisticsApi, getUserGroupTaskCompleteStatisticsApi, queryNodeListApi, getWorkstationReviewStatisticsApi, getUserGroupDifficultyStatisticsApi, getCommonCompleteStatisticsApi } from '@/api/project/node';
import ProjectSelect from '@/components/common/projectSelect/index.vue';

const userGroupOptions = ref<any>([

]);

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

// const projectStorageSpaceStatisticsFormData = ref<any>({

//   userId: '',
// });
const userProjectChartRef = ref();
const changeUserGroupProjectFun = async () => {
  await initUserProjectStatistics();
};

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',
    },
    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 initUserTaskComplete();
};
const getUserGroupTaskCompleteStatistics = async () => {
  const xData: any = [];
  let legendData: any = [];
  let seriesData: any = [];
  const res: any = await getUserGroupTaskCompleteStatisticsApi({ ...userTaskCompleteFormData.value });
  if (res.code === 200) {
    legendData = res.data.allExeStatus;
    seriesData = legendData.map((item: any) => {
      return {
        name: item,
        type: 'bar',
        barWidth: '30%',
        stack: 'total',
        data: [],
        label: {
          show: true,
          // formatter: (params:any) => params.value + '个',
        },
      };
    });
    res.data.result.forEach((item: any) => {
      xData.push(item.userName);
      for (const key in item.statusCount) {
        seriesData.forEach((seriesItem: any) => {
          if (seriesItem.name === key) {
            seriesItem.data.push(item.statusCount[key]);
          }
        });
      }
    });
  }
  return {
    xData,
    seriesData,
    legendData,
  };
};
const initUserTaskComplete = async () => {
  const { xData, seriesData, legendData } = await getUserGroupTaskCompleteStatistics();

  // 模拟接口延时
  userTaskCompleteChartRef.value.commonChartRef.disposeEchartsByKey('chart-2');
  userTaskCompleteChartRef.value.commonChartRef.option = {
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      show: true,
      top: '0%',
      left: 'center',
      data: legendData,
    },
    grid: {
      top: '10%',
      bottom: '10%',
      left: '5%',
      right: '5%',
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
    },
    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,
  };
  userTaskCompleteChartRef.value.commonChartRef.initChart();
};

const userDifficultyCoefficientFormData = reactive<any>({
  userGroupId: '',
  userId: '',
  tag1: '',
  tag2: '',
});
const userDifficultyCoefficientChartRef = ref();
const initUserDifficultyCoefficientStatistics = async () => {
  let xData: any = [];
  // const yData:any = [1, 2, 3, 4];
  let titles: any = [];
  const seriesData: any = [];

  const res: any = await getUserGroupDifficultyStatisticsApi({
    userGroupId: userDifficultyCoefficientFormData.userGroupId,
    userId: userDifficultyCoefficientFormData.userId,
    tag1: userDifficultyCoefficientFormData.tag1,
    tag2: userDifficultyCoefficientFormData.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: 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 = {
    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: '10%',
      left: '5%',
      right: '5%',
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
    },
    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,
  };
  userDifficultyCoefficientChartRef.value.commonChartRef.initChart();
};

const taskCompletionAtWorkstationsChartRef = ref();

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

const initTaskCompletionAtWorkstations = async () => {
  let xData: any = ['工位1', '工位2', '工位3', '工位4'];
  // const yData:any = [20, 30, 40, 50, 60, 70, 80, 90];
  // 模拟接口延时
  // const yData:any = [1, 2, 3, 4];
  let titles: any = [];
  const seriesData: any = [];

  const res: any = await getCommonCompleteStatisticsApi({
    queryType: 'task',
    resultTagType: 'tag1',
    tag1: taskCompletionAtWorkstationsFormData.tag1,
    tag2: '',
    tag3: '',
    tag4: '',
    tag5: '',
    tag6: '',
    tag7: '',
    tag8: '',
    tag9: '',
    tag10: '',
  });

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

    titles = res.data.allExeStatus;

    for (let i = 0; i < titles.length; i++) {

      const str = titles[i];
      const obj: any = {
        name: 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]);

      }

      seriesData.push(obj);
    }
  }

  taskCompletionAtWorkstationsChartRef.value.commonChartRef.disposeEchartsByKey('chart-4');
  taskCompletionAtWorkstationsChartRef.value.commonChartRef.option = {
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      top: '0%',
      left: 'center',
      data: titles,
    },
    grid: {
      top: '10%',
      bottom: '10%',
      left: '5%',
      right: '5%',
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
    },
    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 initTaskCompletionAtDiscipline = async () => {
  let xData: any = ['学科1', '学科2', '学科3', '学科4'];
  // const yData:any = [20, 30, 40, 50, 60, 70, 80, 90];
  // 模拟接口延时

  // const yData:any = [1, 2, 3, 4];
  let titles: any = [];
  const seriesData: any = [];

  const res: any = await getCommonCompleteStatisticsApi({
    queryType: 'task',
    resultTagType: 'tag2',
    tag1: initTaskCompletionAtDisciplineFormData.tag1,
    tag2: '',
    tag3: '',
    tag4: '',
    tag5: '',
    tag6: '',
    tag7: '',
    tag8: '',
    tag9: '',
    tag10: '',
  });

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

    titles = res.data.allExeStatus;

    for (let i = 0; i < titles.length; i++) {

      const str = titles[i];
      const obj: any = {
        name: 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]);

      }

      seriesData.push(obj);
    }
  }

  taskCompletionAtDisciplineChartRef.value.commonChartRef.disposeEchartsByKey('chart-5');
  taskCompletionAtDisciplineChartRef.value.commonChartRef.option = {
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      top: '0%',
      left: 'center',
      data: titles,
    },
    grid: {
      top: '10%',
      bottom: '10%',
      left: '5%',
      right: '5%',
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
    },
    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 performanceCompletionAtWorkstationsChartRef = ref();

const initPerformanceCompletionAtWorkstationsFormData = reactive<any>({
  tag1: '',

});

const initPerformanceCompletionAtWorkstations = async () => {
  let xData: any = ['工位1', '工位2', '工位3', '工位4'];
  // const yData:any = [20, 30, 40, 50, 60, 70, 80, 90];
  // 模拟接口延时
  let titles: any = [];
  const seriesData: any = [];

  const res: any = await getCommonCompleteStatisticsApi({
    queryType: 'performance',
    resultTagType: 'tag1',
    tag1: initPerformanceCompletionAtWorkstationsFormData.tag1,
    tag2: '',
    tag3: '',
    tag4: '',
    tag5: '',
    tag6: '',
    tag7: '',
    tag8: '',
    tag9: '',
    tag10: '',
  });

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

    titles = res.data.allExeStatus;

    for (let i = 0; i < titles.length; i++) {

      const str = titles[i];
      const obj: any = {
        name: 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]);

      }

      seriesData.push(obj);
    }
  }
  performanceCompletionAtWorkstationsChartRef.value.commonChartRef.disposeEchartsByKey('chart-6');
  performanceCompletionAtWorkstationsChartRef.value.commonChartRef.option = {
    color: ['#37a93d', '#de4231', '#808080'],
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      show: true,
      top: '0%',
      left: 'center',
      data: titles,
    },
    grid: {
      top: '10%',
      bottom: '10%',
      left: '5%',
      right: '5%',
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
    },
    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 performanceCompletionAtDisciplineChartRef = ref();
const initPerformanceCompletionAtDisciplineFormData = reactive<any>({
  tag1: '',
});

const initPerformanceCompletionAtDiscipline = async () => {
  // const xData:any = ['学科1', '学科2', '学科3', '学科4'];
  // const yData:any = [20, 30, 40, 50, 60, 70, 80, 90];
  // 模拟接口延时

  let xData: any = ['工位1', '工位2', '工位3', '工位4'];
  // const yData:any = [20, 30, 40, 50, 60, 70, 80, 90];
  // 模拟接口延时
  let titles: any = [];
  const seriesData: any = [];

  const res: any = await getCommonCompleteStatisticsApi({
    queryType: 'performance',
    resultTagType: 'tag2',
    tag1: initPerformanceCompletionAtDisciplineFormData.tag1,
    tag2: '',
    tag3: '',
    tag4: '',
    tag5: '',
    tag6: '',
    tag7: '',
    tag8: '',
    tag9: '',
    tag10: '',
  });

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

    titles = res.data.allExeStatus;

    for (let i = 0; i < titles.length; i++) {

      const str = titles[i];
      const obj: any = {
        name: 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]);

      }

      seriesData.push(obj);
    }
  }

  performanceCompletionAtDisciplineChartRef.value.commonChartRef.disposeEchartsByKey('chart-7');
  performanceCompletionAtDisciplineChartRef.value.commonChartRef.option = {
    color: ['#37a93d', '#de4231', '#808080'],
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      show: true,
      top: '0%',
      left: 'center',
      data: titles,
    },
    grid: {
      top: '10%',
      bottom: '10%',
      left: '5%',
      right: '5%',
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
    },
    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 reviewPassedChartRef = ref();

const reviewPassedChartFormData = reactive<any>({
  tag1: '',
  tag2: '',
});

const reviewPassedChangeFun = () => {
  initReviewPassed();
};

const initReviewPassed = async () => {
  let xData: any = [];
  let titles: any = [];
  const seriesData: any = [];
  const res: any = await getWorkstationReviewStatisticsApi({
    resultTagType: 'tag1',
    tag1: reviewPassedChartFormData.tag1,
    tag2: reviewPassedChartFormData.tag2,
    tag3: '',
    tag4: '',
    tag5: '',
    tag6: '',
    tag7: '',
    tag8: '',
    tag9: '',
    tag10: '',

  });

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

    titles = res.data.allApprovalStatus;

    for (let i = 0; i < titles.length; i++) {
      const obj: any = {
        name: 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);
    }

  }

  console.log(seriesData, 'seriesData');

  reviewPassedChartRef.value.commonChartRef.disposeEchartsByKey('chart-8');
  reviewPassedChartRef.value.commonChartRef.option = {
    color: ['#808080', '#b6d634', '#37a93d', '#de4231'],
    title: {

      textStyle: {
        fontSize: 20,
      },
      subtextStyle: {
        color: '#175ce5',
        fontSize: 15,
        fontWeight: 'bold',
      },
    },
    tooltip: {
      // trigger: 'item',
      // formatter: function (params:any) {
      //   return `${params.name} : ${params.value} 个 `;
      // },
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      top: '0%',
      left: 'center',
      data: titles,
    },
    grid: {
      top: '10%',
      bottom: '10%',
      left: '5%',
      right: '5%',
    },
    xAxis: [{
      type: 'category',
      data: xData,
    }],
    yAxis: [{
      type: 'value',

    }],
    series: seriesData,
  };
  reviewPassedChartRef.value.commonChartRef.initChart();
};

const abnormalWorkstationChartRef = ref();
const initAbnormalWorkstation = async () => {
  const xData: any = ['工位1', '工位2', '工位3', '工位4'];
  abnormalWorkstationChartRef.value.commonChartRef.disposeEchartsByKey('chart-9');
  abnormalWorkstationChartRef.value.commonChartRef.option = {
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params: any) {
        return `${params.name} : ${params.value} 个 `;
      },
    },
    legend: {
      top: '0%',
      left: 'center',
    },
    grid: {
      top: '10%',
      bottom: '10%',
      left: '5%',
      right: '5%',
    },
    series: [
      {
        // name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: xData.map((item: any, index: number) => {
          return {
            value: index + 1,
            name: item,

          };
        }),

      },
    ],
  };
  abnormalWorkstationChartRef.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,
        };
      });
    }
  });
};
onMounted(async () => {
  await getGroupList();
  await getDisciplineOptionsFun();

  await initUserProjectStatistics();
  await initUserTaskComplete();
  await initUserDifficultyCoefficientStatistics();
  await initTaskCompletionAtWorkstations();
  await initTaskCompletionAtDiscipline();
  await initPerformanceCompletionAtWorkstations();
  await initPerformanceCompletionAtDiscipline();
  await initReviewPassed();
  await initAbnormalWorkstation();
});
</script>
<style lang="scss" scoped>
.gl-page-content-grey-full {
  overflow: auto;

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

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

    .chart-box {
      width: calc(50% - 6px);
      min-width: 500px;
      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>
