import Taro from "@tarojs/taro"
import { useState, useEffect } from "react"
import { View, Map, Image } from "@tarojs/components"
import withLayout from '@/layouts'
import { getMachineryList } from '@/services/machinery'
import { useModel } from "@/store"
import CustomNav from "@/components/CustomNav"
import m1 from '@/assets/machinery/greenMachinery.png'
import m2 from '@/assets/machinery/orangeMachinery.png'
import m3 from '@/assets/machinery/repairMachinery.png'
import MachineryModel from './Model'
import './style.less'


export default withLayout((props) => {
  const { router } = props
  const { id } = router.params
  const [show, setShow] = useState(false)
  const { location } = useModel('location')
  const [machineryList, setMachineryList] = useState([])
  const [markerList, setMarkerList] = useState([])
  const [current, setCurrent] = useState()
  const [lot, setLot] = useState(112.106514)
  const [lat, setLat] = useState(32.685927)

  const locList = [
    {
      longitude: 112.106514,
      latitude: 32.685927
    },
    {
      longitude: 112.100406,
      latitude: 32.673406
    },
    {
      longitude: 112.06397,
      latitude: 32.670488
    },
    {
      longitude: 112.05434,
      latitude: 32.685684
    },
    {
      longitude: 112.058724,
      latitude: 32.701302
    },
    {
      longitude: 112.015102,
      latitude: 32.665504
    },
    {
      longitude: 112.010503,
      latitude: 32.685502
    },
    {
      longitude: 112.097747,
      latitude: 32.651764
    },
    {
      longitude: 112.149705,
      latitude: 32.664957
    },
    {
      longitude: 112.16185,
      latitude: 32.701241
    },
  ]
  const handleClick = (e) => {
    setCurrent(machineryList[e.markerId])
    setShow(true)
  }
  const goDetail = (val) => {
    Taro.navigateTo({ url: `/pages/machineryDetail/index?id=${val}` });
  }
  const goList = () => {
    Taro.navigateTo({ url: '/pages/machineryList/index' });
  }
  const changeRegion = () => {
    setShow(false)
  }
  useEffect(() => {
    if (id && machineryList && markerList.length != 0) {
      machineryList.forEach((item, index) => {
        if (item.machineryId == id) {
          setLot(markerList[index].longitude)
          setLat(markerList[index].latitude)
          setCurrent(machineryList[index])
          setShow(true)
          return
        }
      })
    }
  }, [id, machineryList, markerList])
  useEffect(() => {
    getMachineryList({ location: location }).then((res) => {
      setMachineryList(res.records)
      setMarkerList(res.records.map((item, index) => {
        return {
          id: index,
          longitude: locList[index % 10].longitude,
          latitude: locList[index % 10].latitude,
          iconPath: item.status == 0 ? m3 : (!item.jobStatus || item.jobStatus == 3) ? m2 : m1,
          width: 50,
          height: 50
        }
      }))
    })
  }, [])

  return (
    <View className='page-index'>
      <View className='index-navbar'>
        <CustomNav title='我的农机' />
      </View>
      <View className='index-container machineryMap'>
        <Map
          longitude={lot}
          latitude={lat}
          markers={markerList}
          className='map'
          onMarkerTap={handleClick}
          onRegionChange={changeRegion}
        />
        <MachineryModel visible={show} value={current} goDetail={goDetail} goList={goList} />
      </View>
    </View>
  )
})