import { useEffect, useState } from 'react'
import { Swiper } from '@nutui/nutui-react-taro'
import {CmsAd} from "@/api/cms/cmsAd/model";
import {pageCmsAd} from "@/api/cms/cmsAd";

const MyPage = () => {
  const [item, setItem] = useState<CmsAd>()
  const [height, setHeight] = useState<string>()
  const [width, setWidth] = useState<string>()

  const reload = () => {
    pageCmsAd({keywords: '幻灯片'}).then(data => {
      if(data && data?.count > 0){
        const cmsAd = data.list[0];
        setHeight(cmsAd.height)
        setWidth(cmsAd.width)
        setItem(data.list[0])
      }
    })
  }

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

  return (
    <div style={{width: width, height: height}} className={'px-3'}>
      <Swiper defaultValue={0} height={height} indicator style={{ height: height + 'px', margin: '0 auto' }}>
        {item?.imageList?.map((item) => (
          <Swiper.Item key={item}>
            <img width="100%" height="100%" src={item.url} alt="" style={{ height: height + 'px' }} />
          </Swiper.Item>
        ))}
      </Swiper>
    </div>
  )
}
export default MyPage
