<template>
  <div>
    <van-dropdown-menu
      style="--van-dropdown-menu-shadow: none"
      active-color="#fd9a00"
    >
      <van-dropdown-item v-model="category" :options="categoryList" />
    </van-dropdown-menu>
  </div>
</template>

<script setup>
const route = useRoute();

const category = ref(null);

watchEffect(() => {
  category.value = route.query.carModel ?? null;
});

watch(category, (val) => {
  navigateTo({
    replace: true,
    query: {
      ...route.query,
      carModel: val,
    },
  });
});

const categoryList = ref([]);
async function getCarCategoryList() {
  const { data } = await request("/website/app/tourCarCategory/carModelList");
  const options = data.dataList.map((e) => {
    return {
      text: e.typeName,
      value: e.id,
    };
  });
  categoryList.value = [
    {
      text: "车型不限",
      value: null,
    },
    ...options,
  ];
}
onMounted(() => {
  getCarCategoryList();
});
</script>

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