import {FC, useCallback, useEffect, useState} from "react";
import {Image, Swiper, SwiperItem, Text, Video, View} from "@tarojs/components";
import {ArticleRecord, brandApi, BrandRecord} from "@/api";
import styles from './info.module.scss'
import Taro, {useReachBottom, useRouter} from "@tarojs/taro";
import LineEllipsis from "@/components/textCollapse/collapse";
import Empty from "@/components/empty/empty";
import Img from "@/components/image/image";
import {rfc33392time} from "@/utils/day";
import Spin from "@/components/spinner";

type Params = {
  id: number
}
const BrandInfo: FC = () => {
  const {id} = useRouter().params as unknown as Params
  const [brandInfo, setBrandInfo] = useState<BrandRecord>()
  const [articleList, setArticleList] = useState<ArticleRecord[]>([])
  const [curIndex, setCurIndex] = useState<number>(1)
  const [page, setPage] = useState(1)
  const [total, setTotal] = useState(0)
  const [enable, setEnable] = useState(true)

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

  const getData = async () => {
    try {
      const data = await brandApi.info(id)
      Taro.setNavigationBarTitle({title: data.name})
      setBrandInfo(data)
      const data1 = await brandApi.articleList(id, page)
      setTotal(data1.total)
      setArticleList([
        ...(articleList || []),
        ...data1.list
      ])
    } catch (e) {
      // setBrandInfo({disabled: 0, graphic_introduction: "", id: 0, introductory_video: "", name: "", brand_album:['1','2','3']})
    }
    setEnable(false)
  }

  useReachBottom(useCallback(() => {
    if (articleList?.length < total) {
      setPage(page + 1)
    }
  }, [total, articleList]))

  useEffect(() => {
    brandApi.articleList(id, page).then(res => {
      setTotal(res.total)
      setArticleList([
        ...(articleList || []),
        ...res.list
      ])
    })

  }, [page])

  function onChange(e) {
    setCurIndex(+e.detail.current + 1)
  }

  return (
    <View className='flex flex-column' style={{display: 'flex'}}>
      <Spin enable={enable} overlay/>
      {
        brandInfo?.introductory_video_resource?.url || brandInfo?.brand_album?.length &&
        <>
        <Swiper
          className={styles['swiper']}
          indicatorColor='#999'
          indicatorActiveColor='#333'
          indicatorDots={false}
          onChange={onChange}
        >
          {brandInfo?.introductory_video_resource?.url && <SwiperItem>
            <Video
              style={{width: '750rpx', height: '600rpx'}}
              playBtnPosition={"center"}
              id='video'
              src={brandInfo?.introductory_video_resource?.url}
              initialTime={0}
              controls={true}
              enableProgressGesture={false}
              showFullscreenBtn={false}
              autoplay={false}
              loop={false}
              muted={false}
            />
          </SwiperItem>}
          {brandInfo?.brand_album?.length
            && brandInfo?.brand_album?.split(',').map((d) =>
              <SwiperItem>
                <Image mode={'aspectFill'} style={{width: '750rpx', height: '600rpx'}} src={d}></Image>
              </SwiperItem>)
          }
        </Swiper>
        <View className={styles.curIndexBox}>
          <Text>{curIndex} / {(brandInfo?.brand_album?.split(',').length || 0) + ((brandInfo && brandInfo.introductory_video_resource) ? 1 : 0)}</Text>
        </View>
        </>
      }


      <View className={styles['body']}>
        <View className={styles['top']}>
          <Text className={styles['title']}>{brandInfo?.name}</Text>
          <LineEllipsis text={brandInfo?.graphic_introduction || '暂无简介'}></LineEllipsis>
        </View>
        <View className={styles['bottom']}>
          {
            articleList?.length ?
              articleList.map((i: any) =>
                <View className={styles.box} onClick={() => {
                  Taro.navigateTo({url: `/pages/preview/brand/article/article?id=${i.id}`})
                }}>
                  <View className={styles.inner}>
                    <View className={styles.leftBox}>
                      <View className='font-weight mb-2 font-28 lh-40'>{i.title}</View>
                      <View className={styles.desc}>{rfc33392time(i.created_at)} {i.page_view}阅读</View>
                    </View>
                    <View className={styles.image}>
                      <Img width={172} height={128} src={i.cover}/>
                    </View>
                  </View>
                </View>
              )
              : <Empty name='空空如也'/>
          }
        </View>
      </View>
    </View>
  );
}

export default BrandInfo
