import Taro, { useState } from '@tarojs/taro'
import { View } from '@tarojs/components'
import PoiAround from '@/components/amap/PoiAround'
import Tab from './Tab'
import Pannel from './Pannel'
import { POI_TYPES } from '@/utils/amap'
import './style.scss'

export default function Around(props) {
  const detail = props.building || {}

  const [lat, lng] = (detail.coordinate || '').split(',')
  const poiDatas = typeof detail.mapJson === 'string' ? JSON.parse(detail.mapJson) : []

  // 展示内容数组
  const dataList = POI_TYPES.map((poi) => {
    const jsonData = poiDatas.filter(x => x.key === poi.key)[0] || {}
    const data = JSON.parse(jsonData.data || '[]')
    const manualData = (detail[`building${poi.key}`] === '' ? [] : (detail[`building${poi.key}`] || '').split(','))

    return {
      ...poi,
      data,
      manualData,
      num: data.length + manualData.length,
    }
  }).filter(x => x.num)

  // 所有的 markers
  const markersList = dataList.map((item) => {
    const mapJson = item.data || '[]'
    return (mapJson || []).map((it) => {
      const [longitude, latitude] = (it.location || '').split(',')

      return {
        id: it.id,
        latitude,
        longitude,
        name: it.name,
        address: it.address,
      }
    })
  })

  // 部分默认值
  const [curTab, setCurTab] = useState(0)
  const [markers, setMarkers] = useState(markersList[curTab])
  const [curMarker, setCurMarker] = useState()

  // tab 切换
  const handleTabChange = (index, tabItem) => {
    setCurTab(index)
    setMarkers(markersList[index])
  }

  // marker 点切换
  const handleMarkerTap = (marker) => {
    setCurMarker(marker.id)
  }

  const goto = () => {
    if (typeof props.onAction === 'function') {
      props.onAction()
    }
  }

  return (
    <View >
      <View style="  position: fixed;top: 0; width: 100%; height: 840rpx;">
        <PoiAround style="width: 100vw; height: 840rpx;" coverShow={false} current={curMarker} markers={markers} longitude={lng} latitude={lat} onMarkerClick={handleMarkerTap} />
      </View>
      <ScrollView
        enableBackToTop
        style=" padding-top: 800rpx; background: transparent;"
        scrollY>
        <View className="around-box" style="border-radius: 40rpx 40rpx 0 0;">
          <View className="building-con">
            <View>
              <View className="building-name">{detail.buildingName}</View>
              <View className="building-address"><Image className="location" src={require('@/assets/location.png')}></Image>{detail.address}</View>
            </View>
            <View className="building-go" onClick={goto}>前往<Image className="goto" src={require('@/assets/goto.png')}></Image></View>
          </View>
          <View className="around-body">
            <Tab dataset={dataList} className="around-tab" onChange={handleTabChange} />
            <Pannel active={curMarker} dataset={dataList[curTab]} onChange={handleMarkerTap} />
            <View className="around-hr" />
          </View>
        </View>
      </ScrollView>
    </View>
  )
}
