<script setup lang="ts">
import { polygon } from '@turf/turf'
import { useDrawer } from '@/hooks/draw'
import { convertToWKT } from '@/utils/parseWKT'

const showHandle = ref(false)
const time = ref<string>()
const drawnArea = ref<string | null>(null)
let drawnAreaEntities = null
const drawArea = () => {
  const { drawAreaFromType } = useDrawer()
  removeEntity()
  drawAreaFromType('POLYGON', (entity, positions) => {
    drawnAreaEntities = entity
    console.log('画图完成', positions)
    if (positions) {
      const ellipsoid = viewer.scene.globe.ellipsoid

      const posList = positions.map(pos => {
        const cartographic = Cesium.Cartographic.fromCartesian(pos, ellipsoid)
        const latitude = Cesium.Math.toDegrees(cartographic.latitude)
        const longitude = Cesium.Math.toDegrees(cartographic.longitude)

        return [longitude, latitude]
      })
      const area = polygon([[...posList, posList[0]]])

      const wkt = convertToWKT(area)
      wkt && (drawnArea.value = wkt)
    }
  })
}

const removeEntity = () => {
  if (!drawnAreaEntities) {
    return
  }
  viewer.entities.remove(drawnAreaEntities)
  drawnAreaEntities = null
}
</script>

<template>
  <div class="flex h-10 w-full gap-2">
    <n-input-group>
      <n-button type="" @click="showHandle = !showHandle">
        <template #icon>
          <n-icon size="25">
            <svg
              t="1733388817752"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7834"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              width="64"
              height="64"
            >
              <path
                d="M963.32512 597.6c-166.4-170.4-149.6-235.2-124.8-302.4 24.8-68-35.2-367.2-255.2-250.4s-154.4 272-312.8 264.8c-157.6-7.2-351.2 77.6-235.2 388.8 44.8 121.6 131.2 240 263.2 256.8 132.8 16.8 350.4-26.4 483.2 39.2 132.8 66.4 348-226.4 181.6-396.8z m-217.6 319.2c-112-52-295.2-21.6-408-34.4-112.8-12-199.2-91.2-236-189.6C7.32512 442.4 190.52512 371.2 323.32512 375.2s76.8-152 265.6-248S789.72512 280.8 768.12512 336c-24.8 64-22.4 124.8 123.2 266.4 139.2 136-33.6 366.4-145.6 314.4z"
                fill="#08ffff"
                p-id="7835"
              ></path>
              <path
                d="M186.52512 540.8c-60 52-8.8 175.2 69.6 201.6s155.2-2.4 216-55.2c60-52.8 52.8-235.2-48.8-188-100.8 46.4-113.6-64.8-236.8 41.6zM625.72512 189.6C553.72512 208 484.92512 329.6 514.52512 384c28.8 53.6 92 149.6 72 219.2-20.8 69.6-5.6 153.6 64 178.4 69.6 24.8 216.8 16.8 218.4-56 1.6-72.8-174.4-150.4-179.2-268.8-5.6-119.2 53.6-296.8-64-267.2z"
                fill="#29baf1"
                p-id="7836"
              ></path>
            </svg>
          </n-icon>
        </template>
      </n-button>
      <div
        class="trans grid"
        :class="showHandle ? 'grid-cols-[1fr]' : 'grid-cols-[0fr]'"
      >
        <div class="flex overflow-hidden">
          <n-date-picker
            v-model:formatted-value="time"
            clearable
            type="datetime"
            :update-value-on-close="true"
            format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择查询目标密度时间"
          />
          <n-button type="primary" @click="drawArea">绘制区域查询</n-button>
        </div>
      </div>

      <!-- <n-button type="primary">目标密度</n-button> -->
    </n-input-group>
  </div>
</template>

<style lang="scss" scoped>
.trans {
  transition: all 0.5s ease-in-out;
}
</style>
