<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-12-25 16:09:56
 * @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: 200px;" 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">
            <view class="price"><nut-price :price="980" size="large" /></view>
            <view class="old-price"><nut-price :price="1280" size="small" strike-through style="color: #7D7C7C;" /></view>
          </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";
import mixin from '@/utils/mixin';

export default {
  name: "detailPage",
  mixins: [mixin.init],
  onShareAppMessage(options) {
    let params = getCurrentPageParam();
    // 设置菜单中的转发按钮触发转发事件时的转发内容
    var shareObj = {
      title: "梅花岛-房间详情",    // 默认是小程序的名称(可以写slogan等)
      path: `pages/detail/index?id=${params.id}&start_date=${params.start_date}&end_date=${params.end_date}`,    // 默认是当前页面，必须是以‘/'开头的完整路径
      imageUrl: '',   //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
      success: function (res) {
        // 转发成功之后的回调
        if (res.errMsg == 'shareAppMessage:ok') {
          //
        }
      },
      fail: function () {
        // 转发失败之后的回调
        if (res.errMsg == 'shareAppMessage:fail cancel') {
          // 用户取消转发
        } else if (res.errMsg == 'shareAppMessage:fail') {
          // 转发失败，其中 detail message 为详细失败信息
        }
      },
      complete: function () {
        // 转发结束之后的回调（转发成不成功都会执行）
      }
    }
    // 来自页面内的按钮的转发
    // if (options.from == 'button') {
    //   var eData = options.target.dataset;
    //   // 此处可以修改 shareObj 中的内容
    //   shareObj.path = '/pages/goods/goods?goodId=' + eData.id;
    // }
    // 返回shareObj
    return shareObj;
  }
};
</script>