<template>
  <popup :reverse="isReverse" :height="height" v-model="show" :mask="mask" :history-model="historyModel" id="chat-geo-popup" @on-hide="onPopupHide" @on-show="onPopupShow">
    <iframe width="100%" height="100%" frameborder=0 style="display:block;position:absolute;z-index:999999;top:0;left:0" :src="iframeSrc">
    </iframe>
  </popup>
</template>
<script>
import {
  mapKey,
  mapGeoService,
  referer
} from './config'

export default {
  props: {
    value: Boolean,
    mapGeoService: {
      type: String,
      default: mapGeoService
    },
    mapKey: {
      type: String,
      default: mapKey
    },
    referer: {
      type: String,
      default: referer
    }
  },
  data() {
    return {
      isReverse: false,
      mask: false,
      height: '100%',
      iframeSrc:'',
      show:this.value,
      historyModel:true
    }
  },
  methods: {
    onPopupShow() {},
    onPopupHide() {},
    onGeoMessage(event) {
      var loc = event.data;
      if (loc && loc.module === 'locationPicker') {
        this.$emit('on-change-location', loc)
      }
      if(loc === 'goBack'){
          this.$emit('go-back')
      }
    },
    setIframeSrc(){
     this.iframeSrc = this.mapGeoService+"?search=1&type=1&key="+this.mapKey+"&referer="+this.referer
    //  https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=RR3BZ-T4YRF-KCMJU-JYL5N-65PF3-I3BNU&referer=iwx
      // this.iframeSrc = this.mapGeoService+'?t='+new Date().getTime();
    }
  },
  mounted() {
    var self = this
    // window.removeEventListener('message', this.onGeoMessage, false);
    window.addEventListener('message', function(event){
      self.onGeoMessage(event)
    }, false);
  },
  watch:{
    value(val) {
      this.show = val
    }
  }
}
</script>
