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'

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

interface Data {
  title: string
  url: string
  detailsUrl: string
  data: DataContent[]
}

const FeatureRecommended: FC = () => {
  const [data, setData] = useState<Data[]>([
    {title: "品牌TOP3", url: '', detailsUrl: '', data: []},
    {
      title: "健康知识TOP3",
      url: '/pages/health/health',
      detailsUrl: '/pages/business/videoFull/videoFull?url=',
      data: []
    },
    {
      url: '',
      title: "专业技能TOP3",
      detailsUrl: '/pages/business/videoFull/videoFull?url=',
      data: []
    },
    {title: "疾病知识TOP3", url: '', detailsUrl: '', data: []},
  ])

  /** 品牌 */
  async function getBrand(): Promise<DataContent[]> {
    try {
      const res = await HomeApi.brand(1, 3)
      return res.data.map<DataContent>(d => ({
        id: d.id,
        title: d.name,
        imageUrl: d.brand_album,
        description: d.graphic_introduction,
        path: '',
      }))
    } catch (e) {
    }
    return []
  }

  /** 健康知识 */
  async function getHealth(): Promise<DataContent[]> {
    try {
      const res = await HomeApi.healthTop(3)
      return res.map<DataContent>(d => ({
        id: d.id,
        title: d.title,
        imageUrl: d.url_path,
        description: d.introduction,
        path: d.resource.url
      }))
    } catch (e) {
    }
    return []
  }

  /** 技能 */
  async function getKill(): Promise<DataContent[]> {
    try {
      const res = await HomeApi.skillTop(3)
      return res.map<DataContent>(d => ({
        id: d.id,
        imageUrl: d.url_path,
        description: '',
        title: d.resource.name,
        path: d.resource.url
      }))
    } catch (e) {
    }
    return []
  }

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

  function jump(url: string) {
    console.log(url)
    Taro.navigateTo({url})
  }

  return (
    <View className={styles.feature}>
      <Swiper nextMargin='30px' style={{height: '225px'}}>
        {
          data.map(d => <SwiperItem key={d.title}>
            <View className={styles.featureTitle} onClick={() => jump(d.url)}>{d.title}</View>
            {
              d.data.map((c, index) => <View
                className='flex mb-3'
                key={c.id}
                onClick={() => jump(d.detailsUrl + c.path)}>
                <View>
                  <Image src={c.imageUrl} className={styles.featureImage}/>
                  <Image src={[first, second, third][index]} className={styles.ranking} mode='aspectFill'/>
                </View>
                <View className={styles.featureText}>
                  <View className='text-ellipsis text-secondary'>{c.title}</View>
                  <View className='font-26 mt-1 text-muted text-ellipsis'>{c.description}</View>
                </View>
              </View>)
            }
          </SwiperItem>)
        }
      </Swiper>
    </View>
  )
}

export default FeatureRecommended