import {Text, View} from "@tarojs/components";
import styles from './history.module.scss'
import Taro from "@tarojs/taro";
import {useEffect, useState} from "react";
import {formatMinute} from "@/utils/time";
import Empty from "@/components/empty/empty";
import {userApi} from "@/api";
import Img from "@/components/image/image";

const History = () => {
  const [data, setData] = useState<HourHistory[]>([])
  const [durations, setDurations] = useState<Record<number, number>>({})

  async function getData() {
    const res = await userApi.record()
    setData(res.course)
    setDurations(res.durations)
  }

  function jump(course_id: number) {
    Taro.navigateTo({url: `/pages/business/curHistory/curHistory?course_id=${course_id}`})
  }

  useEffect(() => {
    getData()
  }, [])

  return (
    <View className='mt-3'>
      {data.length ? data.map((d, index) =>
        <View key={index} className={styles.category} onClick={() => jump(d.userCourseRecord.course_id)}>
          <View className={styles.thumb}>
            <Img src={d.thumb} className={styles.image} width={300} height={188}/>
            <View
              className={styles.count}>共{d.userCourseRecord.hour_count}节/已学{d.userCourseRecord.finished_count}节</View>
          </View>
          <View className={styles.text}>
            <View>{d.title}</View>
            <View className={styles.describe}>
              <Text className='mr-4'>观看{formatMinute(durations[d.id])}</Text>
              <Text>学习进度：{(d.userCourseRecord.finished_count / d.userCourseRecord.hour_count * 100).toFixed(0)}%</Text>
            </View>
          </View>
        </View>) : <Empty name='无观看记录'/>}
    </View>
  )
}

export default History