<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-component v-if="mapManagementDialog" :type="specialSet.type" :mapInfo="mapInfo" :is-view="isView" @setLocation="setLocation" @getLocation="getLocation"></pl-map-component>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="!isView" 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 {};}},
      editable:{type:Boolean,default:false},
      // address: {type:String,default:null},
      // location: {type:String,default:null},
      // lng: {type:String,default:null},
      // lat: {type:String,default:null},
      fieldId: {type:String,default:null},
      specialSet: {type:Object,default:() => {return {};}},
      formId: {type:String,default:null},
      isView: {type:Boolean,default:false},
    },
    data() {
      return {
        mapManagementDialog:false,
        mapInfo: {
          location: {}
        },
        isConfirm: false
      }
    },
    watch: {
    },
    methods: {
      async getLocation() {
        let vm = this;
        if (vm.editable) {
          if (vm.specialSet.merge === '是' && vm.specialSet.location && vm.optFormData[vm.specialSet.location]) {
            let locationStr = vm.optFormData[vm.specialSet.location];
            let locationArr = locationStr.split(",");
            vm.mapInfo = {
              location: {
                lng: locationArr[0],
                lat: locationArr[1],
              }
            }
          } else if (vm.specialSet.merge === '否' && this.specialSet.lng && vm.optFormData[vm.specialSet.lng]
              && this.specialSet.lat && vm.optFormData[vm.specialSet.lat]) {
            let lng = vm.optFormData[vm.specialSet.lng];
            let lat = vm.optFormData[vm.specialSet.lat];
            if (lng && lat) {
              vm.mapInfo = {
                location: {
                  lng: lng,
                  lat: lat,
                }
              }
            }
          }
        }
        if (Object.keys(vm.mapInfo.location).length === 0) {
          let dotLocationData = await vm.spcpFormAxios.post(vm.api.gisMapDoting.find, {
            formId: vm.formId,
            ptName: vm.optFormData[vm.specialSet.ptName] ? vm.optFormData[vm.specialSet.ptName] : vm.specialSet.ptNameDefault,
            type: vm.specialSet.type,
            relationId: vm.optFormData["ID"] ? vm.optFormData["ID"] : "",
          });

          if (dotLocationData && dotLocationData.data && dotLocationData.data.length > 0) {
            vm.mapInfo = {
              location: {
                lng: dotLocationData.data[0].ptX,
                lat: dotLocationData.data[0].ptY,
              }
            }
          }
        }
      },
      async mapManagementClick() {
        let vm = this;
        await vm.getLocation();
        if (vm.isView && Object.keys(vm.mapInfo.location).length === 0) {
          vm.$message({type: 'success', message: "当前暂无点位信息!", duration: 3000});
          vm.mapManagementDialog = false;
          return;
        }
        vm.mapManagementDialog = true;
      },
      clickDefine() {
        // 合并
        if (this.specialSet.merge === '是') {
          if (this.specialSet.location) {
            let locationStr = this.mapInfo.location.lng + "," + this.mapInfo.location.lat;
            this.$set(this.optFormData, this.specialSet.location, locationStr);
          }
        } else { // 不合并
          if (this.specialSet.lat) {
            this.$set(this.optFormData, this.specialSet.lat, this.mapInfo.location.lat);
          }
          if (this.specialSet.lng) {
            this.$set(this.optFormData, this.specialSet.lng, this.mapInfo.location.lng);
          }
        }
        if (this.fieldId) {
          this.$set(this.optFormData, this.fieldId + "_ptX", this.mapInfo.location.lng);
          this.$set(this.optFormData, this.fieldId + "_ptY", this.mapInfo.location.lat);
        }
        if (this.specialSet.address) {
          this.$set(this.optFormData, this.specialSet.address, this.mapInfo.location.address ? this.mapInfo.location.address : this.mapInfo.location.name);
        }
        if (!this.isConfirm) {
          this.isConfirm = true;
        }
        this.mapManagementDialog = false;
      },
      setLocation(data, type) {
        this.mapInfo = data;
      },
      closeClick() {
        this.mapManagementDialog = false;
        if (!this.isConfirm) {
          this.mapInfo = {
            location: {}
          };
        }
      }
    }
  }
</script>

<style scoped>

</style>
