<!--
 * @Author: sjl
 * @Date: 2023-06-25 14:00:20
 * @Descripttion: 
-->
<template>
  <div class="location">
    <div class="title">
      <h1>坐标定位</h1>
      <!-- <img @click="hide" src="../../../assets/images/cha.png" alt=""
    /> -->
    <div @click="hide" style="float: right; cursor: pointer; margin-right: 10px; color: #25c7e3; font-size: 16px;">
      <CloseOutlined type="delete-outlined" title="关闭" />
    </div>
  
  </div>
    <ul>
      <li><span>经度</span>&nbsp;&nbsp;<input v-model="x" placeholder="如：93.1552" type="text" /></li>
      <li><span>纬度</span>&nbsp;&nbsp;<input v-model="y" placeholder="如：29.0157" type="text" /></li>
    </ul>
    <div style="position: relative; right: 10px">
      <button @click="loc">&nbsp;&nbsp;确定</button>
      <button @click="cancel">取消&nbsp;&nbsp;</button>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';
import locationPoint from '/@/assets/images/locationPoint.png';
import { CloseOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  components: { CloseOutlined },
  setup(props, { emit }) {
    //弹出框控制
    const hide = () => {
      emit('locaShowWay', false);
      clear();
    };
    const classTemp = 'LocationPoint_only*';
    //定位
    const x = ref('');
    const y = ref('');
    const loc = () => {
      clear();
      if (x.value && y.value) {
        // let op = {
        //   destination: { x: x.value, y: y.value, z: 15000 },
        //   orientation: { heading: 6.283185307179586, pitch: -0.8647515185678438, roll: 6.283185307179586 },
        // };
        let op = {
          offset: { heading: 0.000001691359109656787, pitch: -0.2897037531197406, range: 8000 },
          duration: 1,
          // complete: callback && callback(),
        };
        var marker = new TFMap.Marker([x.value, y.value], locationPoint).init();
        //  var marker = new TFMap.Marker([y.value,x.value], locationPoint).init();
        marker.setClassify(classTemp);

        marker.flyTo({
          offset: { heading: 0.000001691359109656787, pitch: -0.2897037531197406, range: 8000 },
          duration: 1,
        });
        map.addOverlay(marker);
      }
    };
    function clear() {
      map.removeOverlay(classTemp);
    }
    function cancel(){
      console.log('点击取消');
      eventBus.emit('closeLocation', false);
    }
    return {
      cancel,
      loc,
      hide,
      x,
      y,
    };
  },
});
</script>
<style lang="less" scoped>
.location {
  background: url('../../../assets/images/locabg.png') no-repeat;
  width: 204px;
  height: 212px;
  position: absolute;
  z-index: 2;
  bottom: 171px;
  right: 505px;
  padding: 8px 10px 8px 17px;
}
.title {
  height: 42px;
  margin-bottom: 7px;
}
.title h1 {
  float: left;
  font-size: 16px;
  color: #ffff;
}
.title img {
  float: right;
  cursor: pointer;
}
.location input {
  height: 40px;
  width: 130px;
  border: solid 2px #163855;
  background: rgba(255, 0, 255, 0);
  box-shadow: 0px 0px 3px #163855 inset;
  padding-left: 10px;
}
.location li {
  margin-bottom: 20px;
}
.location button {
  float: right;
}
.location input:focus {
  outline: none;
}
</style>
