import { Swiper, SwiperItem, Image, Navigator } from "@tarojs/components";
import React from "react";
import './index.less'
import { IndexStore } from "@src/store";
import Taro from "@tarojs/taro";
import useApi from "@src/Hook/useApi";
let { getBookInfo } = useApi()
/**轮播图 */
interface BannerBoxProps {
    data?: IndexStore["indexBanners"]
}
function BannerBox(props: BannerBoxProps) {
    const { data } = props
    const click = (bookId) => {
        getBookInfo(bookId).then((res: { data: any, code: any }) => {
            if (res?.data?.code == 200) {
                console.log(res?.data?.data)
                let { wechatBookId, inBookshelf } = res?.data?.data
                let json = JSON.stringify({ inBookshelf, bookId })
                let encode = encodeURIComponent(json)
                if (wechatBookId) {
                    Taro.navigateTo({
                        url: `plugin-private://wx293c4b6097a8a4d0/pages/novel/index?bookId=${wechatBookId}&customServerParams=${encode}`
                    })
                } else {
                    Taro.showToast({
                        title: '小说未上架',
                        icon: 'none'
                    })
                }
            }
        })
    }
    return <Swiper
        className='banner_box'
        indicatorColor='#999'
        indicatorActiveColor='#333'
        vertical={false}
        circular
        indicatorDots
        autoplay
    >
        {
            data?.map((item, index: number) => {
                let { bookId, bannerType, bannerImage, activityPagePath } = item
                return <SwiperItem key={index}>
                    {
                        bannerType === 0 ?
                            <Image src={bannerImage} className='img' onClick={()=>{click(bookId)}}/>
                            :
                            <Navigator url={'/' + activityPagePath} hoverClass="none">
                                <Image src={bannerImage} className='img' />
                            </Navigator>
                    }
                </SwiperItem>
            })
        }
    </Swiper>
}

export default React.memo(BannerBox)