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

interface item { title: string; img: string; url: string; id: number }

interface params {
  list?: item[]
  swiperOnClick?: (val: item) => void
  style?: Object
}
const Banner = (props: params) => {
  const { swiperOnClick, style = {} } = props

  const [list, setList] = useState<any[]>([])
  const { fetchData, state } = GetBannerList()
  const getData = async() => {
    const res = await fetchData()
    setList(res.data?.list)
  }
  useEffect(() => {
    getData()
  }, [])

  const skipTo = (item) => {
    if (item.jump_type == 2 || item.jump_type == 0) {
      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>
  )
}

export default Banner