<script setup>
import { computed } from "vue"
import { useNavi } from "../hooks/useNavi"
import { useMapStore } from "../stores/mapStore"

// 可以使用pinia等管理全局数据，这里只是方便演示, 直接注入了上层提供的数据
const store = useMapStore()

const {
  pathIdList,
  addPath,
  startNavi,
  pauseNavi,
  restoreNavi,
  stopNavi,
  removePathLine,
  clearPathId,
} = useNavi(computed(() => store.map))

// 可以调整路线的颜色
// store.map.options.pathOptions = { bgc: "#f00" }

store.map.on('click', (e) => {
  const polygon = e.object?.userData?.polygonData // 获取点位数据
  if(!polygon?.isNavi) return

  addPath(polygon)
})

defineExpose({
  addPath,
  removePathLine, 
  clearPathId,
})
</script>

<template>
  <div class="navi">
    <div class="path-list-status">
      <div>点击具有分类的标签或模型生成线路:</div>
      <div class="selected">{{ pathIdList.join(",") }}</div>
      <button @click="() => pathIdList.pop()">删除末尾</button>
      <button @click="() => pathIdList = []">清空</button>
      <button @click="() => startNavi()" :disabled="pathIdList.length < 2">开始导航</button>
      <button @click="() => pauseNavi()" :disabled="pathIdList.length < 2">暂停</button>
      <button @click="() => restoreNavi()" :disabled="pathIdList.length < 2">继续</button>
      <button @click="() => stopNavi()" :disabled="pathIdList.length < 2">结束导航</button>
    </div>
  </div>
</template>

<style scoped>
.navi {
  display: none; /* 隐藏控件 */
}

.path-list-status {
  display: flex;
  align-items: center;
  gap: 5px;
  color: white;
  text-shadow: 1px 1px 1px #000;
}

.selected {
  min-height: 1.5em;
  width: 300px;
  padding: 0 5px;
  background-color: #fff;
  border: 1px solid #767676;
  display: flex;
  align-items: center;
  overflow: auto;
}
</style>
