<template>
  <view class="situation-item">
    <view class="situation-item-title">视频学习统计</view>

    <duration-select v-model:value="currentDuration" />

    <view class="summary-view">
      <qy-up-down-flat v-for="(item, index) in studyVideoData" :key="index" :data="item" />
    </view>
    <view class="middle-title">观看视频时长</view>

    <view>
      <qy-echarts-line
        html-id="video-see-duration"
        :x-data="practiseData.xData"
        :y-data="practiseData.yData"
      />
    </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 { UpDownFlatState, UpDownFlatType } from '@/components/up-down-flat/index';
import { queryVideoStudy } from '@/api/inspector/student-detail';
import type { StudySituationParam } from '@/types/inspector/studentDetail';
import { minToHour } from '@/utils';
import dayjs from "dayjs";

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

const currentDuration = ref<number>(0);
const videoStudyData = ref<any>({});

const studyVideoData = computed(() => {
  return [
    {
      title: '已学视频',
      type: UpDownFlatType.NORMAL,
      value: [videoStudyData.value?.videoCount ?? 0],
      unit: '个',
      state:
        videoStudyData.value.videoCountRatio > 0
          ? UpDownFlatState.UP
          : videoStudyData.value.videoCountRatio === 0
          ? UpDownFlatState.FLAT
          : UpDownFlatState.DOWN,
    },
    {
      title: '观看视频时长',
      type: UpDownFlatType.TIME,
      value: minToHour(videoStudyData.value?.videoTime ?? 0),
      state:
        videoStudyData.value.videoTimeRatio > 0
          ? UpDownFlatState.UP
          : videoStudyData.value.videoTimeRatio === 0
          ? UpDownFlatState.FLAT
          : UpDownFlatState.DOWN,
    },
  ];
});

const practiseData = computed(()=>{
  const videoRecordVoList = videoStudyData.value.videoRecordVoList;
  const xData = videoRecordVoList.map((item: any) => dayjs(item.studyDate).format('MM/DD') );
  const yData = videoRecordVoList.map((item: any) => item.videoTime);
  return {
    xData,
    yData: [
      {
        name: '视频时长统计',
        data: yData,
      },
    ],
  };
});

const queryData = async () => {
  if (!(currentDuration.value >= 0)) {
    return;
  }
  const { data } = await queryVideoStudy({
    ...studySituationParam.value,
    dateType: currentDuration.value,
  });
  videoStudyData.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: 305rpx;
  }
}

.middle-title {
  color: #333333;
  text-align: center;
  font-size: 28rpx;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 50rpx 0 30rpx 0;
}
</style>
