video/src/pages/business/curHistory/curHistory.tsx

import {Image, Progress, View} from "@tarojs/components";
import Taro from "@tarojs/taro";
import styles from './curHistory.module.scss'
import {useState} from "react";
import {userApi} from "@/api";
import {formatDateTime, formatMinute} from "@/utils/time";
import CustomPageContainer from "@/components/custom-page-container/custom-page-container";

const CurHistory = () => {
  const [show, setShow] = useState(false)
  const {course_id} = Taro.getCurrentInstance().router?.params as unknown as { course_id: string }
  const [data, setData] = useState<userRecord[]>([])
  const [course, setCourse] = useState<Curriculum | null>(null)
  const [hours, setHours] = useState<Hour[] | null>(null)
  const [durations, setDuration] = useState<Record<number, number> | null>(null)
  const [time, setTime] = useState<Record<number, { start: number, end: number }> | null>(null)

  Taro.useLoad(() => {
    // Taro.setNavigationBarTitle({title: name})
    userApi.courseRecord(course_id).then(res => {
      setData(Object.values(res.data))
      setCourse(res.course)
    })
  })

  async function setHour(unique_ident: number) {
    const res = await userApi.hourCourse(course_id, unique_ident)
    setHours(Object.values(res.courseHour))
    setDuration(res.duration)
    setTime(res.date)
    setShow(true)
  }

  function percent(duration: number): number {
    if (!course?.course_duration) return 0
    return Number((duration / course.course_duration * 100).toFixed(2))
  }

  function getTime(id: number): string {
    const day = formatDateTime(new Date(time?.[id].start || 0), 'MM-dd')
    const start = formatDateTime(new Date(time?.[id].start || 0), 'HH:mm:ss')
    const end = formatDateTime(new Date(time?.[id].end || 0), 'HH:mm:ss')
    return `${day} ${start} - ${end}`
  }

  function getCurTime(startNow: string, endNow: string): string {
    const day = formatDateTime(new Date(startNow), 'MM-dd')
    const start = formatDateTime(new Date(startNow), 'HH:mm:ss')
    const end = formatDateTime(new Date(endNow), 'HH:mm:ss')
    return `${day} ${start} - ${end}`
  }

  function hourPercent(id: number, duration: number): number {
    const viewingTime = durations?.[id] || 0
    return Number((viewingTime / duration * 100).toFixed(2))
  }

  return (
    <View className={styles.page}>
      <View className={styles.cur}>
        <Image className={styles.image} src={course?.thumb || ''} mode='center'/>
        <View className={styles.classHour}>共{course?.class_hour}节/已学{course?.finished_hour_count || 0}节</View>
        <View className={styles.title}>{course?.title}</View>
      </View>


      <View className={styles.record}>
        {data.map((d, index) => <View key={d.id} onClick={() => setHour(d.unique_ident)} className={styles.recordItem}>
          <View className='text-hover-dark'>第{index + 1}次观看</View>
          <View>{getCurTime(d.start_at, d.end_at)} </View>
          <View>观看视频：{formatMinute(d.duration)}</View>
          <Progress
            className={styles.progress}
            percent={percent(d.duration)}
            showInfo
            borderRadius={10}
            active
            duration={10}
            strokeWidth={10}
            color='#45D4A8'
            activeColor='#45D4A8'
          />
        </View>)}
      </View>

      <CustomPageContainer
        show={show}
        round
        position='bottom'
        onClickOverlay={() => setShow(false)}>
        <View className={styles.hourRecord}>
          {hours?.map(d => <View key={d.id}>
              <View className={styles.recordItem}>
                <View>{d.title}</View>
                <View>{getTime(d.id)}</View>
                <Progress
                  percent={hourPercent(d.id, d.duration)}
                  showInfo
                  duration={10}
                  borderRadius={10}
                  active
                  strokeWidth={10}
                  color={'#45D4A8'}
                  activeColor={'#45D4A8'}
                />
              </View>
            </View>
          )}
        </View>
      </CustomPageContainer>
    </View>
  )
}

export default CurHistory