import {useEffect} from "react";
import {Image, Space} from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro'
import {HjmCar} from "@/api/hjm/hjmCar/model";

interface BestSellersProps {
  data: HjmCar[];
}

const BestSellers = (props: BestSellersProps) => {
  const reload = () => {
    // 可以在这里添加重新加载逻辑
  }

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

  return (
    <div className={'px-2 mb-4'}>
      <div className={'flex flex-col justify-between items-center rounded-lg px-3'}>
        {props.data?.map((item, index) => {
          return (
            <div key={item.id || index} className={'flex bg-white rounded-lg w-full p-3 mb-3'}
                 onClick={() => Taro.navigateTo({url: '/hjm/query?id=' + item.code})}>
              { item.image && (
                <Image src={JSON.parse(item.image)[0].url} mode={'scaleToFill'}
                       radius="10%" width="80" height="80"/>
              )}
              <div className={'mx-3 flex flex-col'}>
                <Space direction={'vertical'}>
                  <div className={'car-no text-lg font-bold'}>{item.code}</div>
                  <div className={'flex text-xs text-gray-500'}>快递公司：<span
                    className={'text-gray-700'}>{item.parentOrganization}</span></div>
                  <div className={'flex text-xs text-gray-500'}>所属站点：<span
                    className={'text-gray-700'}>{item.organization}</span></div>
                  <div className={'flex text-xs text-gray-500'}>车架号：<span
                    className={'text-gray-700'}>{item.vinCode}</span></div>
                  <div className={'flex text-xs text-gray-500'}>保险状态：<span className={'text-green-600'}>{item.insuranceStatus}</span>
                  </div>
                  <div className={'flex text-xs text-gray-500'}>绑定操作员：<span
                    className={'text-gray-700'}>{item.driver}</span></div>
                </Space>
              </div>
            </div>
          )
        })}
        {(!props.data || props.data.length === 0) && (
          <div className={'flex justify-center items-center py-10'}>
            <div className={'text-gray-500 text-sm'}>暂无数据</div>
          </div>
        )}
      </div>
      <div style={{height: '170px'}}></div>
    </div>
  )
}
export default BestSellers