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 {useRouter} from '@tarojs/taro'
import {getHjmCarByCode} from "@/api/hjm/hjmCar";
import {HjmCar} from "@/api/hjm/hjmCar/model";
import GPS from '@/utils/gpsUtil.js';
import tricycleIcon from '@/assets/icons/delivery_tricycle.png';
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 [showCircles, setShowCircles] = useState<boolean>(false)
  const [points, setPoints] = useState<any[]>([])

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

  // 通用的坐标字符串转数组函数
  const parseCoordinateString = (coordStr: string) => {
    if (!coordStr) return {points: []};

    try {
      // 分割坐标点
      const coordPairs = coordStr.split(';');

      // 转为多边形点数组
      const points = coordPairs.map(coord => {
        const [lat, lng] = coord.split(',');
        const latitude = parseFloat(lat);
        const longitude = parseFloat(lng);

        // 确保解析后的坐标是有效数字
        if (isNaN(latitude) || isNaN(longitude)) {
          throw new Error(`无效坐标: ${lat}, ${lng}`);
        }

        return {
          latitude: latitude,
          longitude: longitude
        }
      });

      return {points};
    } catch (error) {
      console.error('解析坐标字符串失败:', error);
      return {points: []};
    }
  }

  const reload = () => {
    const code = params.id;
    setScale(14)
    // 执行搜索
    if (keywords) {
      getHjmCarByCode(keywords).then(data => {
        console.log('执行搜索', data)
        setItem(data)
        // 转换WGS84坐标到GCJ02坐标
        if (data.latitude && data.longitude &&
            !isNaN(data.latitude) &&
            !isNaN(data.longitude) &&
            isFinite(data.latitude) &&
            isFinite(data.longitude)) {
          console.log('原始坐标:', data.latitude, data.longitude)
          try {
            // 确保坐标是数字类型
            const lat = Number(data.latitude);
            const lng = Number(data.longitude);
            const transformed = GPS.gcj_encrypt(lat, lng);
            // 确保转换结果有效
            if (transformed && !isNaN(transformed.lat) && !isNaN(transformed.lng)) {
              setLatitude(transformed.lat);
              setLongitude(transformed.lng);
              console.log('转换结果:', transformed)
            } else {
              // 如果转换结果无效，使用原始坐标
              setLatitude(data.latitude);
              setLongitude(data.longitude);
              console.log('转换失败:', data.longitude)
            }
          } catch (error) {
            console.error('坐标转换错误:', error);
            // 如果转换出错，使用原始坐标
            setLatitude(data.latitude);
            setLongitude(data.longitude);
          }
        } else {
          // 如果坐标无效，使用原始坐标
          setLatitude(data.latitude);
          setLongitude(data.longitude);
        }

        setKeywords(data.code)
        if (data.fence) {
          // 方法2：使用实际的 fence 数据（如果是字符串格式）
          const coordStr = data.fence.points || '';

          // 使用通用函数解析坐标字符串
          const {points} = parseCoordinateString(coordStr);

          // 转换围栏坐标点
          if (points.length > 0) {
            const transformedPoints = points.map(point => {
              // 确保坐标有效
              if (point.latitude && point.longitude &&
                  !isNaN(point.latitude) &&
                  !isNaN(point.longitude) &&
                  isFinite(point.latitude) &&
                  isFinite(point.longitude)) {
                try {
                  // 确保坐标是数字类型
                  const lat = Number(point.latitude);
                  const lng = Number(point.longitude);
                  const transformed = GPS.gcj_encrypt(lat, lng);
                  // 确保转换结果有效
                  if (transformed && !isNaN(transformed.lat) && !isNaN(transformed.lng)) {
                    return {
                      latitude: transformed.lat,
                      longitude: transformed.lng
                    };
                  } else {
                    // 如果转换结果无效，返回原始坐标
                    return point;
                  }
                } catch (error) {
                  console.error('围栏坐标转换错误:', error);
                  // 如果转换出错，返回原始坐标
                  return point;
                }
              }
              // 如果坐标无效，返回原始坐标
              return point;
            });
            setPoints(transformedPoints);
          }

          console.log('解析结果 - 多边形点:', points);
          setShowCircles(true)
        }
      })
      return false;
    }
    // 获取车辆信息
    if (code) {
      getHjmCarByCode(code).then(data => {
        setItem(data)
        // 转换WGS84坐标到GCJ02坐标
        if (data.latitude && data.longitude &&
            !isNaN(data.latitude) &&
            !isNaN(data.longitude) &&
            isFinite(data.latitude) &&
            isFinite(data.longitude)) {
          try {
            // 确保坐标是数字类型
            const lat = Number(data.latitude);
            const lng = Number(data.longitude);
            const transformed = GPS.gcj_encrypt(lat, lng);
            // 确保转换结果有效
            if (transformed && !isNaN(transformed.lat) && !isNaN(transformed.lng)) {
              setLatitude(transformed.lat);
              setLongitude(transformed.lng);
            } else {
              // 如果转换结果无效，使用原始坐标
              setLatitude(data.latitude);
              setLongitude(data.longitude);
            }
          } catch (error) {
            console.error('坐标转换错误:', error);
            // 如果转换出错，使用原始坐标
            setLatitude(data.latitude);
            setLongitude(data.longitude);
          }
        } else {
          // 如果坐标无效，使用原始坐标
          setLatitude(data.latitude);
          setLongitude(data.longitude);
        }

        setKeywords(data.code)
        if (data.fence) {
          // 方法2：使用实际的 fence 数据（如果是字符串格式）
          const coordStr = data.fence.points || '';

          // 使用通用函数解析坐标字符串
          const {points} = parseCoordinateString(coordStr);

          // 转换围栏坐标点
          if (points.length > 0) {
            const transformedPoints = points.map(point => {
              // 确保坐标有效
              if (point.latitude && point.longitude &&
                  !isNaN(point.latitude) &&
                  !isNaN(point.longitude) &&
                  isFinite(point.latitude) &&
                  isFinite(point.longitude)) {
                try {
                  // 确保坐标是数字类型
                  const lat = Number(point.latitude);
                  const lng = Number(point.longitude);
                  const transformed = GPS.gcj_encrypt(lat, lng);
                  // 确保转换结果有效
                  if (transformed && !isNaN(transformed.lat) && !isNaN(transformed.lng)) {
                    return {
                      latitude: transformed.lat,
                      longitude: transformed.lng
                    };
                  } else {
                    // 如果转换结果无效，返回原始坐标
                    return point;
                  }
                } catch (error) {
                  console.error('围栏坐标转换错误:', error);
                  // 如果转换出错，返回原始坐标
                  return point;
                }
              }
              // 如果坐标无效，返回原始坐标
              return point;
            });
            setPoints(transformedPoints);
          }

          console.log('解析结果 - 多边形点:', points);
          setShowCircles(true)
        }

        // pushSubscriptionMessages({
        //   toUser: 'ozH7Z7VioC3_-5m_z0DfD9Rd7kM4',
        //   templateId: 'oMckHaNgNT-ivInYF5DtCcqyd9O-i1hP_G0jQALsx54',
        //   url: '/pages/index/index',
        //   miniprogramState: 'trial',
        //   data: {
        //     phrase6: {
        //       value: data?.driver ?? '未知',
        //       color: '#333'
        //     },
        //     time4: {
        //       value: data?.createTime ?? '未知',
        //       color: '#333'
        //     },
        //     phrase7: {
        //       value: '离开围栏',
        //       color: '#333'
        //     },
        //     thing11: {
        //       value: data?.fenceName ?? '未知',
        //       color: '#333'
        //     },
        //     car_number12: {
        //       value: data.code,
        //       color: '#333'
        //     }
        //   }
        // })
        //   .then(res => {
        //     console.log('订阅消息发送成功', res)
        //   })
        //   .catch(err => {
        //     console.error('订阅消息发送失败', err)
        //   })

      })
    }
  }

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

  // 监听圈圈数据变化
  useEffect(() => {
  }, [showCircles])

  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-content'}>
              操作人员：{item?.driver}
            </div>
            <div className={'car-info-item-content pr-6'}>
              电子围栏：{item?.fenceName} ({item?.inFence ? '围栏内' : '围栏外'})
            </div>
            <div className={'car-info-item-content pr-6'}>
              当前车速：{item?.speed}
            </div>
            <div className={'car-info-item-title'}>
              更新时间：{item?.updateTime}
            </div>
          </div>
        </div>
      ) : ''}

      <Map
        id="map"
        longitude={longitude}
        latitude={latitude}
        scale={scale}
        markers={
          latitude && longitude &&
          !isNaN(latitude) && !isNaN(longitude) &&
          isFinite(latitude) && isFinite(longitude) && item
          ? [{
              id: 1,
              latitude: latitude,
              longitude: longitude,
              iconPath: tricycleIcon,
              width: 32,
              height: 32,
              label: {
                content: item.code || '',
                color: '#ffffff',
                fontSize: 14,
                bgColor: '#1989fa',
                borderRadius: 5,
                padding: 5,
                textAlign: 'center',
                anchorX: 0,
                anchorY: 0,
                borderWidth: 1,
                borderColor: '#1989fa'
              }
            }]
          : []
        }
        polygons={
          points.length > 0 &&
          points.every(point =>
            point.latitude && point.longitude &&
            !isNaN(point.latitude) && !isNaN(point.longitude) &&
            isFinite(point.latitude) && isFinite(point.longitude)
          )
          ? [
            {
              points: points,
              color: '#ff0000',
              strokeWidth: 3
            }
          ]
          : []
        }
        onTap={() => {
          console.log('map tap')
        }}
        onError={(e) => {
          console.error('地图组件错误:', e)
        }}
        style={{width: '100%', height: '100vh'}}
      />

    </>
  )
}
export default Location
