import {useEffect, useState} from "react";
import Taro from  '@tarojs/taro'
import {ArrowLeft} from '@nutui/icons-react-taro'
import {NavBar, InfiniteLoading} from '@nutui/nutui-react-taro'
import {pageHjmCar} from "@/api/hjm/hjmCar";
import {HjmCar} from "@/api/hjm/hjmCar/model";
import BestSellers from "./BestSellers";

/**
 * 文章终极列表
 * @constructor
 */
const Index = () => {
  const [statusBarHeight, setStatusBarHeight] = useState<number>()
  const [list, setList] = useState<HjmCar[]>([])

  const reload = () => {
    // 获取车辆列表
    pageHjmCar({driverId: Taro.getStorageSync('UserId')}).then(res => {
      setList(res?.list || [])
    })
  }

  useEffect(() => {
    Taro.getSystemInfo({
      success: (res) => {
        setStatusBarHeight(res.statusBarHeight)
      },
    })
    reload()
  }, [])


  return (
    <>
      <NavBar
        fixed={true}
        style={{marginTop: `${statusBarHeight}px`}}
        onBackClick={() => {
        }}
        left={
          <>
            <ArrowLeft size={18} onClick={() => {Taro.navigateBack()}} />
            {/*<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>
      <InfiniteLoading
        className={'w-full fixed left-0 top-24'}
      >
        <BestSellers data={list}/>
      </InfiniteLoading>
    </>
  )
}
export default Index
