import {Image, View} from "@tarojs/components";
import styles from '../../my.module.scss'
import Taro from "@tarojs/taro";
import {curriculum} from "@/api";
import {FC, useState} from "react";
import {formatMinute} from "@/utils/time";
import time1 from "@/static/img/time1.png";
import time2 from "@/static/img/time2.png";
// import over from '@/static/img/over.png'
// import incomplete from '@/static/img/incomplete.png'
import {Profile} from "@/store";

interface List {
  title: string
  time: string | number
  src: string,
  type?: number
}

const Time: FC = () => {
  const {token} = Profile.useContainer()
  const [list, setList] = useState<List[]>([
    {title: '今日时长', time: '00:00', src: time1},
    {title: '累计时长', time: '00:00', src: time2},
    // {title: '必修课', time: '0', src: curriculum1, type: 1},
    // {title: '选修课', time: '0', src: curriculum2, type: 2},
    // {title: '已完成', time: '0', src: over, type: 3},
    // {title: '未完成(必修)', time: '0', src: incomplete, type: 4},
  ])


  Taro.useDidShow(async () => {
    try {
      const res = await curriculum.course()
      const oldList: List[] = JSON.parse(JSON.stringify(list))
      oldList[0].time = formatMinute(res.today_learn_time)
      oldList[1].time = formatMinute(res.total_learn_time)
      // oldList[2].time = res.required_count
      // oldList[3].time = res.not_required_count
      oldList[2].time = res.finished_count
      oldList[3].time = res.not_finished_count
      setList(oldList)
    } catch (e) {
    }
  })

  function jump(type?: number) {
    if (!token) {
      Taro.navigateTo({url: '/pages/login/login'})
      return;
    }
    if (!type) return;
    Taro.navigateTo({url: "/pages/business/courType/courType?type=" + type})
  }


  return (
    <View className='flex mt-3 justify-between flex-wrap'>
      {
        list.map(d => {
          return (
            <View className={styles.timeBox} key={d.title} onClick={() => jump(d.type)}>
              <View className={styles.timeBoxFlex}>
                <View>
                  <View className='mb-2 font-28 font-weight'>{d.title}</View>
                  {token && <View className='text-muted font-26 mt-1'>{d.time}</View>}
                </View>
                <Image src={d.src} mode='aspectFit' className={styles.timeImag}/>
              </View>
            </View>
          )
        })
      }
    </View>
  )
}

export default Time
