<script setup>
import { inject, ref, watch, computed } from "vue"
import { useDisplayColor } from "@/hooks/useDisplayColor"

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

const { changeDisplayColor } = useDisplayColor(computed(() => map.value))

const isChangeColor = ref(true)

watch(isChangeColor, (value) => {
  changeDisplayColor(value)
})
</script>

<template>
  <ul class="display-color">
    <li>
      <label for="defalut-map-color">默认</label>
      <input id="defalut-map-color" name="color" type="radio" :value="true" v-model="isChangeColor">
    </li>
    <li>
      <label for="changed-map-color">科技</label>
      <input id="changed-map-color" name="color" type="radio" :value="false" v-model="isChangeColor">
    </li>
  </ul>
</template>

<style scoped>
.display-color {
  margin: 0;

  li, label, input {
    cursor: pointer;
  }
}
</style>
