<!--
  Description: 管线管理-新建-选择起始终止位置弹窗
  Author: 李亚光
  Date: 2024-09-02
 -->
<script lang="ts" setup name="SelectStartOrEndPosition">
import type { FormRules, TabsPaneContext } from 'element-plus'
import AMap from '@/components/map/index.vue'
import { getLocation } from '@/utils/getLocation'
const emits = defineEmits(['confirm'])
const dialogFormVisible1 = ref(false) // 对话框是否显示
// 新建点位
const dataFormRef = ref()
const dataForm = ref({
  longitude: '', // 经度
  latitude: '', // 纬度
  position: '', // 详细位置位
}) // 表单

const mapRef = ref()
// 地图中心点
const mapCenter = ref<string[]>([])
if (sessionStorage.getItem('longitude')) {
  mapCenter.value = [sessionStorage.getItem('longitude') as string, sessionStorage.getItem('latitude') as string]
}
else {
  mapCenter.value = ['116.397428', '39.90923']
}

// 地图加载完成
const completeMap = () => {
  // 加载中心点marker
  mapRef.value.addMarker({
    position: mapCenter.value,
    content: '',
    label: '',
  })
  mapRef.value.getPosition(mapCenter.value, (data: string) => {
    dataForm.value.position = data
  })
  dataForm.value.longitude = mapCenter.value[0]
  dataForm.value.latitude = mapCenter.value[1]
}
// 点击地图
const mapClick = (e: any) => {
  const location = [e.lnglat.getLng(), e.lnglat.getLat()]
  // console.log(location, e, 'location')
  mapRef.value.removeMarker()
  mapRef.value.addMarker({
    position: location,
    content: '',
    label: '',
  })
  // 填充坐标信息
  dataForm.value.longitude = e.lnglat.getLng()
  dataForm.value.latitude = e.lnglat.getLat()
  mapRef.value.getPosition(location, (data: string) => {
    dataForm.value.position = data
  })
}
// 初始化对话框
const dialogStatus = ref('')
const initDialog = (type: string, position: string) => {
  dialogFormVisible1.value = true
  dialogStatus.value = type
  if (position) {
    setTimeout(() => {
      mapCenter.value = position.split(',')
      mapRef.value.map.setCenter(position.split(','))
      mapRef.value.removeMarker()
      mapRef.value.addMarker({
        position: position.split(','),
        content: '',
        label: '',
      })
      mapRef.value.getPosition(mapCenter.value, (data: string) => {
        dataForm.value.position = data
      })
      dataForm.value.longitude = mapCenter.value[0]
      dataForm.value.latitude = mapCenter.value[1]
    })
    return
  }
  if (!sessionStorage.getItem('longitude')) {
    getLocation()
    setTimeout(() => {
      if (sessionStorage.getItem('longitude')) {
        mapRef.value.map.setCenter([sessionStorage.getItem('longitude') as string, sessionStorage.getItem('latitude') as string])
        mapCenter.value = [sessionStorage.getItem('longitude') as string, sessionStorage.getItem('latitude') as string]
      }
      else {
        mapRef.value.map.setCenter(['116.397428', '39.90923'])
        mapCenter.value = ['116.397428', '39.90923']
      }
      mapRef.value.removeMarker()
      mapRef.value.addMarker({
        position: mapCenter.value,
        content: '',
        label: '',
      })
      mapRef.value.getPosition(mapCenter.value, (data: string) => {
        dataForm.value.position = data
      })
      dataForm.value.longitude = mapCenter.value[0]
      dataForm.value.latitude = mapCenter.value[1]
    })
  }
}
// 保存
const saveData = () => {
  emits('confirm', { ...dataForm.value, type: dialogStatus.value })
  dialogFormVisible1.value = false
}
defineExpose({
  initDialog,
})

const cancel = () => {
  dialogFormVisible1.value = false
}
</script>

<template>
  <el-dialog v-model="dialogFormVisible1" title="选择位置" append-to-body width="70%">
    <el-form ref="dataFormRef" :model="dataForm" label-position="right" label-width="80px">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="详细位置" prop="position">
            <el-input
              v-model.trim="dataForm.position" type="textarea" :rows="6" placeholder="详细位置" style="width: 100%;"
              clearable
            />
          </el-form-item>
          <el-form-item label="经度" prop="longitude">
            <el-input v-model.trim="dataForm.longitude" type="text" placeholder="经度" style="width: 100%;" clearable disabled />
          </el-form-item>
          <el-form-item label="纬度" prop="latitude">
            <el-input v-model.trim="dataForm.latitude" type="text" placeholder="纬度" style="width: 100%;" clearable disabled />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <!-- 地图 -->
          <a-map ref="mapRef" :show-pieple-layer="true" :center="mapCenter" :zoom="14" @complete="completeMap" @map-click="mapClick" />
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="saveData">
          确认
        </el-button>
        <!-- <el-button @click="cancel">
          取消
        </el-button> -->
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}
</style>