<template>
    <div class="flexcenter pop-mask">
        <div class="pop">
            <div id="map"></div>
            <iframe id="mapPage" width="100%" height="100%" frameborder=0
                :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${key}&referer=myapp&coord=${latlng.longitude},${latlng.latitude}`">
            </iframe>
        </div>
    </div>
</template>

<script>
export default {
    name: 'GterFangMap',
    props: ["info"],

    data() {
        return {
            longitudeLatitude: { // 默认 地图 经纬度 longitude and latitude
                0: {
                    longitude: 22.2795,
                    latitude: 114.1692
                },
                1: {
                    longitude: 22.2795,
                    latitude: 114.1692
                },
                2: {
                    longitude: 22.3171,
                    latitude: 114.1794
                },
                3: {
                    longitude: 22.3926,
                    latitude: 114.1332
                }
            },  

            key: "MVNBZ-PEFWI-O4OGT-5ADVJ-7QAYJ-NBFY4",
            latlng: {
                longitude: 22.2795,
                latitude: 114.1692,
            },
        };
    },

    mounted() {
        let that = this
        let info = this.info
        if (info['latitude']) {
            this.latlng = {
                longitude: info['longitude'],
                latitude: info['latitude'],
            }
        } else if (info['location']) {
            let longitudeLatitude = this.longitudeLatitude
            this.latlng = longitudeLatitude[info['location'] >>> 0]
        }

        window.addEventListener('message', function (event) {
            // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
            var loc = event.data;
            if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
                console.log('location', loc);
                let { latlng, poiname } = loc
                that.$emit('choosingLocation', {
                    poiname,
                    latlng,
                });
            }
        }, false);
    },

    methods: {

    },
};
</script>

<style lang="less" scoped>
.pop {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 800px;
    background: #fff;
    border-radius: 20px;
    padding: 20px;
}
</style>