import {Text, View} from "@tarojs/components";
import styles from './history.module.scss'
import Taro from "@tarojs/taro";
import React, {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>)
          }
            <View className='text-center font-24 text-dark mt-3'>暂无更多</View>
          </>
          : <Empty name='无观看记录'/>
      }
    </View>
  )
}

export default History
