import {FC, useCallback, useEffect, useState} from "react";
import {Image, ScrollView, View} from "@tarojs/components";
import styles from './list.module.scss'
import Taro from "@tarojs/taro";
import Empty from "@/components/empty/empty";
import Img from "@/components/image/image";
import { SearchApi } from "@/api/search";
import { AtLoadMore } from 'taro-ui'
import {rfc33392time} from "@/utils/day";
import play from "@/static/img/play.png";

type Props = {
  name:string
  clear:boolean
}
const SearchList: FC<Props> = ({name,clear}) => {
  console.log(name,'name')
  const globalData = Taro.getApp().globalData
  const [page, setPage] = useState(1)
  const [brands, setBrands] = useState<any[]>([])
  const [total, setTotal] = useState(0)
  const [text, setText] = useState('')
  const [loading, setLoading] = useState(true)

  useEffect(()=>{
    if(!clear){
      setBrands([])
      setLoading(true)
    }
  },[clear])
  useEffect(() => {
    if(name && clear){
      getData()
    }
  }, [page,name,clear])

  const getData = useCallback(async () => {
    try {
      const data = await SearchApi.list(page, 10,name)
      if (page === 1) {
        if (data.data.length < 10) {
          setText('没有更多了~')
        } else {
          setText('上拉加载更多~')
        }
        setBrands([
          ...data.data
        ])
      }else{
        setBrands([
          ...brands,
          ...data.data
        ])
      }
      setTotal(data.total)

    } catch (e) {
    }
    setLoading(false)
  }, [page,name])


  function jumpInfo(id: number,type:string,health:any) {
    console.log(type,'type')
    let url = ''
    switch (type){
      case 'brand':
        url = '/pages/preview/brand/info/info';
        break;
      case 'illness':
        url = '/pages/preview/illness/list/list';
        break;
      case 'article':
        url = '/pages/preview/illness/article/article'
        break
      case 'video_records':
        return  Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?url=${health.resources.url}&poster=${health.url_path}&title=${health.title}`})
      case 'courses':
        url = '/pages/business/videoInfo/videoInfo'
        break
    }
    Taro.navigateTo({url: `${url}?id=${id}`})

  }

  function onScrollToLower(){
      if (brands?.length < total) {
        setPage(page + 1)
        getData().then()
      } else {
        setText('没有更多了~')
      }
  }

  return (
    <ScrollView
      className='scrollview'
      scrollY
      scrollWithAnimation
      style={{height:`${globalData.windowHeight-140}px`,backgroundColor:`#f5f5f5`}}
      onScrollToLower={onScrollToLower}
    >
      { loading && <AtLoadMore status={'loading'}/>}
      {
        brands.length >= 1 && !loading &&
          <>
            {brands.map((d) =>
              <View onClick={() => jumpInfo(d.data.id,d.data.table,d.data['@data'])} className={styles.box} key={d.data.id}>
                {
                  d.data.table === 'brand' &&
                  <>
                    <Img width={128} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
                    <View className={styles.rightBox}>
                      <View className='font-weight mb-2 font-28'>{d.data.title}</View>
                      <View className={styles.desc}>{d.data.content || '暂无品牌简介'}</View>
                    </View>
                  </>
                }
                {
                  d.data.table === 'article' &&
                  <>
                    <View className={styles.articleLeftBox}>
                      <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
                      <View className={styles.desc}>{rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}阅读</View>
                    </View>
                    <Img width={172} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
                  </>
                }
                {
                  d.data.table === 'video_records' &&
                  <>
                    <Img width={192} height={192} src={d.data['@data'].url_path} mode='aspectFill' className={styles.image}/>
                    <Image src={play} className={styles.play} mode='aspectFit'/>
                    <View className={styles.videoRightBox}>
                      <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
                      <View className={styles.desc}>{d.data['@data'].introduction}</View>
                      <View className={`${styles.desc} mt-2`}>播放量: {d.data['@data'].video_view}</View>
                    </View>
                  </>
                }
                {
                  d.data.table === 'courses' &&
                  <>
                    <Img width={192} height={138} src={d.data['@data'].thumb} mode='aspectFill' className={styles.image}/>
                    <View className={styles.articleLeftBox}>
                      <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
                      <View className={styles.desc}>课时:{d.data['@data'].class_hour}节   销量：{d.data['@data'].charge}</View>
                    </View>
                  </>
                }




              </View>
            )
            }
            <View style={{width: '750rpx', textAlign: 'center', color: '#999'}} className="font-28 mt-3 mb-3">{text}</View>
          </>
      }
      { !loading && brands.length === 0 && <Empty name='空空如也'/>}
    </ScrollView>
  )
}

export default SearchList

