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

const MyPage = () => {
  const [ad, setAd] = useState<CmsAd>()

  const toCssSize = (value?: string | number) => {
    if (value === undefined || value === null) return undefined
    const s = String(value).trim()
    if (!s) return undefined
    // If it's a pure number, default unit is px; otherwise keep backend-provided unit (e.g. rpx/px/%).
    return Number.isNaN(Number(s)) ? s : `${Number(s)}px`
  }

  const bannerHeight = toCssSize(ad?.height)
  console.log(bannerHeight)

  const reload = async () => {
    const flash = await getCmsAdByCode('flash')
    console.log(flash)
    setAd(flash)
  }

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

  return (
    <>
      <Swiper defaultValue={0} height={170} indicator>
        {ad?.imageList?.map((img, idx) => {
          const url = typeof img === 'string' ? img : img?.url
          if (!url) return null
          return (
            <Swiper.Item key={url || idx}>
              <Image
                width='100%'
                height='100%'
                src={url}
                mode='scaleToFill'
                lazyLoad={false}
              />
            </Swiper.Item>
          )
        })}
      </Swiper>
    </>
  )
}
export default MyPage
