import {FC, ReactNode, useEffect, useState} from "react";
import {Image, View} from "@tarojs/components";
import {HomeApi} from "@/api";
import Taro, {useReachBottom} from "@tarojs/taro";
import styles from "../home.module.scss";
import VideoCover from "@/components/videoCover/videoCover";
import courseTag from '@/static/img/courseTag.png'
import Img from "@/components/image/image";
import {beforeTime} from "@/utils/time";

const toArticlePage = (d: any) => {
  console.log({d})
  switch (d.owner_type) {
    case 1:
      Taro.navigateTo({
        url: `/pages/preview/brand/article/article?id=${d.id}`
      })
      return
    case 2:
      Taro.navigateTo({
        url: `/pages/preview/illness/article/article?id=${d.id}`
      })
      return
  }
}

const CurRecommended: FC = () => {
  const [page, setPage] = useState(1)
  const [data, setData] = useState<Curriculum[]>([])
  const [total, setTotal] = useState(0)
  const [articles, setArticles] = useState<any[]>([])

  async function getData() {
    const res = await HomeApi.course(page, 4)
    setArticles(res.articles)
    setTotal(res.course.total)
    const newData = res.course.data.reduce((pre, cut) => {
      const index = pre.findIndex(d => d.id === cut.id)
      if (index === -1) {
        pre.push(cut)
      } else {
        pre.splice(index, 1, cut)
      }
      return pre
    }, JSON.parse(JSON.stringify(data)) as Curriculum[])
    setData(newData)
  }

  useEffect(() => {
    getData()
  }, [page])

  useReachBottom(() => {
    data.length < total && setPage(page + 1)
  })

  let examines: ReactNode | undefined
  if (articles.length > 0) {
    examines = (
      <View className="mb-5">
        <View className='text-center my-2'>推荐文章</View>
        <View className='bg-white rounded-20 clip'>
          {articles.map((d, i) => <View className='p-3 relative' onClick={() => toArticlePage(d)}>
            {i > 0 && <View className='absolute top left right divided ml-3 mr-3'/>}
            <View className="font-34 text-black">{d.title}</View>
            {(d.intro || '').length > 40 && (<View className='flex mt-1'>
              <View className="flex-1 font-24 lh1_5">{d.intro}</View>
              {d.cover && <Img className='ml-l' width={140} height={100} src={d.cover} errorType="acquiesce"/>}
            </View>)}
            <View className="flex mt-3 justify-between font-24 text-muted">
              <View>{beforeTime(d.created_at)}</View>
              <View>阅读 {d.page_view || 0}</View>
            </View>
          </View>)}
        </View>
      </View>
    )
  }

  let videos: ReactNode | undefined
  if (data.length > 0) {
    videos = (
      <View>
        <Image src={courseTag} mode='widthFix' className={styles.courseTag}/>
        <View className={'pb-2 flex justify-between flex-wrap ' + styles.videoListBox}>
          {
            data.map(c => <VideoCover
              thumb={c.thumb}
              title={c.title}
              id={c.id}
              depId={c.id}
              key={c.id}
              marker={`共${c.class_hour}节`}
            />)
          }
        </View>
      </View>
    )
  }

  return (
    <>
      {examines}
      {videos}
      <View className='text-center font-24 text-dark'>暂无更多</View>
    </>
  )
}

export default CurRecommended
