<script setup name="posChart">
    import {
        ref,
        reactive,
        shallowRef,
        defineProps,
        watch,
        nextTick,
        onActivated,
        onMounted,
        defineEmits
    } from 'vue'
    import AMapLoader from '@amap/amap-jsapi-loader';
    import {
        ElMessage
    } from 'element-plus';
    import httpRequest from '@/utils/request.js'
    // import stationPosRes from './stationPos.json'
    const emits = defineEmits(['rightClick', 'mapDone'])
    const map = shallowRef(null);
    const aMap = ref(null)
    const container = ref()
    const funMapSet = (callback = (flag) => {}) => {
        AMapLoader.load({
            key: "	540080009cfdae95b6b5a4f47af24f90", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
            aMap.value = AMap;
            map.value = new AMap.Map(container.value, { //设置地图容器id
                viewMode: "3D", //是否为3D地图模式
                zoom: 9, //初始化地图级别
                center: [106.065974, 37.428168], //初始化地图中心点位置
                layers: [
                    // 卫星
                    new AMap.TileLayer.Satellite(),
                    // 路网
                    new AMap.TileLayer.RoadNet()
                ]
            });
            callback(true)
        }).catch(e => {
            console.error(e);
            callback(false)
        })
    }
    const funStationPos = async () => {
        const res = await httpRequest.get('/base/location', {
            params: {
                ids: props.ids.join(","),
            },
        })
        if (res.code === 200) {
            if (res.data && res.data.length) {
                map.value.clearMap()
                res.data.forEach(item => {
                    const marker = new aMap.value.Marker({
                        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
                        // icon: "./static/run_Icon.gif",
                        position: [Number(item.longitude), Number(item.latitude)],
                        anchor: 'bottom-center'
                    });
                    // 设置label标签
                    // label默认蓝框白底左上角显示，样式className为：amap-marker-label
                    marker.setLabel({
                        direction: 'right',
                        offset: new aMap.value.Pixel(10, 0), //设置文本标注偏移量
                        content: `${item.aname}`, //设置文本标注内容
                    });
                    map.value.add(marker)
                    // marker.setTitle(item.name);

                    //创建右键菜单
                    const contextMenu = new aMap.value.ContextMenu();
                    /**右键菜单可根据props中传参定义 */
                    //右键1
                    contextMenu.addItem("功率曲线拟合", (e) => {
                        console.log('rightObj====>>>>', rightObj.value)
                        // funCombineGet(rightObj.value)
                        emits('rightClick', {
                            menuIndex: 0,
                            current: rightObj.value,
                        })
                    }, 0);

                    //右键2
                    contextMenu.addItem("对风偏差分析", () => {
                        emits('rightClick', {
                            menuIndex: 1,
                            current: rightObj.value,
                        })
                    }, 1);

                    // //右键2
                    // contextMenu.addItem("温度与功率分析", () => {
                    // 	emits('rightClick', {
                    // 		menuIndex: 2,
                    // 		current: rightObj.value
                    // 	})
                    // }, 2);
                    map.value.add(marker)
                    // marker.setTitle(item.name);
                    // 设置label标签
                    // label默认蓝框白底左上角显示，样式className为：amap-marker-label
                    marker.setLabel({
                        direction: 'right',
                        offset: new aMap.value.Pixel(10, 0), //设置文本标注偏移量
                        content: `${item.name}`, //设置文本标注内容
                    });
                    //绑定鼠标右击事件——弹出右键菜单
                    marker.on('rightclick', function (e) {
                        rightObj.value = item
                        contextMenu.open(map.value, e.lnglat);
                    });

                })
                map.value.setFitView()
            }
        }
    }

    const funStationPosvs = async () => {
        const res = await httpRequest.get('/base/station', {
            params: {},
        })
        if (res.code === 200) {
            if (res.data && res.data.length) {
                map.value.clearMap()
                res.data.forEach(item => {
                    const marker = new aMap.value.Marker({
                        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
                        // icon: "./static/run_Icon.gif",
                        position: [Number(item.longitude), Number(item.latitude)],
                        anchor: 'bottom-center'
                    });
                    // 设置label标签
                    // label默认蓝框白底左上角显示，样式className为：amap-marker-label
                    marker.setLabel({
                        direction: 'right',
                        offset: new aMap.value.Pixel(10, 0), //设置文本标注偏移量
                        content: `${item.aname}`, //设置文本标注内容
                    });
                    map.value.add(marker)
                    // marker.setTitle(item.name);

                })
                map.value.setFitView()
            }
        }
    }

    const props = defineProps({
        ids: {
            type: Array,
            default: () => [],
        },
        windList: {
            type: Array,
            default: () => []
        },
        height: {
            type: String,
            default: '100%'
        }
    })
    /** 右键后对象数据的接收 */
    const rightObj = ref(null)
    /**监听windList */
    watch(() => props.ids, (val) => {
        if (val.length > 0) {
            funStationPos()
        } else {
            funStationPosvs()
        }
        // httpRequest
        //     .get("/base/location", {
        //         params: {
        //             ids: value.join(","),
        //         },
        //     })
        //     .then((res) => {
        //         this.searchId = value || [];
        //         this.wtList = res.data || [];
        //         this.getWpList();
        //     });
    })
    //created
    onMounted(() => {
        funMapSet(mapStatus => {
            if (!mapStatus) {
                ElMessage.error('地图未加载成功, 请刷新重试或检查网络!')
                return false
            }
            funStationPos()
            emits('mapDone', mapStatus)
        })
    })
</script>
<template>
    <div :style="{height: props.height}">
        <div class="h-full" ref="container" style="height: 100%">
            <el-empty description="地图未加载成功, 请刷新重试或检查网络!"></el-empty>
        </div>
    </div>
</template>