<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-12-26 18:08:01
 * @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 @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 value = ref('0');

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

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();
        console.warn('加载完成');
      }
    });
  },
  data() {
    return {
      showContent: false,
      indexCoverHeight: 0,
      calenderInfo: {},
      bookList: [],
      flag: true,
      page: 1,
      limit: 10,
    };
  },
  methods: {
    onDatesChange ({ startDate, endDate }) { // 订房日期变化回调
      this.calenderInfo = {
        startDate,
        endDate
      }
    },
    onDatesClose () {
      // 重置列表
      this.flag = true;
      this.page = 1;
      this.bookList = [];
      this.getList();
    },
    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>