import {useEffect, useState} from 'react'
import {View} from '@tarojs/components'
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";
import {ShopGoods} from "@/api/shop/shopGoods/model";
import {listShopGoods} from "@/api/shop/shopGoods";


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

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

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

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

  return (
    <View className="flex p-2 justify-between" style={{height: `${carouselHeight}px`}}>
      {/* 左侧轮播图区域 */}
      <View style={{width: '50%', 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'}}
              />
            </Swiper.Item>
          ))}
        </Swiper>
      </View>

      {/* 右侧上下图片区域 - 从API获取数据 */}
      <View className="flex flex-col" style={{width: '50%', height: '100%'}}>
        {/* 上层图片 - 使用今日热卖素材 */}
        <View className={'ml-2 bg-white rounded-lg'}>
          <View className={'px-3 my-2 font-bold text-sm'}>今日热卖</View>
          <View className={'px-3 flex'} style={{
            height: '110px'
          }}>
            {
              hotGoods.map(item => (
                <View className={'item flex flex-col mr-4'}>
                  <Image
                    width={70}
                    height={70}
                    src={item.image}
                    mode={'scaleToFill'}
                    lazyLoad={false}
                    style={{
                      borderRadius: '4px'
                    }}
                    onClick={() => navTo('/shop/category/index?id=4424')}
                  />
                  <View className={'text-xs py-2'}>到手价¥{item.price}</View>
                </View>
              ))
            }
          </View>
        </View>

        {/* 下层图片 - 使用社区拼团素材 */}
        <View className={'ml-2 bg-white rounded-lg mt-3'}>
          <View className={'px-3 my-2 font-bold text-sm'}>走进社区</View>
          <View className={'rounded-lg px-3 pb-3'}>
            <Image
              width={'100%'}
              height={100}
              src={'https://oss.wsdns.cn/20250919/941c99899e694a7798cab3bb28f1f238.png?x-oss-process=image/resize,m_fixed,w_750/quality,Q_90'}
              mode={'scaleToFill'}
              lazyLoad={false}
              style={{
                borderRadius: '4px'
              }}
              onClick={() => navTo('cms/detail/index?id=10109')}
            />
          </View>
        </View>
      </View>
    </View>
  )
}

export default MyPage