<script lang="ts" setup name="TrajectoryMap">
import MapComponent from '@/components/map/Map.vue'
import { getTaskDetailListPage } from '@/api/page/task'
import gas2 from '@/assets/images/点位图标/点位图标/甲烷/甲烷未处置.png'
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,
  taskId: '',
})
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()
  mapRef.value?.clearPonit()
  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)
      // console.log(data, 'data')
      if (listQuery.value.taskId === '1724069183294066689') {
        console.log('aaaaaaaaaaaa')
        //  绘制两个固定点
        const data = [
          {
            alarmCode: '',
            alarmRule: '100.0',
            deviceStatus: '1',
            direction: '-78.64',
            alarmValue: '795',
            id: '1724112135823347714',
            isAlarm: '是',
            lagitude: '40.052055',
            longitude: '116.562785',
            pitch: '9.94',
            processStatus: '',
            speed: '0.4',
            taskId: '1724069183294066689',
            alarmTime: '2023-11-15 22:44:13',
            position: '北京市顺义区天北路52号靠近国航总部大楼',

          },
          {
            alarmCode: '',
            alarmRule: '100.0',
            deviceStatus: '1',
            direction: '-78.64',
            alarmValue: '90',
            id: '1724112135823347724',
            isAlarm: '是',
            lagitude: '40.05047',
            longitude: '116.564395',
            pitch: '9.94',
            position: '北京市朝阳区京密路292号靠近榆悦湾公园',
            processStatus: '',
            speed: '0.4',
            taskId: '1724069183294066689',
            alarmTime: '2023-11-15 22:38:31',
          },
        ]
        mapRef.value?.drawPonit(data.map((item: any) => ({
          ...item,
          lat: item.lagitude,
          lng: item.longitude,
          icon: gas2,
          dialog: 'gas',
          taskName: '二分公司测试20231113-1',
          alarmStatus: '未处置',
          alarmTime: '2023-11-14 01:02:01',
        })))
      }
    }
    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>