video/src/pages/home/components/feature_recommended.tsx

import {FC, useEffect, useState} from "react";
import {Image, Swiper, SwiperItem, View} from "@tarojs/components";
import styles from '../home.module.scss'
import Taro from "@tarojs/taro";
import {HomeApi} from "@/api";
import first from '@/static/img/first.png'
import second from '@/static/img/second.png'
import third from '@/static/img/third.png'
import brandTop from '@/static/img/brandTop.png'
import illnessTop from '@/static/img/illnessTop.png'
import healthTop from '@/static/img/healthTop.png'
import professionTop from '@/static/img/professionTop.png'
import Img from "@/components/image/image";


interface DataContent {
  id: number,
  imageUrl: string
  title: string,
  description: string
  path: string
}

interface Data {
  titleUrl: string
  url: string
  detailsUrl: string
  data: DataContent[]
  type?: 'health' | 'kill'
}

interface Props {
  skill: Kill[] // 技能
  health: Health[] // 健康
  brand: Brand[] // 品牌
  illness: Illness[] // 疾病
}

const FeatureRecommended: FC<Props> = (props) => {
  const [data, setData] = useState<Data[]>([
    {
      titleUrl: brandTop,
      url: '/pages/preview/brand/list/list',
      detailsUrl: '/pages/preview/brand/info/info',
      data: []
    },
    {
      titleUrl: healthTop,
      url: '/pages/preview/health/health',
      detailsUrl: '/pages/preview/videoFull/videoFull',
      data: [],
      type: "health"
    },
    {
      titleUrl: professionTop,
      url: '/pages/preview/profession/profession',
      detailsUrl: '/pages/preview/videoFull/videoFull',
      data: [],
      type: 'kill'
    },
    {
      titleUrl: illnessTop,
      url: '/pages/preview/illness/sort/sort',
      detailsUrl: '/pages/preview/illness/list/list',
      data: []
    },
  ])

  /** 品牌 */
  async function getBrand(): Promise<DataContent[]> {
    try {
      return props.brand.map<DataContent>(d => ({
        id: d.id,
        title: d.name,
        imageUrl: d.brand_album,
        description: d.graphic_introduction,
        path: `?id=${d.id}`,
      }))
    } catch (e) {
    }
    return []
  }

  /** 健康知识 */
  async function getHealth(): Promise<DataContent[]> {
    try {
      return props.health?.map<DataContent>(d => ({
        id: d.id,
        title: d.title,
        imageUrl: d.url_path,
        description: d.introduction,
        path: `?url=${d.resource?.url}&poster=${d.url_path}&title=${d.title}`
      }))
    } catch (e) {
    }
    return []
  }

  /** 技能 */
  async function getKill(): Promise<DataContent[]> {
    try {
      return props.skill.map<DataContent>(d => ({
        id: d.id,
        imageUrl: d.url_path,
        description: d.introduction,
        title: d.title,
        path: `?url=${d.resource?.url}&poster=${d.url_path}&title=${d.title}`
      }))
    } catch (e) {
    }
    return []
  }

  /** 疾病 */
  async function getIllness(): Promise<DataContent[]> {
    try {
      return props.illness.map<DataContent>(d => ({
        id: d.id,
        imageUrl: '',
        description: d.description || '暂无简介',
        title: d.name,
        path: `?id=${d.id}`
      }))
    } catch (e) {
    }
    return []
  }

  useEffect(() => {
    Promise.all([getBrand(), getHealth(), getKill(), getIllness()]).then(([brand, health, kill, illness]) => {
      const oldData: Data[] = JSON.parse(JSON.stringify(data))
      oldData[0].data = brand
      oldData[1].data = health
      oldData[2].data = kill
      oldData[3].data = illness
      setData(oldData)
    })
  }, [props])

  // TODO 后续增加播放量使用公共接口
  function jump(url: string, playId?: number, type?: 'health' | 'kill') {
    if (playId && type) {
      if (type === 'health') {
        HomeApi.healthSetPlay(playId)
      } else if (type === 'kill') {
        HomeApi.skillSetPlay(playId)
      }
    }
    Taro.navigateTo({url})
  }

  return (
    <View className={styles.feature}>
      <Swiper nextMargin='30px' style={{height: '450rpx'}}>
        {
          data.map(d => <SwiperItem key={d.url}>
            <Image
              mode='heightFix'
              className={styles.featureTitle}
              onClick={() => jump(d.url)} src={d.titleUrl}/>
            {
              d.data.length > 0 && d.data.map((c, index) => <View
                className='flex mb-3'
                key={c.id}
                onClick={() => jump(d.detailsUrl + c.path, c.id, d.type)}>
                <View style={{position: 'relative'}}>
                  <View className={styles.featureImage}>
                    <Img src={c.imageUrl} height={100} width={140}/>
                  </View>
                  <Image src={[first, second, third][index]} className={styles.ranking} mode='aspectFill'/>
                </View>
                <View className={styles.featureText}>
                  <View className={styles.featureTextTitle}>{c.title}</View>
                  <View className={styles.featureTextDescription}>{c.description}</View>
                </View>
              </View>)
            }
          </SwiperItem>)
        }
      </Swiper>
    </View>
  )
}

export default FeatureRecommended