<template>
  <div class="flex flex-col w-80 bg-[#F6F8FA] box-border">
    <div
      v-for="item in menuData"
      :key="item.areaId"
      @click="handleChange(item)"
      class="h-40 flex items-center rounded-r-lg justify-start pl-10 transition-all text-base"
      :class="[
        currentMenu.areaId === item.areaId
          ? 'bg-primary text-white'
          : 'bg-transparent text-black-3',
      ]"
    >
      {{ item.areaName }}
    </div>
  </div>
</template>

<script setup>
const emit = defineEmits(["change"]);

const { data } = await useMyFetch(
  () => "website/tourism/projectTravelNotes/travelNotesDirectoryList"
);

const firstArea = {
  areaName: "全部",
  areaId: null,
};

const menuData = ref([]);

const currentMenu = ref({});

watch(
  data,
  (val) => {
    if (!val) return;
    menuData.value = [firstArea, ...val];

    if (menuData.value?.length) {
      currentMenu.value = menuData.value[0];
    }
  },
  { immediate: true }
);

function handleChange(item) {
  currentMenu.value = item;
  emit("change", item);
}
</script>

<style lang="scss" scoped></style>
