import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
import { goLink } from "@/common/common"
import {GetBannerList} from "@/api/banner"
import styles  from './index.module.scss'
import { useEffect, useState } from "react"
import { formatImgUrl } from "@/common/fotmat"

type item = {title:string, img:string, url:string, id:number}

type params = {
  list?: item[]
  swiperOnClick?: (val: item) => void,
  style?: Object
}
export default (props:params) => {
    let {swiperOnClick, style = {}} = props

    const [list, setList] = useState<any[]>([])
    const {fetchData, state} = GetBannerList()

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

    const getData = async () => {
        const res = await fetchData()
        setList(res.data?.list)
    }

    const skipTo = (item) => {
        if(item.jump_type == 2) {
            goLink(item.link + '&title=' + item.title)
        } else {
            goLink(item.link)
        }
    }

    return (
        <View className={styles.swiper_con} style={style}>
            <Swiper
                className={styles.xswiper}
                indicatorColor='#ccc'
                indicatorActiveColor='#fff'
                circular
                indicatorDots
                autoplay>
                {
                    list?.map(item => {
                        return <SwiperItem key={item.id}>
                            <View className={styles.image_item} onClick={() => skipTo(item)}>
                                <Image mode="aspectFill" src={formatImgUrl(item.prev_view_url, '!w800')}></Image>
                            </View>
                        </SwiperItem>
                    })
                }
            </Swiper>
        </View>
    )
   
}