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 {getCmsAd} from "@/api/cms/cmsAd";
import navTo from "@/utils/common";


const MyPage = () => {
  const [carouselData, setCarouselData] = useState<CmsAd>()
  const [hotToday, setHotToday] = useState<CmsAd>()
  const [groupBuy, setGroupBuy] = useState<CmsAd>()

  // 加载数据
  const loadData = () => {
    // 轮播图
    getCmsAd(439).then(data => {
      setCarouselData(data)
    })
    // 今日热卖素材（上层图片）
    getCmsAd(444).then(data => {
      setHotToday(data)
    })
    // 社区拼团素材（下层图片）
    getCmsAd(445).then(data => {
      setGroupBuy(data)
    })
  }

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

  // 轮播图高度，默认200px
  const carouselHeight = carouselData?.height || 200;

  return (
    <div className="flex flex-row w-full gap-2 p-2 box-sizing-border" style={{height: `${carouselHeight}px`}}>
      {/* 左侧轮播图区域 */}
      <div className="flex-1" style={{height: '100%'}}>
        <Swiper
          defaultValue={0}
          height={carouselHeight}
          indicator
          style={{height: `${carouselHeight}px`}}
        >
          {carouselData?.imageList?.map((img, index) => (
            <Swiper.Item key={index}>
              <Image
                width="100%"
                height="100%"
                src={img.url}
                mode={'scaleToFill'}
                onClick={() => navTo(`${img.path}`)}
                lazyLoad={false}
                style={{height: `${carouselHeight}px`, borderRadius: '4px'}}
                alt={`轮播图${index + 1}`}
              />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>

      {/* 右侧上下图片区域 - 从API获取数据 */}
      <div className="flex-1 flex flex-col gap-2" style={{height: '100%'}}>
        {/* 上层图片 - 使用今日热卖素材 */}
        <div style={{height: '50%'}}>
          {hotToday?.imageList?.length ? (
            <Image
              width="100%"
              height="100%"
              src={hotToday.imageList[0].url}
              mode={'scaleToFill'}
              onClick={() => navTo("/cms/category/index?id=4424" || '')}
              lazyLoad={false}
              style={{borderRadius: '4px'}}
              alt="今日热卖"
            />
          ) : (
            <div style={{
              height: '100%',
              backgroundColor: '#f5f5f5',
              borderRadius: '4px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center'
            }}>
              <span style={{color: '#999', fontSize: '12px'}}>加载中...</span>
            </div>
          )}
        </div>

        {/* 下层图片 - 使用社区拼团素材 */}
        <div style={{height: '50%'}}>
          {groupBuy?.imageList?.length ? (
            <Image
              width="100%"
              height="100%"
              src={groupBuy.imageList[0].url}
              mode={'scaleToFill'}
              onClick={() => navTo(groupBuy.imageList[0].path || '')}
              lazyLoad={false}
              style={{borderRadius: '4px'}}
              alt="社区拼团"
            />
          ) : (
            <div style={{
              height: '100%',
              backgroundColor: '#f5f5f5',
              borderRadius: '4px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center'
            }}>
              <span style={{color: '#999', fontSize: '12px'}}>加载中...</span>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default MyPage