<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="快速预定" />

      <Tabs @change="handleTabChange" />

      <!-- 选择入住、离店日期 -->
      <view
        class="bg-white border-box flex flex-items-center p-12"
        v-if="currentType === '0'"
      >
        <view class="in flex flex-items-center">
          <text class="font-size-11 font-500 color-99A0AE mr-4">入住</text>
          <text class="font-size-14 font-500 color-171717">
            {{ selectedDate.startDate }}
          </text>
        </view>

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

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

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

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

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

<script setup>
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 "@/request/api/GoodsApi";
import { DateUtils } from "@/utils";

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 currentType = ref("0"); // 当前选中类型

const queryList = async (pageNum = 1, pageSize = 10) => {
  try {
    const params = {
      commodityTypeCode: currentType.value,
      size: pageSize,
      current: pageNum,
    };

    if (currentType.value === "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("item", item.value);
  currentType.value = item.value;

  if (currentType.value === "0") {
  }

  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>
