import {FC, useEffect, useState} from "react";
import styles from "@/pages/preview/health/health.module.scss";
import {Image, Text, View} from "@tarojs/components";
import Img from "@/components/image/image";
import Taro from "@tarojs/taro";
import videoEvent from "@/hooks/videoEvent";
import palyWhite from '@/static/img/palyWhite.png'
import starWhite from '@/static/img/starWhite.png'
import {formatMinute} from "@/utils/time";

interface Props {
  data: VideList
  errorType?: ImgErrType
}

const VideoList: FC<Props> = (props) => {
  const [data, setData] = useState(props.data)

  useEffect(() => {
    setData(props.data)
  }, [props.data])

  useEffect(() => {
    videoEvent.videoOn(data.id, ({view}) => {
      setData({
        ...data,
        video_view: view
      })
    })
  }, [])

  Taro.useUnload(() => {
    videoEvent.off(data.id)
  })

  function jump() {
    Taro.preload(data)
    Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?id=${data.id}`})
  }

  return (
    <View className={styles.health}>
      <View key={data.id} onClick={jump} className="bg-white">

        <Img src={data.url_path} mode='widthFix' errorType={props.errorType} height={346}/>
        <View className='p-2 relative'>
          <View className='text-ellipsis-1 font-28 text-dark'>{data.title}</View>
          <View className='text-ellipsis-2 mt-2 font-24 text-secondary'>{data.introduction}</View>

          <View className={styles.info}>
            <View className='flex'>
              <View className='flex align-center mr-3'>
                <Image src={palyWhite}/>
                <Text>{(data.video_view || 0)}</Text>
              </View>

              <View className='flex align-center'>
                <Image src={starWhite}/>
                <Text>{(data.collect_quantity || 0)}</Text>
              </View>
            </View>

            <View>{formatMinute(data.duration || 0)}</View>
          </View>
        </View>
      </View>
    </View>)
}

export default VideoList
