<template>
  <!-- 学习时长统计 -->
  <view class="single_box learning_time">
    <view class="title">学习时长统计</view>
    <isp-data-load :loading="loading" :empty="empty" emptyText="暂无数据">
      <view class="study_situation">
        <view class="item">
          <text>累计学习</text>
          <view
            ><text class="date">{{ showData.cumulativeTimeDuration }} </text> 天</view
          >
        </view>
        <view class="item">
          <text>连续学习</text>
          <view
            ><text class="date">{{ showData.continuousDuration }}</text> 天</view
          >
        </view>
      </view>
      <view class="date_filter_box">
        <DateFilter :dateType="dateType" @filter="i => handleFilterDate(i)" />
      </view>
      <template v-if="Number(_subjectId) === 3">
        <BarChart :chartData="englishLearningTime" height="710rpx" />
      </template>
      <template v-else>
        <BarChart :chartData="learningTime" height="420rpx" />
      </template>
    </isp-data-load>
  </view>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import DateFilter from './dateFilter.vue';
import BarChart from './Echart/BarChart.vue';

import type { SubjectType, StudyTimeType } from '../interface';
import '../index.scss';
import { studyTimeStatApi } from '@/api';

const props = withDefaults(
  defineProps<{
    subjectId: number | string;
    userId: string;
  }>(),
  {
    subjectId: 0,
    userId: '',
  },
);
const emits = defineEmits(['change']);
const _subjectId = ref();
const loading = ref(true);
const dateType = ref(0);
const empty = ref(false);
const showData = ref<StudyTimeType>({
  continuousDuration: 0,
  cumulativeTimeDuration: 0,
  studyDurationVoList: [
    {
      totalTimeAi: 0,
      totalTimeError: 0,
      totalTimeFree: 0,
    },
  ],
});
const englishLearningTime = ref({
  categories: ['自由学', 'AI精准学', '错题本', '单词闯关', '单词测试', '语感训练'],
  series: [
    {
      data: [],
      format: 'hoursUnit',
    },
  ],
});
const learningTime = ref({
  categories: ['自由学', 'AI精准学', '错题本'],
  series: [
    {
      data: [],
      format: 'hoursUnit',
    },
  ],
});

function timeTool(second: string | number) {
  const seconds = Number(second);
  let h: number | string = (seconds / 3600).toFixed(1);
  return Number(h);
}
async function fecthStudyTimeStat() {
  if (props.subjectId === 0) {
    empty.value = true;
    return;
  }
  empty.value = false;

  try {
    loading.value = true;
    const { data } = await studyTimeStatApi({
      dateType: dateType.value,
      subjectId: props.subjectId,
      userId: props.userId,
    });
    showData.value.continuousDuration = data.continuousDuration;
    showData.value.cumulativeTimeDuration = data.cumulativeTimeDuration;
    let stat = data.studyDurationVoList[0];
    englishLearningTime.value.series[0].data = [
      { color: '#83C400', value: timeTool(stat.totalTimeFree), text: stat.totalTimeFree },
      { color: '#767fff', value: timeTool(stat.totalTimeAi) },
      { color: '#F59DF5', value: timeTool(stat.totalTimeError) },
      { color: '#E9605D', value: timeTool(stat.totalTimeWordRecord) },
      { color: '#F2B058', value: timeTool(stat.totalTimeWordTest) },
      { color: '#A6E3FC', value: timeTool(stat.totalTimeSentenceRecord) },
    ];
    learningTime.value.series[0].data = [
      { color: '#83C400', value: timeTool(stat.totalTimeFree), text: stat.totalTimeFree },
      { color: '#767fff', value: timeTool(stat.totalTimeAi) },
      { color: '#F59DF5', value: timeTool(stat.totalTimeError) },
    ];
  } finally {
    loading.value = false;
  }
}
async function handleFilterDate(i) {
  dateType.value = i.value;
  fecthStudyTimeStat();
}
watch(
  () => props.subjectId,
  val => {
    _subjectId.value = val;
    dateType.value = 0;
    fecthStudyTimeStat();
  },
);
</script>
