video/src/pages/preview/brand/info/info.tsx

import {FC, useCallback, useEffect, useState} from "react";
import {Swiper, SwiperItem, Text, Video, View} from "@tarojs/components";
import { 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 Spin from "@/components/spinner";
import Collect from "@/components/collect/collect";
import ArticlesBox from "@/components/articlesBox/articlesBox";

type Params = {
  id: number
}
const BrandInfo: FC = () => {
  const {id} = useRouter().params as unknown as Params
  const [brandInfo, setBrandInfo] = useState<BrandRecord>()
  const [articleList, setArticleList] = useState<Articles[]>([])
  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 > 0 &&
        <>
          <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 || 0) > 0
              && brandInfo?.brand_album?.split(',').map((d) =>
                <SwiperItem>
                  <Img mode={'aspectFill'} width={750} height={600} src={d} errorType='brand'/>
                </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']}>
          <View className='flex justify-between'>
            <Text className={`${styles['title']} flex-1`}>{brandInfo?.name}</Text>
            <Collect owner_type={4} owner_id={id} select={brandInfo?.collect}/>
          </View>
          <LineEllipsis text={brandInfo?.graphic_introduction || '暂无简介'}/>
        </View>
        <View className={styles['bottom']}>
          {
            articleList?.length ? <>{
                articleList.map(d => <ArticlesBox data={d}/>)}
                <View className='text-center font-24 text-dark mt-3'>暂无更多</View>
              </>
              : <Empty name='空空如也'/>
          }
        </View>
      </View>
    </View>
  );
}

export default BrandInfo