import { wxRequestPost } from "@utils/promise-wx-api";
const type1MarkerIcons = [
    { name: '1', value: '../../images/jiancedian1.png' },
    { name: '3', value: '../../images/jiancedian2.png' },
    { name: '5', value: '../../images/jiancedian3.png' },
    { name: '99', value: '../../images/jiancedian4.png' }
]
const type2MarkerIcons = [
    { name: '1', value: '../../images/jiezhongdian1.png' },
    { name: '3', value: '../../images/jiezhongdian2.png' },
    { name: '5', value: '../../images/jiezhongdian3.png' },
    { name: '99', value: '../../images/jiezhongdian4.png' }
]
const noAvailableVaccinesIcon = '../../images/wuyimiao.png'

function getMarkerIconPath (type: any, marker: any) {
    let iconPath = ''
    if (type == '1') {
        type1MarkerIcons.forEach((item: any) => {
            if (item.name == marker.kmNum) {
                iconPath = item.value
            }
        })
    } else {
        type2MarkerIcons.forEach((item: any) => {
            if (item.name == marker.kmNum) {
                iconPath = item.value
            }
            if (marker.noAvailableVaccines == '1') {
                iconPath = noAvailableVaccinesIcon
            }
        })
    }
    return iconPath
}

Page({
    data: {
        type: '1', // 1-jiancedian 2-jiezhongdian
        longitude: 120.37914,
        latitude: 36.088408,
        mapScale: 14.35, // 地图缩放级别
        markers: [], // 地图打点
        markerList: [], // 打点数据
        mapCircles: [], // 绘制圆圈范围
        shrink: true, // true-收起列表 false-展开列表
        scrollInto: 'item-0'
    },
    onLoad: function (options) {
        if (options.type) {
            this.setData({
                type: options.type
            })
        }
        this.mapCtx = wx.createMapContext("device-map")
        // 监听聚合事件
        // this.mapCtx.on("markerClusterClick", () => {
        //   console.log("markerClusterClick")
        // })
        this.showMyPosition().then(res => {
            this.getMapData()
        })
    },

    // 添加聚合类点标记
    addMarkers() {
        const marker = {
            id: 0,
            iconPath: '',
            width: 50,
            height: 50,
            callout: {
                content: '',
                color: "#fff",
                fontSize: 16,
                borderWidth: 2,
                borderRadius: 12,
                bgColor: "#393d48cc",
                padding: 6,
                display: "BYCLICK",
                textAlign: "center"
            },
            // joinCluster: true,
            // customCallout: {
            //     anchorY: 0,
            //     anchorX: 0,
            //     display: 'ALWAYS'
            // },
        }

        this.data.markerList.forEach(markerPoint => {
            const markerIcon = getMarkerIconPath(this.data.type, markerPoint)
            const { markerId, name, longitude, latitude } = markerPoint
            const newMarker = Object.assign({}, marker, {
                id: markerId,
                longitude: parseFloat(longitude),
                latitude: parseFloat(latitude),
                iconPath: markerIcon,
                callout: {
                    content: name,
                    color: "#666666",
                    fontSize: 14,
                    borderWidth: 2,
                    borderRadius: 4,
                    bgColor: "#ffffff",
                    padding: 6,
                    display: "BYCLICK",
                    textAlign: "center"
                },
                // customCallout: {
                //     anchorY: 5,
                //     anchorX: 0,
                //     display: 'BYCLICK'
                // },
            })
            this.data.markers.push(newMarker)
        })
        this.setData({
            markers: this.data.markers
        })
        // this.mapCtx.addMarkers({
        //     markers: this.data.markers,
        //     clear: true,
        //     complete: res => {
        //         console.log("addMarkers", res)
        //     }
        // })
    },
    // 点击地图事件
    bindClickMap (e: any) {
        this.resetCallOut() // 点击空白，重置气泡
    },
    // 点击标记点事件
    bindmarkertap(e: any) {
        console.log('点击标记点', e.detail)
        this.setData({
            scrollInto: 'item-' + e.detail.markerId
        })
        this.resetCallOut() // 自定义气泡使用
        // 点击marker消除上一个显示的气泡
        // let marker
        // this.data.markers.forEach((item)=>{
        //     if(item.id!=e.detail.markerId){
        //         item.customCallout.display = "NONE"
        //     }else{
        //         marker = item
        //     }
        // })
        // if(marker.customCallout.display!="ALWAYS"){
        //     marker.customCallout.display = "ALWAYS"
        // }else{
        //     marker.customCallout.display = "NONE"
        // }
    },
    // 点击自定义气泡事件
    bindcallouttap (e: any) {
        console.log('点击自定义气泡', e.detail)
        this.data.markerList.forEach(item => {
            if (item.markerId == e.detail.markerId) {
                // 调起 导航
                // this.mapCtx.openMapApp({
                //     latitude: parseFloat(item.latitude),
                //     longitude: parseFloat(item.longitude),
                //     destination: item.name
                // })
                // 拨打电话
                wx.showModal({
                    title: `拨打${item.mobile}`,
                    content: '',
                    cancelColor: '#29B9A5',
                    confirmColor: '#29B9A5',
                    success: (res) => {
                        if (res.confirm) {
                            wx.makePhoneCall({
                                phoneNumber: item.mobile,
                            })
                        }
                    }
                })
            }
        })
    },
    // 把ALWAYS 重置为BYCLICK
    resetCallOut () {
        console.log('resetCallOut')
        this.data.markers.forEach(item => {
            item.callout.display = "BYCLICK"
        })
        this.setData({
            markers: this.data.markers
        })
    },
    // 清除气泡, 不再显示
    clearCallOut () {
        console.log('clearCallOut')
        this.data.markers.forEach(item => {
            item.callout.display = "none"
        })
        this.setData({
            markers: this.data.markers
        })
    },
    // 清除地图上的标记点
    clearMarkers () {
        console.log('clearMarkers')
        if (this.data.markerList.length > 0) {
            const arr = []
            this.data.markerList.forEach(item => {
                arr.push(item.markerId)
            })
            this.setData({
                markerList: [],
                markers: []
            })
            this.mapCtx.removeMarkers({
                markerIds: arr,
                fail(err) {
                    console.log(err)
                }
            })
        }
    },
    // 移动地图中心
    moveToLocation (latitude: any, longitude: any, scale=14.35) {
        if (typeof latitude == 'string') {
            latitude = parseFloat(latitude)
        }
        if (typeof longitude == 'string') {
            longitude = parseFloat(longitude)
        }
        this.mapCtx.moveToLocation({
            latitude,
            longitude
        })

        let that = this
        this.mapCtx.getScale({
            success: function(res) {
                if (res.scale != 14.35) {
                    that.setData({
                        mapScale: scale
                    })
                }
                console.log('getMapScale: ', that.data.mapScale)
            }
        })
        console.log('moveToLocaltion: ', latitude, longitude)
    },
    // 获取并显示当前位置
    showMyPosition () {
        return new Promise((resolve, reject) => {
            let that = this
            wx.getLocation({
                type: 'gcj02', // 返回可以用于wx.openLocation的经纬度
                success: function (res) {
                    const latitude = res.latitude
                    const longitude = res.longitude
                    that.setData({
                        latitude: latitude, 
                        longitude: longitude,
                        mapCircles: [
                            {
                                longitude: longitude,
                                latitude: latitude,
                                color: '#00000000',
                                fillColor: '#1885ff28',
                                radius: 1000,
                                strokeWidth: 1
                            }
                        ] // 以当前位置为中心显示 1km 范围
                    })
                    resolve(true)
                    console.log('getLocation: gcj02 ', latitude, longitude)
                },
                fail: function (e) {
                    that.moveToLocation(that.data.latitude, that.data.longitude)
                }
            })
        })
    },
    // 获取地图的数据
    async getMapData (searchName='') {
        const params = {
            type: this.data.type,
            longitude: this.data.longitude,
            latitude: this.data.latitude,
            name: searchName
        }
        const url='epmetuser/appPoint/getMapInfoByPointType'
    
        const { data: { data: data } } = await wxRequestPost(url, params, {});
        if (data.code == 0 && data.msg == 'success') {
            this.setData({
                markerList: data.data
            })
        }
        console.log('11111', this.data.markerList)
        // if (this.data.type == '1') {
        //     this.setData({
        //         markerList: [
        //             {
        //                 id: 10001,
        //                 name: '时代国际广场',
        //                 km: '200m',
        //                 kmNum: '1',
        //                 date: '06月21日',
        //                 moTime: '08:00-12:00',
        //                 afTime: '14:00-18:00',
        //                 mobile: '0532-11111',
        //                 address: '详细地址',
        //                 longitude: '120.37914',
        //                 latitude: '36.088408'
        //             },
        //             {
        //                 id: 10002,
        //                 name: '万达广场',
        //                 km: '1200m',
        //                 kmNum: '3',
        //                 date: '06月21日',
        //                 moTime: '08:00-12:00',
        //                 afTime: '14:00-18:00',
        //                 mobile: '0532-222222',
        //                 address: '详细地址',
        //                 longitude: '120.388126',
        //                 latitude: '36.073992'
        //             },
        //             {
        //                 id: 10003,
        //                 name: '五四广场',
        //                 km: '2200m',
        //                 kmNum: '5',
        //                 date: '06月21日',
        //                 moTime: '08:00-12:00',
        //                 afTime: '14:00-18:00',
        //                 mobile: '0532-333333',
        //                 address: '详细地址',
        //                 longitude: '120.389309',
        //                 latitude: '36.052502'
        //             },
        //             {
        //                 id: 10004,
        //                 name: '琴岛之眼',
        //                 km: '6200m',
        //                 kmNum: '99',
        //                 date: '06月21日',
        //                 moTime: '08:00-12:00',
        //                 afTime: '14:00-18:00',
        //                 mobile: '0532-333333',
        //                 address: '详细地址',
        //                 longitude: '120.380309',
        //                 latitude: '36.053502'
        //             }
        //         ]
        //     })
        // } else {
        //     this.setData({
        //         markerList: [
        //             {
        //                 id: 10001,
        //                 name: '时代国际广场',
        //                 km: '200m',
        //                 kmNum: '1',
        //                 date: '06月21日 08:00-18:00',
        //                 mobile: '0532-11111',
        //                 address: '详细地址',
        //                 longitude: '120.37914',
        //                 latitude: '36.088408',
        //                 noAvailableVaccines: '2'
        //             },
        //             {
        //                 id: 10002,
        //                 name: '万达广场',
        //                 km: '1200m',
        //                 kmNum: '3',
        //                 date: '06月21日 08:00-18:00',
        //                 mobile: '0532-222222',
        //                 address: '详细地址',
        //                 longitude: '120.388126',
        //                 latitude: '36.073992',
        //                 noAvailableVaccines: '2'
        //             },
        //             {
        //                 id: 10003,
        //                 name: '宝龙广场',
        //                 km: '3200m',
        //                 kmNum: '5',
        //                 date: '06月21日 08:00-18:00',
        //                 mobile: '0532-333333',
        //                 address: '详细地址',
        //                 longitude: '120.489309',
        //                 latitude: '36.022502',
        //                 noAvailableVaccines: '1'
        //             },
        //             {
        //                 id: 10004,
        //                 name: '五四广场',
        //                 km: '2200m',
        //                 kmNum: '5',
        //                 date: '06月21日 08:00-18:00',
        //                 mobile: '0532-333333',
        //                 address: '详细地址',
        //                 longitude: '120.389309',
        //                 latitude: '36.052502',
        //                 noAvailableVaccines: '2'
        //             },
        //             {
        //                 id: 10005,
        //                 name: '琴岛之眼',
        //                 km: '6200m',
        //                 kmNum: '99',
        //                 date: '06月21日',
        //                 mobile: '0532-333333',
        //                 address: '详细地址',
        //                 longitude: '120.380309',
        //                 latitude: '36.053502',
        //                 noAvailableVaccines: '2'
        //             }
        //         ]
        //     })
        // }
        this.addMarkers()
    },
    // 切换 监测点和接种点
    onChangeType (e: any) {
        this.setData({
            type: e.currentTarget.dataset.type
        }, () => {
            wx.setNavigationBarTitle({
                title: e.currentTarget.dataset.type == '1' ? '核酸检测地图' : '疫苗接种地图'
            })
        })
        this.clearMarkers()
        this.getMapData()
    },
    // 开始搜索
    onSearch (e: any) {
        console.log(e.detail.value)
        this.clearMarkers()
        this.getMapData(e.detail.value)
    },
    // 展开收缩列表
    shrinkList () {
        if (this.data.markerList.length == 0) {
            return
        }
        this.setData({
            shrink: !this.data.shrink
        })
    },
    // 前往导航
    toNavigate (e: any) {
        const index = e.currentTarget.dataset.index
        const latitude = parseFloat(this.data.markerList[index].latitude)
        const longitude = parseFloat(this.data.markerList[index].longitude)
        const address = this.data.markerList[index].name
        wx.openLocation({
            latitude,
            longitude,
            scale: 14,
            address: address,
            success:function(r){
                console.log(r)
            }
        })
    },
    // 拨打电话
    toCallMobile (e: any) {
        const mobile = e.currentTarget.dataset.mobile
        wx.showModal({
            title: `拨打${mobile}`,
            content: '',
            cancelColor: '#29B9A5',
            confirmColor: '#29B9A5',
            success: (res) => {
                if (res.confirm) {
                    wx.makePhoneCall({
                        phoneNumber: mobile,
                    })
                }
            }
        })
    },
    // 在列表中选择
    selectItem (e: any) {
        const index = e.currentTarget.dataset.index
        this.moveToLocation(this.data.markerList[index].latitude, this.data.markerList[index].longitude)
        // 自定义气泡使用
        this.clearCallOut()
        this.resetCallOut()
        
        this.data.markers.forEach((item, markerIndex) => {
            if (markerIndex == index) {
                item.callout.display = "ALWAYS"
            }
        })
        this.setData({
            markers: this.data.markers
        })
        console.log(this.data.markers)
    }
})