import {View} from "@tarojs/components";
import {FC} from "react";
import './videoCover.scss'
import Taro from "@tarojs/taro";
import Img from "@/components/image/image";

interface VideoCoverProps {
  thumb: string
  title: string | JSX.Element
  /** 右上角标签 */
  marker?: string | JSX.Element
  content?: string | JSX.Element
  id: number
  /** 课程id */
  depId: number | null
  /** 时间 */
  time?: string
  /** 学习进度 */
  schedule?: string
}

const VideoCover: FC<VideoCoverProps> = (opt: VideoCoverProps) => {
  function jump() {
    Taro.preload({id: opt.id, depId: opt.depId || ''})
    Taro.navigateTo({url: `/pages/business/videoInfo/videoInfo?id=${opt.id}&depId=${opt.depId || ''}`})
  }

  return (
    <View className='videoBox'>
      <View className='video' onClick={jump}>
        <View className='upper'>
          <Img height={180} src={opt.thumb} mode='widthFix'/>
          {opt.marker && <View className='marker'>{opt.marker}</View>}
          {opt.content && <View className='content'>{opt.content}</View>}
        </View>
        <View className='box'>
          <View className='title'>{opt.title}</View>
          <View className='flex justify-between videoButton'>
            {opt.time && <View>时长:{opt.time}</View>}
            <View>{opt?.schedule}</View>
          </View>
        </View>
      </View>
    </View>
  )
}

export default VideoCover
