import {useEffect, useState} from "react";
import {Map} from '@tarojs/components'
import {Search} from '@nutui/icons-react-taro'
import {Button, Input} from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro'
import {useRouter} from '@tarojs/taro'
import {getHjmCar, pageHjmCar} from "@/api/hjm/hjmCar";
import {HjmCar} from "@/api/hjm/hjmCar/model";
import './location.scss'

/**
 * 文章终极列表
 * @constructor
 */
const Location = () => {
  const {params} = useRouter();
  const [keywords, setKeywords] = useState<string>()
  const [item, setItem] = useState<HjmCar>()
  const [longitude, setLongitude] = useState<any>()
  const [latitude, setLatitude] = useState<any>()
  const [scale, setScale] = useState<any>(16)

  const onKeywords = (keywords: string) => {
    setKeywords(keywords)
  }

  // 获取当前位置
  const getLocation = async () => {
    try {
      const res = await Taro.getLocation({
        type: 'gcj02' //返回可以用于wx.openLocation的经纬度
      })
      if (res.latitude) {
        setLatitude(res.latitude)
      }
      if (res.longitude) {
        setLongitude(res.longitude)
      }
      console.log('当前位置：', res.latitude, res.longitude);
      return res;
    } catch (err) {
      console.error('获取位置失败：', err);
    }
  }

  // 打开地图选择位置
  // 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);
    setScale(16)
    getLocation()
    // 执行搜索
    if (keywords) {
      pageHjmCar({keywords}).then(res => {
        if (res?.list && res?.list?.length > 0) {
          const data = res?.list[0];
          setItem(data)
          setLatitude(data.latitude)
          setLongitude(data.longitude)
          setKeywords(data.code)
        }
      })
      return false;
    }
    // 获取车辆信息
    if (id) {
      getHjmCar(id).then(data => {
        setItem(data)
        setLatitude(data.latitude)
        setLongitude(data.longitude)
        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 fixed bottom-0 left-0 w-full z-20 bg-white p-4'}>
          <div className={'car-info-item'}>
            <div className={'car-info-item-title'}>
              最后更新时间：{item?.updateTime}
            </div>
            <div className={'car-info-item-content'}>
              操作员：{item?.driver}
            </div>
            <div className={'car-info-item-content'}>
              位置信息：{item?.address}
            </div>
          </div>
        </div>
      ) : ''}

      <Map
        id="map"
        longitude={longitude}
        latitude={latitude}
        scale={scale}
        markers={[{
          id: 1,
          latitude: latitude,
          longitude: longitude,
          // @ts-ignore
          name: '位置'
        }]}
        onTap={() => {
          console.log('map tap')
        }}
        style={{width: '100%', height: '100vh'}}
      />
    </>
  )
}
export default Location