<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-12-27 19:44:33
 * @FilePath: /meihuaApp/src/pages/book/index.vue
 * @Description: 订房页面
-->
<template>
  <view class="book-page">
    <view id="book-content" class="book-content">
      <view id="book-cal" class="book-cal">
        <calendar-select :start-date="start_date" :end-date="end_date" @on-dates-change="onDatesChange" @on-dates-close="onDatesClose"></calendar-select>
      </view>
      <view class="book-type">
        <!-- <nut-tabs v-model="value" @click="onTabClick" title-scroll title-gutter="10" name="tabName" background="#FFF" color="#4C2E08" animated-time="0">
          <nut-tab-pane v-for="item in tabList" :title="item.title" :pane-key="item.key">
          </nut-tab-pane>
        </nut-tabs> -->
        <view v-if="showContent" class="book-list">
          <scroll-view ref="refScrollView" :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower">
            <view v-for="(item, index) in bookList" :key="index">
              <room-card :key="index" :data="item" :calender-info="calenderInfo"></room-card>
              <view v-if="index === bookList.length - 1" style="height: 2rem;"></view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
    <nav-bar activated="book" />
  </view>
</template>

<script setup>
import Taro from '@tarojs/taro'
import { ref, onMounted } from "vue";
import navBar from '@/components/navBar.vue'
import calendarSelect from '@/components/calendarSelect.vue'
import roomCard from '@/components/roomCard.vue'

/**
 * 获取今天和明天日期
 */
const getTodayAndTomorrow = () => {
  var today = new Date(); // 获取当前日期

  var todayYear = today.getFullYear();
  var todayMonth = today.getMonth() + 1; // 月份从0开始，所以要加1
  var todayDay = today.getDate();

  var tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000); // 获取明天日期

  var tomorrowYear = tomorrow.getFullYear();
  var tomorrowMonth = tomorrow.getMonth() + 1; // 月份从0开始，所以要加1
  var tomorrowDay = tomorrow.getDate();

  // 跨年处理
  if (tomorrowYear > todayYear) {
    tomorrowMonth = '01';
    tomorrowDay = '01';
  }

  // 跨月处理
  if (tomorrowMonth > 12) {
    tomorrowMonth = '01';
    tomorrowYear = todayYear + 1;
  }

  // 格式化为两位数
  todayMonth = todayMonth < 10 ? '0' + todayMonth : todayMonth;
  todayDay = todayDay < 10 ? '0' + todayDay : todayDay;
  tomorrowMonth = tomorrowMonth < 10 ? '0' + tomorrowMonth : tomorrowMonth;
  tomorrowDay = tomorrowDay < 10 ? '0' + tomorrowDay : tomorrowDay;

  return {
    today: todayYear + '-' + todayMonth + '-' + todayDay,
    tomorrow: tomorrowYear + '-' + tomorrowMonth + '-' + tomorrowDay
  };
}

// const value = ref('0');

// const tabList = ref([{
//   title: '全部',
//   key: '0',
// }, {
//   title: '总统套房',
//   key: '1',
// }, {
//   title: '豪华套间',
//   key: '2',
// }, {
//   title: '家庭豪华间',
//   key: '3',
// }, {
//   title: '连排别墅',
//   key: '4',
// }]);

// 调用方法获取今天和明天的日期
const dates = getTodayAndTomorrow();

const start_date = ref('');
const end_date = ref('');

start_date.value = dates.today;
end_date.value = dates.tomorrow;

onMounted(() => {
});

// const onTabClick = ({ title, paneKey, disabled }) => {
//   Taro.showLoading({
//     title: '加载中',
//   });
//   setTimeout(() => {
//     Taro.hideLoading();
//   }, 1000);
//   console.warn(title, paneKey);
// }
</script>

<script>
import "./index.less";
import { $ } from '@tarojs/extend'
import mixin from '@/utils/mixin';
import { getListAPI } from '@/api/index'

export default {
  name: "bookPage",
  mixins: [mixin.init],
  async onShow () {
    // Taro.showLoading({ mask: true, title: "加载中..." });
    // 获取活动和轮播信息
    const { code, data } = await getListAPI({ page: this.page, limit: this.limit });
    if (code) {
      this.bookList = data;
      this.page = this.page + 1;
      // Taro.hideLoading();
      // console.warn('onShow');
    }
  },
  onHide () { // 离开当前页面
    this.page = 1;
    this.flag = true;
  },
  computed: {
    scrollStyle() {
      return {
        refScrollView: null,
        height: this.indexCoverHeight + 'px',
        // paddingBottom: 50 + 'px',
      };
    },
  },
  mounted () {
    // Taro.showLoading({
    //   title: '加载中',
    // });
    // 设置首页封面高度
    const windowHeight = wx.getSystemInfoSync().windowHeight;
    // 处理切换显示白屏问题
    setTimeout(() => {
      this.showContent = true;
    }, 100);
    this.$nextTick(async () => {
      const navHeight = await $('#navbar-page').height();
      const calHeight = await $('#book-cal').height();
      this.indexCoverHeight = windowHeight - navHeight - calHeight;
      if (this.$refs.refScrollView) {
        // Taro.hideLoading();
      }
    });
  },
  data() {
    return {
      showContent: false,
      indexCoverHeight: 0,
      calenderInfo: {},
      bookList: [],
      flag: true,
      page: 1,
      limit: 10,
    };
  },
  methods: {
    onDatesChange ({ startDate, endDate }) { // 订房日期变化回调
      this.calenderInfo = {
        startDate,
        endDate
      }
      // 重置列表
      this.flag = true;
      this.page = 1;
      this.bookList = [];
      this.getList();
    },
    onDatesClose () {

    },
    onScrollToLower () {
      if(!this.flag){
        return
      }
      this.flag = false;
      this.getList();
    },
    async getList () {
      // 获取列表
      const { code, data } = await getListAPI({ page: this.page, limit: this.limit, start_date: this.calenderInfo.startDate, end_date: this.calenderInfo.endDate });
      if (code) {
        if (data.length) {
          this.bookList = this.bookList.concat(data);
          this.page = this.page + 1;
          this.flag = true;
        } else {
          Taro.showToast({
            title: '没有更多了',
            icon: 'none'
          });
        }
      }
    },
  }
};
</script>