<template>
  <el-dialog
    append-to-body
    title="选择窨井所在位置"
    :visible.sync="dialogFormVisible"
  >
    <el-row>
      <el-col class="overview-map-container">
        <a-map-container
          ref="map"
          :center="center"
          :zoom="zoom"
          :base-layer="baseLayer"
          :style="{height:(bodyHeight-200)+'px'}"
          vid="overview"
          class="map-demo"
          @ready="mapReady"
        />
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="5">
        <el-input
          v-model.trim="postionForm.longitude"
          type="text"
          placeholder="经度"
          disabled
        />
      </el-col>
      <el-col :span="5">
        <el-input
          v-model.trim="postionForm.latitude"
          type="text"
          placeholder="纬度"
          disabled
        />
      </el-col>
      <el-col :span="14">
        <el-input
          v-model.trim="postionForm.postion"
          type="text"
          placeholder="详细地址"
          disabled
        />
      </el-col>
    </el-row>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button type="primary" @click="saveData">
        确定
      </el-button>
      <el-button @click="dialogFormVisible = false">
        取消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import AMapContainer from '@/components/Amap/AMapContainer'
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  name: 'DetailMapLonLat',
  components: { AMapContainer },
  data() {
    return {
      postionlatlon: '',
      postionForm: {
        longitude: '', // 经度
        latitude: '', // 纬度
        postion: '' // 详细地址
      },
      map: null, // 地图对象
      baseLayer: 'gaode_vec', // 底图图层
      center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
      zoom: 12,
      dialogFormVisible: false // 对话框是否显示
    }
  },
  computed: {
    ...mapGetters([
      'bodyHeight'
    ])
  },
  watch: {
    postionlatlon(val) {
      var _this = this
      window._AMapSecurityConfig = {
        securityJsCode: this.$store.getters.amapSecurityCode
      }
      AMapLoader.load({
        key: this.$store.getters.amapKey // 秘钥，从store中取
      }).then((AMap) => {
        AMap.plugin('AMap.Geocoder', function() {
          var geocoder = new AMap.Geocoder({
            city: ''
          })
          var lnglat = val.split(',')
          geocoder.getAddress(lnglat, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
              _this.postionForm.postion = result.regeocode.formattedAddress
            }
          })
        })
      })
    }
  },
  methods: {
    // 初始化放这里
    mapReady(map) {
      this.map = map
      var _this = this
      map.on('click', function(e) {
        _this.postionForm.longitude = e.lnglat.lng
        _this.postionForm.latitude = e.lnglat.lat
        _this.postionlatlon = e.lnglat.lng + ',' + e.lnglat.lat
      })
    },
    initDialog(val) {
      this.dialogFormVisible = val
    },
    saveData() {
      this.$emit('getLonLat', this.postionlatlon)
      this.dialogFormVisible = false
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.overview-map-container{
  width: 100%;
}
.el-row {
  margin-bottom: 10px;
}
</style>