import Taro, { useState } from '@tarojs/taro'
import { View, CoverView } from '@tarojs/components'
import PoiAround from '@/components/amap/PoiAround'
import Tab from './Tab'
import { POI_TYPES } from '@/utils/amap'
import './around.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()
        }
    }
    const tomapDetail = (e) => {
        const { buildingId } = this.props
        Taro.navigateTo({
            url: `/pages/project/detail/map?id=` + buildingId
        })
    }
    return (
        <View className="around-box">
            <View className="around-header">
                <PoiAround mapClick={tomapDetail} style="width:100%;height:100%" current={curMarker} coverShow={true} longitude={lng} latitude={lat} onMarkerClick={handleMarkerTap} />
                {/* <PoiAround mapClick={tomapDetail} style="width:100%;height:100%"  current={curMarker} coverShow={true} markers={markers} longitude={lng} latitude={lat} onMarkerClick={handleMarkerTap} /> */}
            </View>
            <View className="around-body">
                <Tab dataset={dataList} className="around-project" onChange={handleTabChange} />
            </View>
        </View>
    )
}
