import {useEffect, useState} from "react";
import {useRouter} from '@tarojs/taro'
import {getHjmCar, pageHjmCar} from "@/api/hjm/hjmCar";
import {HjmCar} from "@/api/hjm/hjmCar/model";
import {Image,Cell} from '@nutui/nutui-react-taro'
import './location.scss'

/**
 * 电子围栏
 * @constructor
 */
const Fence = () => {
  const {params} = useRouter();
  const [keywords, setKeywords] = useState<string>()
  const [item, setItem] = useState<HjmCar>()

  // 打开地图选择位置
  // const chooseLocation = async () => {
  //   try {
  //     const res = await Taro.chooseLocation({
  //       latitude,  // 默认纬度
  //       longitude // 默认经度
  //     })
  //     console.log('选择的位置：', res);
  //   } catch (err) {
  //     console.error('选择位置失败：', err);
  //   }
  // }
  const reload = () => {
    const id = Number(params.id);
    // 执行搜索
    if (keywords) {
      pageHjmCar({keywords}).then(res => {
        if (res?.list && res?.list?.length > 0) {
          const data = res?.list[0];
          setItem(data)
          setKeywords(data.code)
        }
      })
      return false;
    }
    // 获取车辆信息
    if (id) {
      getHjmCar(id).then(data => {
        setItem(data)
        setKeywords(data.code)
      })
    }
  }

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


  return (
    <>
      {/*<div className={'fixed z-20 top-5 left-0 w-full'}>*/}
      {/*  <div className={'px-4'}>*/}
      {/*    <div*/}
      {/*      style={{*/}
      {/*        display: 'flex',*/}
      {/*        alignItems: 'center',*/}
      {/*        background: '#fff',*/}
      {/*        padding: '0 10px',*/}
      {/*        borderRadius: '20px'*/}
      {/*      }}*/}
      {/*    >*/}
      {/*      <Search/>*/}
      {/*      <Input*/}
      {/*        placeholder="车辆编号"*/}
      {/*        value={keywords}*/}
      {/*        onChange={onKeywords}*/}
      {/*      />*/}
      {/*      <div*/}
      {/*        className={'flex items-center'}*/}
      {/*      >*/}
      {/*        <Button type="warning" onClick={reload}>*/}
      {/*          查询*/}
      {/*        </Button>*/}
      {/*      </div>*/}
      {/*    </div>*/}
      {/*  </div>*/}
      {/*</div>*/}
      {item ? (
        <div className={'car-info w-full bg-white'}>
          <Image src={item?.image} mode={'widthFix'}  width={'100%'} className={'bg-gray-50'}/>
          <div className={'px-2'}>
            <Cell className={'car-info-item-title'}>
              车辆编号：{item?.code}
            </Cell>
            <Cell className={'car-info-item-title'}>
              快递公司：{item?.kuaidi}
            </Cell>
            <Cell className={'car-info-item-title'}>
              管理负责人：{item?.kuaidiAdmin}
            </Cell>
            <Cell className={'car-info-item-content'}>
              操作员：{item?.driver}
            </Cell>
            <Cell className={'car-info-item-content'}>
              保险状态：{item?.insuranceStatus}
            </Cell>
            <Cell className={'car-info-item-content'}>
              GPS编号：{item?.gpsNo}
            </Cell>
            <Cell className={'car-info-item-content'}>
              电子围栏：{item?.fenceName}
            </Cell>
          </div>
        </div>
      ) : ''}
    </>
  )
}
export default Fence