<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-12-21 16:49:40
 * @FilePath: /meihuaApp/src/pages/detail/index.vue
 * @Description: 房间详情页面
-->
<template>
  <view class="detail-page">
    <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="5000">
      <nut-swiper-item v-for="(item, index) in state.imgData" :key="index">
        <image @tap="showFn" style="width: 100%; height: 150px;" mode="aspectFill" :src="item.src" />
      </nut-swiper-item>
    </nut-swiper>
    <view class="detail-info-wrapper">
      <view class="detail-info-title">非凡魅力豪华总统套房</view>
      <view class="detail-info-content">两室 宜住3人</view>
    </view>
    <!-- 日历选择器 -->
    <view v-if="showBook" class="book-cal">
      <calendar-select @on-dates-change="onDatesChange" :start-date="start_date" :end-date="end_date"></calendar-select>
    </view>
    <view v-else class="no-calendar-border"></view>
    <!-- END -->
    <view class="detail-introduce-title">房间介绍</view>
    <view class="detail-introduce-html">
      <view id="taro_html" v-html="taro_html" class="taro_html"></view>
    </view>
    <view v-if="showBook" class="book-bar">
      <nut-row>
        <nut-col :span="18">
          <view class="book-price">
            <text class="price">￥980</text>
            <text class="old-price">￥1280</text>
          </view>
        </nut-col>
        <nut-col :span="6">
          <view class="book-btn" @tap="goToConfirm">预定</view>
        </nut-col>
      </nut-row>
    </view>
    <nut-image-preview :show="state.showPreview" :images="state.imgData" :is-Loop="false" @close="hideFn" />
  </view>
</template>

<script setup>
import Taro from '@tarojs/taro'
import { ref, computed, reactive, onMounted } from "vue";
import calendarSelect from '@/components/calendarSelect.vue'
import { getCurrentPageParam } from "@/utils/weapp";

/**
 * 获取日期星期几
 * @param {String} dateString 日期字符串
 */
const getDayOfWeek = (dateString) => {
  var dateParts = dateString.split('-');
  var year = parseInt(dateParts[0]);
  var month = parseInt(dateParts[1]) - 1; // 月份从 0 开始，所以要减去 1
  var day = parseInt(dateParts[2]);

  var date = new Date(year, month, day);
  var dayOfWeek = date.getDay();

  // 定义星期几的名称数组
  var days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

  return days[dayOfWeek];
}

/**
 * 计算日期间隔
 * @param {*} startDate
 * @param {*} endDate
 */
const getDayDifference = (startDate, endDate) => {
  var startParts = startDate.split('-');
  var startYear = parseInt(startParts[0]);
  var startMonth = parseInt(startParts[1]) - 1; // 月份从 0 开始，所以要减去 1
  var startDay = parseInt(startParts[2]);

  var endParts = endDate.split('-');
  var endYear = parseInt(endParts[0]);
  var endMonth = parseInt(endParts[1]) - 1; // 月份从 0 开始，所以要减去 1
  var endDay = parseInt(endParts[2]);

  var startDateObj = new Date(startYear, startMonth, startDay);
  var endDateObj = new Date(endYear, endMonth, endDay);

  // 跨年处理
  if (endYear > startYear) {
    endDateObj.setFullYear(endYear);
  }

  // 跨月处理
  if (endMonth > startMonth || (endMonth === startMonth && endDay > startDay)) {
    endDateObj.setMonth(endMonth);
  }

  // 计算两个日期之间的时间差（毫秒数）
  var timeDiff = endDateObj.getTime() - startDateObj.getTime();

  // 将时间差转换为天数
  var dayDiff = Math.floor(timeDiff / (1000 * 3600 * 24));

  return dayDiff;
}

const taro_html = ref('<div>123</div>');

// TODO: 到时候根据后端实际字段修改
// const book_status = ref('已约满');
const book_status = ref('');

const showBook = computed(() => {
  return book_status.value !== '已约满'
});

const start_date = ref('');
const end_date = ref('');
const between_date = ref('');
const start_date_week = ref('');
const end_date_week = ref('');

const onDatesChange = ({ startDate, endDate, betweenDate, startDateWeek, endDateWeek }) => {
  start_date.value = startDate;
  end_date.value = endDate;
  start_date_week.value = startDateWeek;
  end_date_week.value = endDateWeek;
  between_date.value = betweenDate;
}

onMounted(() => {
  let params = getCurrentPageParam();
  console.warn('id', params.id);
  console.warn('start_date', params.start_date);
  console.warn('end_date', params.end_date);
  start_date.value = params.start_date;
  end_date.value = params.end_date;
  between_date.value = getDayDifference(params.start_date, params.end_date);
  start_date_week.value = JSON.stringify(getDayOfWeek(params.start_date));
  end_date_week.value = JSON.stringify(getDayOfWeek(params.end_date));
});

const page = ref(1);

const goToConfirm = () => {
  // TODO: 需要查询个人信息是否留了手机号码
  let tel = '123';
  if (tel) {
    Taro.navigateTo({
      url: `/pages/confirm/index?id=123&start_date=${start_date.value}&end_date=${end_date.value}&between_date=${between_date.value}&start_date_week=${start_date_week.value}&end_date_week=${end_date_week.value}`,
    });
  } else {
    Taro.navigateTo({
      url: `/pages/login/index?page=detail`,
    });
  }
}

const state = reactive({
  showPreview: false,
  imgData: [
    {
      src: 'https://cdn.ipadbiz.cn/meihua/img1@2x.png'
    },
    {
      src: 'https://cdn.ipadbiz.cn/meihua/banner1@2x.png'
    },
    {
      src: 'https://cdn.ipadbiz.cn/meihua/img1@2x.png'
    },
    {
      src: 'https://cdn.ipadbiz.cn/meihua/img1@2x.png'
    }
  ]
});

const showFn = () => {
  state.showPreview = true;
};

const hideFn = () => {
  state.showPreview = false;
};
</script>

<script>
import "./index.less";

export default {
  name: "detailPage",
};
</script>