import {FC, 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 play from "@/static/img/play-back.png";
import {formatDate} from "@/utils/time";
import Taro from "@tarojs/taro";

interface Props {
  data: VideList
  errorType?: ImgErrType
}

const VideoList: FC<Props> = ({data, errorType}) => {
  const [frequency, setFrequency] = useState(0)

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

  return (
    <View key={data.id} className={styles.health} onClick={jump}>
      <Img src={data.url_path} mode='widthFix' errorType={errorType} height={346} fit/>
      <Image src={play} className={styles.play} mode='aspectFit'/>
      <View className='p-1'>
        <View className='text-ellipsis-2  text-dark'>{data.title}</View>
        <View className='text-ellipsis-2 mt-1 font-26 text-secondary'>{data.introduction}</View>
        <View className='font-24 text-muted my-2  flex justify-between'>
          <Text>{formatDate(new Date(data.publish_time), "YY-MM-dd")}</Text>
          <Text>{(data.video_view || 1) + frequency}观看</Text>
        </View>
      </View>
    </View>)
}

export default VideoList
