<template>
  <div class="flex items-center justify-center space-x-12">
    <div
      v-for="item in typeList"
      :key="item.label"
      class="box-border flex h-44 flex-1 cursor-pointer items-center justify-center space-x-5 rounded-full border-[1px] border-[#FD9A00] transition-all"
      :class="[
        type == item.value
          ? 'bg-primary text-white'
          : 'bg-white text-[#FD9A00]',
      ]"
      @click="handleClick(item)"
    >
      <img :src="item.image" class="h-34 w-58" alt="" srcset="" />
      <span class="text-base font-semibold">{{ item.label }}</span>
    </div>
  </div>
</template>

<script setup>
import car_from_type_self from "~/assets/img/car/car_from_type_self.png";
import car_from_type_third from "~/assets/img/car/car_from_type_third.png";

const typeList = [
  {
    image: car_from_type_self,
    value: 1,
    label: "自营",
  },
  {
    image: car_from_type_third,
    value: 2,
    label: "三方",
  },
];

const route = useRoute();

const type = computed(() => route.query.type ?? typeList[0].value);

/**
 * Change the type of car in query string and navigate to the new page.
 * @param {Object} item - The item which is clicked.
 * @param {Number} item.value - The value of type.
 */
function handleClick(item) {
  navigateTo({
    query: {
      ...route.query,
      type: item.value,
    },
  });
}
</script>

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