<template>
  <el-container style="width: 100%;height: 100%;">
    <el-button type="primary" size="small" @click="mapManagementClick">{{buttonName}}</el-button>

    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="mapManagementDialog"
               append-to-body :width="width" top="5vh" :height="height" @close="closeClick">
      <pl-map v-if="mapManagementDialog" :mapInfo="mapInfo" @setLocation="setLocation" @getLocation="getLocation"></pl-map>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" icon="el-icon-success" @click="clickDefine">确 定</el-button>
        <el-button @click="closeClick" size="small" icon="el-icon-error">关 闭</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
    // import $ from '../../components/public/gis/jquery.min';
    // window.$  = $;
    // import '../../components/public/gis/core.min';

  export default {
    name: 'pl-map-management',
    props:{
      buttonName:{type:String,default:""},
      title:{type:String,default:""},
      acceptMultiple:{type:String,default:""},//是否支持多选
      width:{type:String,default:"80%"},
      height:{type:String,default:"80%"},
      optFormData: {type:Object,default:() => {return {};}},
      address: {type:String,default:null},
      location: {type:String,default:null},
    },
    data() {
      return {
        mapManagementDialog:false,
        mapInfo: {}
      }
    },
    watch: {
      mapManagementDialog(newVal) {
        if (newVal) {
          this.getLocation();
          // if (this.$refs.plMapRefs) {
          //   this.$refs.plMapRefs.initLocationPoint();
          // }
        }
      }
    },
    methods: {
      getLocation() {
        if (this.optFormData[this.location]) {
          let location = this.optFormData[this.location].split(",");
          if (location.length === 2) {
            this.mapInfo.location = {lat: Number(location[1]), lng: Number(location[0])};
            this.mapInfo.address = this.optFormData[this.address];
          }
        }
      },
      mapManagementClick() {
        this.mapManagementDialog = true;
      },
      clickDefine() {
        let locationStr = this.mapInfo.location.lng + "," + this.mapInfo.location.lat;
        this.$set(this.optFormData, this.location, locationStr);
        this.$set(this.optFormData, this.address, this.mapInfo.address ? this.mapInfo.address : this.mapInfo.name);
        this.mapManagementDialog = false;
      },
      setLocation(data) {
        this.mapInfo = data;
      },
      closeClick() {
        this.mapManagementDialog = false;
        this.mapInfo = {};
      }
    }
  }
</script>

<style scoped>

</style>