import {useState} from "react"; // 添加 useCallback 引入
import Taro, {useDidShow} from '@tarojs/taro'
import {NavBar, Space, Empty, Button, ConfigProvider} from '@nutui/nutui-react-taro'
import {Search} from '@nutui/icons-react-taro'
import OrderList from "./components/OrderList";
import {ShopOrder} from "@/api/shop/shopOrder/model";
import {pageShopOrder} from "@/api/shop/shopOrder";
import './order.scss'

function Order() {
  const [statusBarHeight, setStatusBarHeight] = useState<number>()
  const [list, setList] = useState<ShopOrder[]>([])


  const reload = async () => {
    const orders = await pageShopOrder({userId: Taro.getStorageSync('UserId')})
    if (orders) {
      setList(orders.list || [])
    }
  }

  useDidShow(() => {
    Taro.getSystemInfo({
      success: (res) => {
        setStatusBarHeight(res.statusBarHeight)
      },
    })
    // 设置导航栏背景色（含状态栏）
    Taro.setNavigationBarColor({
      backgroundColor: '#ffffff', // 状态栏+导航栏背景色
      frontColor: 'black',       // 状态栏文字颜色（仅支持 black/white）
    });
    reload().then()
  }); // 新增: 添加滚动事件监听

  return (
    <>
      <NavBar
        fixed={true}
        style={{marginTop: `${statusBarHeight}px`, backgroundColor: 'transparent'}}
        left={
          <>
            <div className={'flex justify-between items-center w-full'}>
              <Space>
                <Search size={18} className={'mx-1'}/>
                {/*<Filter size={18} className={'mx-1'}/>*/}
              </Space>
            </div>
            {/*<SearchBar shape="round" maxLength={5} style={{paddingLeft: '1px'}}/>*/}
            {/*<div className={'flex flex-col text-center justify-center items-center'}>*/}
            {/*  <Filter size={14}/>*/}
            {/*  <div className={'text-xs text-gray-600 whitespace-nowrap'}>筛选</div>*/}
            {/*</div>*/}
          </>
        }
      >
        <span>我的订单</span>
      </NavBar>
      {/*暂无订单*/}
      {list.length == 0 && (
        <ConfigProvider>
          <div className={'h-full flex flex-col justify-center items-center'} style={{
            height: 'calc(100vh - 150px)',
          }}>
            <Empty
              style={{
                backgroundColor: 'transparent'
              }}
              description="您还没有订单哦"
            />
            <Space>
              <Button type="success" fill="dashed"
                      onClick={() => Taro.switchTab({url: '/pages/index/index'})}>去挑选商品</Button>
            </Space>
          </div>
        </ConfigProvider>
      )}
      {/*订单列表*/}
      {
        list.length > 0 && (
          <OrderList data={list}/>
        )
      }
    </>
  );
}

export default Order;