<!--
 * @Description: 坐标定位菜单
 * @Author: 王晓颖
 * @Date: 2022-05-18
 -->
<template>
  <div>
    <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
      <div v-show="show" class="layer-choose-window">
        <div class="window-title">
          <div>拖拽坐标点</div>
          <i class="el-icon-close close-icon" @click="close" />
        </div>
        <div class="window-body">
          <!-- 筛选条件-->
          <el-form ref="selectForm" :model="query" size="small">
            <el-form-item label="经度">
              <el-input v-model="query.lng" />
            </el-form-item>
            <el-form-item label="纬度">
              <el-input v-model="query.lat" />
            </el-form-item>
            <div class="btn-line">
              <el-button class="filter-item" type="primary" size="small" @click="picker">
                确定
              </el-button>
              <el-button class="filter-item" type="default" size="small" @click="close">
                取消
              </el-button>
            </div>
          </el-form>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'PopupLocation',
  props: {
    show: {
      type: Boolean,
      default: true
    } // 是否显示
  },
  data() {
    return {
      query: {
        lng: '', // 经度
        lat: '', // 纬度
        deep: '' // 高程
      } // 筛选条件
    }
  },
  methods: {
    setQuery(location) {
      this.query.lng = location[0] ? location[0] : ''
      this.query.lat = location[1] ? location[1] : ''
      this.query.deep = location[2] ? location[2] : ''
    },
    // 关闭窗口
    close() {
      this.setQuery(location)
      this.$emit('close')
    },
    // 图上拾取
    picker() {
      this.$emit('picker')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.layer-choose-window{
  position: absolute;
  right: 10px;
  top: 50px;
  width: 270px;
  background-color: rgba(255,255,255,0.9);
  .window-body{
    padding: 10px 30px;
    .btn-line{
      display: flex;
      justify-content: center;
      margin-top: 20px;
      margin-bottom: 20px;
    }
  }
}
.window-title{
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px;
  .close-icon:hover{
    cursor: pointer;
    color: #36a3f7;
  }
}
</style>