<template>
  <div>
    <div
      @click="isExpand = !isExpand"
      class="h-40 w-full rounded-xl px-20 text-white font-semibold bg-gradient-to-r from-[#FD9A00] to-[#FFCC7C] flex items-center justify-between"
    >
      <div class="flex items-center space-x-15">
        <span>{{ startPlaceLabel }}</span>
        <span>{{ formData.startDate }}</span>
        <span>包车{{ formData.days }}天</span>
      </div>
      <div
        class="w-20 h-20 bg-[#FD9A00] flex items-center rounded-full justify-center"
      >
        <span
          class="iconfont icon-caret-down text-white"
          :class="{ 'rotate-180': isExpand }"
        ></span>
      </div>
    </div>
    <div v-show="isExpand">
      <van-cell-group>
        <van-cell
          title="选择起点"
          :value="startPlaceLabel"
          is-link
          @click="startPlaceOption.show = true"
        />
        <van-cell
          title="选择用车时间"
          :value="formData.startDate"
          is-link
          @click="startDateOption.show = true"
        />
        <van-cell
          title="选择天数"
          :value="`${formData.days}天`"
          is-link
          @click="daysOption.show = true"
        />
      </van-cell-group>
    </div>
    <van-popup
      v-model:show="startPlaceOption.show"
      round
      position="bottom"
      :style="{ height: '40%' }"
    >
      <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">
      <van-date-picker
        title="选择日期"
        @confirm="handleStartDateConfirm"
        :min-date="new Date()"
      />
    </van-popup>
    <van-popup v-model:show="daysOption.show" round position="bottom">
      <van-picker
        title="选择天数"
        :columns="daysOption.options"
        @confirm="handleDaysConfirm"
      />
    </van-popup>
  </div>
</template>

<script setup>
const isExpand = ref(false);

const route = useRoute();

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

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

// watch(
//   formData,
//   () => {
//     console.log(formData);
//   },
//   { deep: true, immediate: true }
// );

// 起点
const startPlaceOption = reactive({
  show: false,
  options: [],
  selectedOptions: [],
  activedId: "",
});
const startPlaceLabel = computed(() => {
  return findTextInTree(startPlaceOption.options, formData.startPlace);
});
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;
  navigateTo({
    path: "/car/search",
    replace: true,
    query: {
      ...route.query,
      startPlace: value,
    },
  });
}
function findTextInTree(tree, id) {
  for (let i = 0; i < tree.length; i++) {
    if (tree[i].id === id) {
      return tree[i].menuName;
    }
    if (tree[i].children && tree[i].children.length) {
      const text = findTextInTree(tree[i].children, id);
      if (text) {
        return text;
      }
    }
  }
}

// 用车时间
const startDateOption = reactive({
  show: false,
  activedValue: null,
  selectedValues: [],
});
function handleStartDateConfirm({ selectedValues }) {
  startDateOption.show = false;
  startDateOption.selectedValues = selectedValues;
  navigateTo({
    path: "/car/search",
    replace: true,
    query: {
      ...route.query,
      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;
  navigateTo({
    path: "/car/search",
    replace: true,
    query: {
      ...route.query,
      days: selectedOptions[0].value,
    },
  });
}

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

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