import {useEffect, useState} from "react"; // 添加 useCallback 引入
import Taro, {useShareAppMessage, useShareTimeline} from '@tarojs/taro';
import {Space, NavBar} from '@nutui/nutui-react-taro'
import {Search, Received, Scan} from '@nutui/icons-react-taro'
import GoodsList from "@/components/GoodsList";

function Kefu() {
  const [statusBarHeight, setStatusBarHeight] = useState<number>()

  useShareTimeline(() => {
    return {
      title: '注册即可开通 - webSoft云应用'
    };
  });

  useShareAppMessage(() => {
    return {
      title: '注册即可开通 - webSoft云应用',
      success: function (res) {
        console.log('分享成功', res);
      },
      fail: function (res) {
        console.log('分享失败', res);
      }
    };
  });

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

  return (
    <>
      <NavBar
        fixed={true}
        style={{marginTop: `${statusBarHeight}px`}}
        onBackClick={() => {
        }}
        left={
          <>
            <div className={'flex justify-between items-center w-full'}>
              <Space>
                <Search size={18} className={'mx-1'}/>
                <Received size={18} className={'mx-1'}/>
                <Scan size={18} className={'mx-1'}/>
              </Space>
            </div>
          </>
        }
      >
        <span>商品</span>
      </NavBar>
      <GoodsList/>
    </>
  );
}

export default Kefu;