<template>
  <z-paging ref="paging" v-model="dataList" use-virtual-list :force-close-inner-list="true" cell-height-mode="dynamic"
    safe-area-inset-bottom @query="queryList">
    <template #top>
      <TopNavBar title="快速预定" :background="$theme - color - 100" />

      <Tabs @change="handleTabChange" />

      <!-- 选择入住、离店日期 0:是酒店 -->
      <div v-if="didSelectedTabItem && didSelectedTabItem.orderType == 0"
        class="bg-white border-box flex flex-items-center p-12">
        <div class="in flex flex-items-center">
          <span class="font-size-11 font-500 color-99A0AE mr-4">入住</span>
          <span class="font-size-14 font-500 color-171717">
            {{ selectedDate.startDate }}
          </span>
        </div>

        <!-- 几晚 -->
        <span class="nights bg-E5E8EE border-box font-size-11 font-500 color-525866 rounded-50 ml-8 mr-8">
          {{ selectedDate.totalDays }}晚
        </span>

        <div class="out flex flex-items-center">
          <span class="font-size-11 font-500 color-99A0AE mr-4">离店</span>
          <span class="font-size-14 font-500 color-171717">
            {{ selectedDate.endDate }}
          </span>
        </div>

        <!-- 日期图标 -->
        <uni-icons class="ml-auto" type="calendar" size="24" color="#0CCD58" @click="calendarVisible = true" />
      </div>
    </template>

    <Card v-for="(item, index) in dataList" :key="index" :item="item" :selectedDate="selectedDate" />
  </z-paging>

  <!-- 日历组件 -->
  <Calender :visible="calendarVisible" mode="range" :default-value="selectedDate" @close="handleCalendarClose"
    @range-select="handleDateSelect" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import TopNavBar from "@/components/TopNavBar/index.vue";
import Calender from "@/components/Calender/index.vue";
import Tabs from "./components/Tabs/index.vue";
import Card from "./components/Card/index.vue";
import { quickBookingList } from "@/api/goods";
import { DateUtils } from "@/utils/dateUtils";

const calendarVisible = ref(false);
const selectedDate = ref({
  startDate: DateUtils.formatDate(), // 当天日期
  endDate: DateUtils.formatDate(new Date(Date.now() + 24 * 60 * 60 * 1000)), // 第二天日期
  totalDays: 1,
});
const dataList = ref([]);
const paging = ref(null);
// 当前选中项
const didSelectedTabItem = ref(null);

const queryList = async (pageNum = 1, pageSize = 10) => {
  if (!didSelectedTabItem.value) {
    paging.value.complete([]);
    return;
  }
  try {
    const params = {
      commodityTypeCode: didSelectedTabItem.value.typeCode,
      size: pageSize,
      current: pageNum,
    };

    if (didSelectedTabItem.value.orderType == 0) {
      params.checkInDate = selectedDate.value.startDate;
      params.checkOutDate = selectedDate.value.endDate;
    }

    const res = await quickBookingList(params);
    console.log("API响应:", res.data.records);

    if (res && res.data && res.data.records) {
      const records = res.data.records;

      // 完成数据加载，第二个参数表示是否还有更多数据
      paging.value.complete(records);
    } else {
      // 没有数据
      paging.value.complete([]);
    }
  } catch (error) {
    console.error("查询列表失败:", error);
    // 加载失败
    paging.value.complete(false);
  }
};

const handleTabChange = ({ item }) => {
  console.log("选中的tab item: ", item);
  didSelectedTabItem.value = item;
  paging.value.reload();
};

// 处理日历关闭
const handleCalendarClose = () => {
  calendarVisible.value = false;
};

// 处理日期选择
const handleDateSelect = (data) => {
  selectedDate.value = data;
  calendarVisible.value = false;
  console.log("选择的日期:", data);
  paging.value.reload();
};
</script>

<style scoped lang="scss">
.nights {
  padding: 3px 6px;
}
</style>
