<script setup>
import { inject } from "vue"
import { useNavi } from "@/hooks/useEditNavi"

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

const {
  pathIdList,
  addPath,
  startNavi,
  pauseNavi,
  restoreNavi,
  stopNavi,
} = useNavi(map)

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

  addPath(polygon)
})

defineExpose({
  addPath,
})
</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>
.path-list-status {
  display: flex;
  align-items: center;
  gap: 5px;
}

.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>
