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 {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";
import Collect from "@/components/collect/collect";

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 > 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}/>
                </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/>
          </View>
          <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>)}
                <View className='text-center font-24 text-dark'>暂无更多</View>
              </>
              : <Empty name='空空如也'/>
          }
        </View>
      </View>
    </View>
  );
}

export default BrandInfo