import { useEffect, useMemo, useState } from 'react'
import { Map, CoverView } from '@tarojs/components'
import '@/assets/css/iconfont.css'
import './index.scss'

const poiTypes = [
  { label: '交通', value: 'Transport', class: 'iconfont icon-jiaotong' },
  { label: '商业', value: 'Mall', class: 'iconfont icon-shangye' },
  { label: '学校', value: 'Edu', class: 'iconfont icon-xuexiao' },
  { label: '医院', value: 'Hospital', class: 'iconfont icon-yiyuan' },
  { label: '银行', value: 'Bank', class: 'iconfont icon-yinhang' },
  { label: '餐饮', value: 'Restaurant', class: 'iconfont icon-canyin' },
]

export default function Periphery (props) {
  const { Info } = props

  const [pois, setPois] = useState([])
  const [markers, setMarkers] = useState([])

  const loc = useMemo(() => (Info?.coordinate ? Info.coordinate.split(',') : []), [Info?.coordinate])

  const CutTab = () => {
    return () => {
      
    }
  }

  useEffect(() => {
    if (!Info?.coordinate) {
      setMarkers([])
      return;
    }

    const mks = []
    // 项目位置
    mks.push({
      id: -1,
      longitude: loc[0],
      latitude: loc[1],
      iconPath: '',
      width: 24,
      height: 36,
      customCallout: {
        anchorY: 0,
        anchorX: 0,
        display: 'ALWAYS',
      }
    })

    setMarkers(mks)

  }, [Info, loc])

  return (
    <view className='components Periphery'>

      <view className='Title flex-h'>
        <view className='flex-item'>
          <text>位置及周边配套</text>
        </view>
      </view>

      <view className='Map'>
        <view>
          <Map
            id='poi-around'
            show-location
            scale={12}
            markers={markers}
            longitude={loc[0]}
            latitude={loc[1]}
            // enable-enableScroll
            // enable-zoom
          >
            <CoverView slot='callout' className='marker-callout'>
              <CoverView markerId={-1} className='marker-project'>{Info.buildingName}</CoverView>
            </CoverView>
          </Map>
        </view>
      </view>

      <view className='List flex-h'>
        {
          poiTypes.map((item) => (
            <view className='flex-item' key={item.value} onClick={CutTab(item.value)}>
              <text className={item.class}></text>
              <text>{item.label}(123)</text>
            </view>
          ))
        }
      </view>

    </view>
  )
}