import {useEffect, useState} from "react";
import {Image, Tabs, Empty, Sticky} from '@nutui/nutui-react-taro'
import {View, Text} from '@tarojs/components';
import Taro from "@tarojs/taro";
import {ShopGoods} from "@/api/shop/shopGoods/model";
import {pageShopGoods} from "@/api/shop/shopGoods";
import './GoodsList.scss';

const GoodsList = (props: {onStickyChange?: (isSticky: boolean) => void}) => {
  const [tab1value, setTab1value] = useState<string | number>('0')
  const [list, setList] = useState<ShopGoods[]>([])
  const [stickyStatus, setStickyStatus] = useState<boolean>(false)

  const reload = () => {
    pageShopGoods({}).then(res => {
      setList(res?.list || []);
    })
  }

  // 处理粘性布局状态变化
  const onStickyChange = (isSticky: boolean) => {
    setStickyStatus(isSticky)
    // 通知父组件粘性状态变化
    props.onStickyChange?.(isSticky)
    console.log('Tabs 粘性状态:', isSticky ? '已固定' : '取消固定')
  }

  // 获取小程序系统信息
  const getSystemInfo = () => {
    const systemInfo = Taro.getSystemInfoSync()
    // 状态栏高度 + 导航栏高度 (一般为44px)
    return (systemInfo.statusBarHeight || 0) + 44
  }

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

  return (
    <>
      <View className={'py-3'} style={{paddingTop: '0'}}>
        {/* Tabs粘性布局组件 */}
        <Sticky
          threshold={getSystemInfo()}
          onChange={onStickyChange}
          style={{
            zIndex: 999,
            backgroundColor: stickyStatus ? '#ffffff' : 'transparent',
            boxShadow: stickyStatus ? '0 2px 8px rgba(0,0,0,0.1)' : 'none',
            transition: 'all 0.3s ease',
            marginTop: stickyStatus ? '0' : '-12px'
          }}
        >
          <Tabs
            value={tab1value}
            className={'w-full'}
            onChange={(value) => {
              setTab1value(value)
            }}
            style={{
              backgroundColor: 'transparent',
              paddingTop: stickyStatus ? '0' : '8px',
              paddingBottom: stickyStatus ? '8px' : '0',
            }}
            activeType="smile"
          >
            <Tabs.TabPane title="今日主推">
            </Tabs.TabPane>
            <Tabs.TabPane title="即将到期">
            </Tabs.TabPane>
            <Tabs.TabPane title="活动预告">
            </Tabs.TabPane>
          </Tabs>
        </Sticky>

        <View className={'bg-gray-50'}>
          {/* 今日主推 - 瀑布流布局 */}
          {tab1value == '0' && (
            <View className={'grid grid-cols-2 gap-2 pb-2 p-2 '}>
              {list?.map((item, index) => {
                return (
                  <View key={index} className={'goods-waterfall-item bg-white'} style={{
                    borderRadius: '0 0 6px 6px'
                  }}>
                    <View className={'goods-card'}>
                      <Image
                        src={item.image}
                        lazyLoad={false}
                        style={{
                          borderRadius: '6px 6px 0 0',
                          height: '180px'
                        }}
                        onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}
                      />
                      <View className={'goods-info p-2 flex flex-col'}>
                        <View className={'goods-title text-sm font-bold'}>{item.name}</View>
                        <View className={'goods-meta'}>
                          <Text className={'goods-comments text-gray-400 text-xs'}>{item.comments}</Text>
                        </View>
                        <View className={'goods-price-section flex justify-between'}>
                          <View className={'goods-price'}>
                            <Text className={'price-unit text-orange-600 font-bold text-lg'}>￥</Text>
                            <Text className={'price-number text-orange-600 font-bold text-lg'}>{item.price}</Text>
                          </View>
                          <View className={'goods-actions'}>
                            <Text className={'goods-sales text-gray-400 text-xs'}>已售 {item.sales}</Text>
                          </View>
                        </View>
                      </View>
                    </View>
                  </View>
                )
              })}
            </View>
          )}

          {/* 即将到期 */}
          {tab1value == '1' && (
            <Empty
              size={'small'}
              description="暂无即将到期的商品"
              style={{
                background: 'transparent',
              }}
            />
          )}

          {/* 活动预告 */}
          {tab1value == '2' && (
            <Empty
              size={'small'}
              description="暂无活动预告"
              style={{
                background: 'transparent',
              }}
            />
          )}
        </View>
      </View>
    </>
  )
}
export default GoodsList
