<template>
  <div class="w-full rounded-xl bg-[#94adb4] px-12 pb-12 pt-20">
    <div class="text-xl font-bold text-white">逍遥甄选，自由包车</div>
    <div
      class="bg-white rounded-xl pt-10 pb-15 mt-10 px-20 text-black-3 text-base"
    >
      <div
        @click="startPlaceOption.show = true"
        class="flex items-center justify-between py-15"
      >
        <span>起点：{{ startPlaceLabel }}</span>
        <span class="iconfont icon-right"></span>
      </div>
      <van-divider />
      <div class="flex items-center justify-between space-x-30">
        <div
          @click="startDateOption.show = true"
          class="flex-1 py-15 flex items-center"
        >
          <span class="flex-1">用车时间：{{ formData.startDate }}</span>
          <span class="iconfont icon-right"></span>
        </div>
        <div
          @click="daysOption.show = true"
          class="w-85 flex items-center py-15"
        >
          <span>天数：</span>
          <span class="flex-1">{{ formData.days }}天</span>
          <span class="iconfont icon-right"></span>
        </div>
      </div>
      <van-divider />
      <div class="flex items-center justify-center">
        <van-button
          @click="handleSearch"
          color="#FD9A00"
          round
          class="w-[80%]"
          style="font-size: 16px; margin-top: 10px"
          >查询</van-button
        >
      </div>
    </div>
    <van-popup
      v-model:show="startPlaceOption.show"
      round
      position="bottom"
      teleport="body"
      :style="{ height: '60%' }"
    >
      <van-cascader
        v-model="startPlaceOption.activedId"
        title="请选择起点"
        :options="startPlaceOption.options"
        @close="startPlaceOption.show = false"
        :field-names="{
          text: 'menuName',
          value: 'id',
          children: 'children',
        }"
        @finish="startPlaceOnFinish"
      />
    </van-popup>
    <van-popup
      v-model:show="startDateOption.show"
      round
      position="bottom"
      teleport="body"
    >
      <van-date-picker
        title="选择日期"
        @confirm="handleStartDateConfirm"
        :min-date="new Date()"
      />
    </van-popup>
    <van-popup
      v-model:show="daysOption.show"
      round
      position="bottom"
      teleport="body"
    >
      <van-picker
        title="选择天数"
        :columns="daysOption.options"
        @confirm="handleDaysConfirm"
      />
    </van-popup>
  </div>
</template>

<script setup>
const route = useRoute();

const formData = reactive({
  startDate: "",
  startPlace: "",
  days: "",
});

// 起点
const startPlaceOption = reactive({
  show: false,
  options: [],
  selectedOptions: [],
  activedId: "",
});
const startPlaceLabel = computed(() => {
  return startPlaceOption.selectedOptions
    .map((item) => item.menuName)
    .join("/");
});
async function getStartPlaceOptions() {
  const { data } = await request(
    "/website/app/tourCarCategory/carContractTree"
  );
  startPlaceOption.options = tree(data);
}
function tree(list) {
  return list.map((item) => {
    return {
      ...item,
      children: item.children.length ? tree(item.children) : null,
    };
  });
}
function startPlaceOnFinish({ selectedOptions, value }) {
  startPlaceOption.show = false;
  startPlaceOption.selectedOptions = selectedOptions;
  formData.startPlace = value;
}

// 用车时间
const startDateOption = reactive({
  show: false,
  activedValue: null,
  selectedValues: [],
});
function handleStartDateConfirm({ selectedValues }) {
  startDateOption.show = false;
  startDateOption.selectedValues = selectedValues;
  formData.startDate = selectedValues.join("-");
}

// 用车天数
const daysOption = reactive({
  show: false,
  options: Array.from({ length: 10 }, (_, i) => i).map((item) => ({
    text: `${item + 1}天`,
    value: `${item + 1}`,
  })),
});

function handleDaysConfirm({ selectedOptions }) {
  daysOption.show = false;
  formData.days = selectedOptions[0].value;
}

watchEffect(() => {
  formData.startDate = route.query.startDate;
  formData.startPlace = route.query.startPlace;
  formData.days = route.query.days || 1;
});

function handleSearch() {
  if (!formData.startPlace) {
    showToast("请选择起点");
    return;
  }
  if (!formData.startDate) {
    showToast("请选择用车时间");
    return;
  }
  if (!formData.days) {
    showToast("请选择天数");
    return;
  }
  navigateTo({
    path: "/car/search",
    query: formData,
  });
}

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

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