<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-12-21 14:52:06
 * @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"></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 calenderInfo = ref({});
const onDatesChange = ({ startDate, endDate }) => {
  // console.warn(startDate, endDate);
  calenderInfo.value = {
    startDate,
    endDate
  }
}

const value = ref('0');

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

const bookList = ref([]);

onMounted(() => {
  for (let index = 0; index < 5; index++) {
    bookList.value.push({
      id: index,
      title: '标题',
      price: 100,
      status: 'all',
    });
  }
});

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'

export default {
  name: "bookPage",
  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 - 50;
      if (this.$refs.refScrollView) {
        Taro.hideLoading();
        console.warn('加载完成');
      }
    });
  },
  data() {
    return {
      showContent: false,
      indexCoverHeight: 0,
    };
  },
  methods: {
    onScrollToLower () {
      // if(!this.flag){
      //   return
      // }
      // this.flag = false;
      // this.getList();
      console.warn('onScrollToLower');
    },
    getList () {
      // const { code, data } = await activityHomeAPI({ page: this.page, limit: this.limit });
      // if (code) {
      //   if (data.activity_list.length) {
      //     // 绑定服务器时间，判断状态
      //     data.activity_list.forEach(item => {
      //       item.server_time = data.server_time;
      //     });
      //     this.activity_list = this.activity_list.concat(data.activity_list);
      //     this.page = this.page + 1;
      //     this.flag = true;
      //   } else {
      //     Toast('没有数据')
      //   }
      // }
    }
  }
};
</script>