<template>
  <view>
    <view class="situation-item">
      <view class="situation-item-title">学习时长统计</view>
      <view class="study-duration-view">
        <view class="study-duration-view-item">
          <view>累计学习</view>
          <view class="study-duration-view-item-value">
            <text>{{ studyDurationData.cumulativeTimeDuration ?? 0 }}</text>
            <text>天</text>
          </view>
        </view>
        <view class="study-duration-view-item">
          <view>连续学习</view>
          <view class="study-duration-view-item-value">
            <text>{{ studyDurationData.continuousDuration ?? 0 }}</text>
            <text>天</text>
          </view>
        </view>
      </view>
    </view>

    <duration-select v-model:value="currentDuration" />
    <view style="margin-top: 30rpx">
      <qy-horizontal-chart
        html-id="study-situation"
        :x-data="studyDetail.xData"
        :y-data="studyDetail.yData"
      />
    </view>
  </view>
</template>

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

const studySituationParam = inject<StudySituationParam>('studySituationParam');

const currentDuration = ref<number>(0);
const studyDurationData = ref<any>({});
const currentSubjectId = ref<number>(0);
const studyDetail = computed(() => {
  const { studyDurationVoList } = studyDurationData.value;
  const data = studyDurationVoList?.[0];
  return {
    yData: ['自由学', 'AI精准学', '错题本'],
    xData: [data?.totalTimeFree ?? 0, data?.totalTimeAi ?? 0, data?.totalTimeError ?? 0],
  };
});

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

watchEffect(() => {
  const subjectId = studySituationParam.subjectId.value;
  console.log('subjectId', subjectId, currentSubjectId.value);
  if (!subjectId || subjectId === currentSubjectId.value) {
    return;
  }
  currentSubjectId.value = subjectId;
  queryData();
});
</script>

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

.study-duration-view {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;

  &-item {
    display: flex;
    justify-content: space-between;
    width: 305rpx;
    height: 119rpx;
    padding: 40rpx 20rpx;
    gap: 10rpx;
    flex-shrink: 0;
    border-radius: 20rpx;
    background: #f7faff;
    box-sizing: border-box;
    color: #333;
    font-size: 26rpx;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

    &-value {
      & > text:first-child {
        color: #21d17a;
        margin-right: 10rpx;
      }
    }
  }
}
</style>
