import {useEffect} from "react";
import {Image, Space,Button} from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro'
import {View} from '@tarojs/components'
import {HjmViolation} from "@/api/hjm/hjmViolation/model";
import navTo from "@/utils/common";

interface BestSellersProps {
  data: HjmViolation[];
}

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

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

  return (
    <View className={'px-2 mb-4'}>
      <View className={'flex flex-col justify-between items-center rounded-lg px-3'}>
        {props.data?.map((item, index) => {
          return (
            <View key={item.id || index} className={'flex bg-white rounded-lg w-full p-3 mb-3'}
                 onClick={() => Taro.navigateTo({url: `/hjm/violation/detail?id=${item.code}`})}>
              <View className={'flex flex-col'}>
                <Image src={item.image && JSON.parse(item.image)[0].url} mode={'scaleToFill'}
                       radius="10%" width="70" height="70" className={'mb-1'}/>
                {item.userId == Taro.getStorageSync('UserId') && (
                  <Button type={'default'} size="small" onClick={() => navTo(`/hjm/violation/add?id=${item.id}`)}>修改</Button>
                )}
              </View>
              <View className={'mx-3 flex flex-col'}>
                <Space direction={'vertical'}>
                  <View className={'car-no text-lg font-bold'}>{item.title}</View>
                  <View className={'flex text-xs text-gray-500'}>车辆编号：<span
                    className={'text-gray-700'}>{item.code}</span></View>
                  <View className={'flex text-xs text-gray-500'}>违章描述：<span
                    className={'text-gray-700'}>{item.comments}</span></View>
                  <View className={'flex text-xs text-gray-500'}>创建时间：<span
                    className={'text-gray-700'}>{item.createTime}</span></View>
                </Space>
              </View>
            </View>
          )
        })}
        {(!props.data || props.data.length === 0) && (
          <View className={'flex justify-center items-center py-10'}>
            <View className={'text-gray-500 text-sm'}>暂无数据</View>
          </View>
        )}
      </View>
      <View style={{height: '170px'}}></View>
    </View>
  )
}
export default BestSellers