<template>
  <div class="h-full flex flex-col">
    <div class="shrink-0 px-15">
      <div class="flex items-center justify-between">
        <div class="py-10 txxt-base text-black-3 font-semibold">选择司机</div>
        <span
          @click="$emit('close')"
          class="iconfont icon-close pl-10 py-5"
        ></span>
      </div>
      <van-divider />
      <van-dropdown-menu
        style="--van-dropdown-menu-shadow: none"
        active-color="#fd9a00"
      >
        <van-dropdown-item v-model="driverSex" :options="sexOptions" />
        <van-dropdown-item v-model="driveAge" :options="ageOptions" />
      </van-dropdown-menu>
    </div>

    <div class="flex-1 overflow-scroll px-15">
      <van-empty
        v-if="!listData.length && !loading"
        image="search"
        description="暂无相关司机"
      />
      <div v-else-if="listData.length">
        <CarSearchDriverListItem
          v-for="item in listData"
          :key="item.id"
          :item-data="item"
          @click="$emit('onSelect', item)"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
defineEmits(["close", "onSelect"]);

const route = useRoute();

const driverSex = ref(null);
const driveAge = ref(null);
const sexOptions = [
  {
    text: "性别不限",
    value: null,
  },
  {
    text: "男",
    value: 1,
  },
  {
    text: "女",
    value: 2,
  },
];
const ageOptions = [
  {
    text: "年龄不限",
    value: null,
  },
  {
    text: "20-30岁",
    value: "20,30",
  },
  {
    text: "30-35岁",
    value: "30,35",
  },
  {
    text: "35-40岁",
    value: "35,40",
  },
  {
    text: "40-45岁",
    value: "40,45",
  },
  {
    text: "45岁以上",
    value: "45",
  },
];

const requestQuery = reactive({
  pageNum: 1,
  pageSize: 9999,
  startDate: computed(() => route.query.startDate),
  belongTab: computed(() => route.query.startPlace),
  days: computed(() => route.query.days),
  type: computed(() => route.query.type || 1),
  // sex: computed(() => route.query.driverSex),
  // age: computed(() => route.query.driverAge),
  count: true,
});

const listData = ref([]);
const loading = ref(false);

async function getList() {
  try {
    loading.value = true;
    showLoadingToast({
      message: "加载中...",
      duration: 100000,
    });
    const { data } = await request("/website/app/tourCarDriver/list", {
      query: {
        ...requestQuery,
        sex: driverSex.value,
        age: driveAge.value,
      },
    });
    listData.value = data.dataList;
  } finally {
    loading.value = false;
    closeToast();
  }
}

watch([driverSex, driveAge], () => {
  getList();
});

onMounted(() => {
  getList();
});
</script>

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