<script lang="ts" setup name="TrajectoryMap">
import MapComponent from '@/components/map/Map.vue'
import { getTaskDetailListPage } from '@/api/page/task'
const dialogFormVisible = ref(false) // 对话框是否显示
const center = ref([116.481485, 39.990464]) // 地图中心
const mapRef = ref()
const zoom = ref(10)
const listQuery = ref({
  offset: 20,
  limit: 1,
  id: '',
})
const timer = ref()
const mapDraw = (data: any) => {
  timer.value = setTimeout(() => {
    if (mapRef.value?.isMap) {
      mapRef.value?.drawLine(data)
      clearTimeout(timer.value)
      timer.value = null
    }
    else {
      mapDraw(data)
    }
  }, 2000)
}
// 初始化对话框
const dataList = ref()
const initDialog = (data: any) => {
  dialogFormVisible.value = true
  listQuery.value = data
  mapRef.value?.clearLine()
  getTaskDetailListPage(listQuery.value).then((res) => {
    const data = res.data.rows.map((item: any) => {
      return {
        ...item,
        lat: item.lagitude,
        lng: item.longitude,
        position: item.position,
        isAlarm: item.isAlarm === '1' ? '是' : '否',
        time: item.ts,
        value: item.gas,
        dialog: 'taskDetail',
      }
    }).filter((item: any) => item.lat && item.lng)
    dataList.value = data
    if (!data.length) { return }
    if (mapRef.value?.isMap) {
      mapRef.value?.drawLine(data)
    }
    else {
      mapDraw(data)
    }
  })
}
const needMarker = ref(false)
watch(() => mapRef.value?.Zoom, (newVal, oldVal) => {
  if (newVal > 18 && oldVal < 18) {
    needMarker.value = true
    if (!mapRef.value?.markerList.length) {
      mapRef.value?.clearPonit()
      mapRef.value?.drawPonit(dataList.value)
    }
  }
  else if (newVal < 18 && oldVal > 18) {
    needMarker.value = false
    mapRef.value?.clearPonit()
  }
})
defineExpose({
  initDialog,
})

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

<template>
  <el-dialog v-model="dialogFormVisible" title="轨迹追踪" append-to-body width="80%" top="4vh">
    <div class="container">
      <map-component ref="mapRef" :center="center" :zoom="zoom" :need-line-marker="false" :need-set-fit-view="false" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="cancel">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.el-dialog {
  width: 700px;
}

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