<template>
  <view class="situation-item">
    <view class="situation-item-title">刷题统计</view>
    <view>
      <duration-select v-model:value="currentDuration" />

      <view class="summary-view">
        <qy-up-down-flat v-for="(item, index) in reviewQuestionsData" :key="index" :data="item" />
      </view>

      <view style="position: relative">
        <qy-echarts-circle
          html-id="review-questions-summary-correct-chart"
          :data="correctAndMistakeData"
          :height="420"
          :legen-visible="false"
        />
        <view class="correct-view">
          <view>{{ correctData.value }}%</view>
          <view>{{ correctData.name }}</view>
        </view>
      </view>
      <view style="margin-top: -120rpx">
        <view class="title-view">答题记录</view>
        <qy-echarts-line
          html-id="answer-questions-chart"
          :x-data="practiseData.xData"
          :y-data="practiseData.yData"
        />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import DurationSelect from '@/pages/inspector/student-detail/components/study-situation-report/duration-select.vue';
import { computed, inject, ref, watchEffect } from 'vue';
import dayjs from 'dayjs';
import { UpDownFlatState, UpDownFlatType } from '@/components/up-down-flat/index';
import type { StudySituationParam } from '@/types/inspector/studentDetail';
import { queryStudentWrongQuestion, queryVideoStudy } from '@/api/inspector/student-detail';

const studySituationParam = inject<StudySituationParam>('studySituationParam');
const currentDuration = ref<number>(0);
const wrongQuestionsData = ref<any>({});

const getState = (value: number) => {
  if (value > 0) {
    return UpDownFlatState.UP;
  } else if (value < 0) {
    return UpDownFlatState.DOWN;
  }
  return UpDownFlatState.FLAT;
};

const reviewQuestionsData = computed(() => {
  return [
    {
      title: '做题数',
      type: UpDownFlatType.NORMAL,
      value: [wrongQuestionsData.value.totalNum],
      unit: '道',
      state: getState(wrongQuestionsData.value.totalRatioNum),
    },
    {
      title: '产生错题数',
      type: UpDownFlatType.NORMAL,
      value: [wrongQuestionsData.value.errorNum],
      unit: '道',
      state: getState(wrongQuestionsData.value.errorRatioNum),
    },
    {
      title: '订正错题数',
      type: UpDownFlatType.NORMAL,
      value: [wrongQuestionsData.value.correctedNum],
      unit: '道',
      state: getState(wrongQuestionsData.value.correctedRatioNum),
    },
  ];
});

const correctAndMistakeData = computed(() => {
  return [
    {
      value: wrongQuestionsData.value.correctRate,
      name: '答题正确率',
      color: '#8979FF',
      labelVisible: false,
      labelPosition: 'center',
      labelFormatter: (param: any) => {
        return `${param.value}%\n${param.name}`;
      },
    },
    {
      value: 100 - wrongQuestionsData.value.correctRate,
      name: '答题错误率',
      color: '#E6E6E6',
      labelVisible: false,
    },
  ];
});

const correctData = computed(() => {
  return correctAndMistakeData.value.find(item => item.name === '答题正确率');
});

const practiseData = computed(() => {
  const recordVoList = wrongQuestionsData.value.recordVoList ?? [];
  const xData = recordVoList.map((item: any) => dayjs(item.studyDate).format('MM/DD'));
  const yData = [
    {
      name: '做题数',
      data: recordVoList.map((item: any) => item.totalQuestions),
    },
    {
      name: '产生错题数',
      data: recordVoList.map((item: any) => item.totalErrors),
    },
    {
      name: '订正错题数',
      data: recordVoList.map((item: any) => item.correctedErrors),
    },
  ];

  return {
    xData,
    yData,
  };
});

const queryData = async () => {
  if (!(currentDuration.value >= 0)) {
    return;
  }
  const { data } = await queryStudentWrongQuestion({
    ...studySituationParam.value,
    dateType: currentDuration.value,
  });
  wrongQuestionsData.value = data;
};

watchEffect(() => {
  const subjectId = studySituationParam.subjectId.value;
  if (!subjectId) {
    return;
  }
  queryData();
});
</script>

<style scoped lang="scss">
@import '@/styles/inspector/student-detail.scss';

.summary-view {
  display: flex;
  justify-content: space-between;

  .summary-view-item {
    width: 196rpx;
  }
}

.title-view {
  color: #000;
  text-align: center;
  font-size: 28rpx;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 50rpx 0 30rpx 0;
}

.correct-view {
  position: absolute;
  display: grid;
  width: 100%;
  height: 330rpx;
  top: 0;
  place-content: center;
  text-align: center;

  & > view:first-child {
    color: #333333;
    text-align: center;
    font-size: 32rpx;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  & > view:last-child {
    color: #666666;
    text-align: center;
    font-size: 26rpx;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
}
</style>
