<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-05-26 12:52:44
 * @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">{{ state.roomInfo.title }}</view>
      <view class="detail-info-content">{{ state.roomInfo.room_num }}室 宜住{{ state.roomInfo.capacity }}人</view>
    </view>
    <!-- 日历选择器 -->
    <view class="book-cal">
      <calendar-select @on-dates-change="onDatesChange" :start-date="start_date" :end-date="end_date" @on-dates-close="onDatesClose"></calendar-select>
    </view>
    <!-- <view v-else class="no-calendar-border"></view> -->
    <!-- END -->
    <view v-if="state.roomInfo.description" class="detail-introduce-title">房间介绍</view>
    <view class="detail-introduce-html">
      <view id="taro_html" v-html="state.roomInfo.description" class="taro_html"></view>
      <view style="height: 6rem;"></view>
    </view>
    <view class="book-bar">
      <nut-row>
        <nut-col :span="18">
          <view class="book-price">
            <view class="price"><nut-price :price="state.roomInfo.discount_price" size="large" /></view>
            <view class="old-price"><nut-price :price="state.roomInfo.original_price" 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" />
    <nut-overlay
      v-model:visible="show_notice"
      :lock-scroll="false"
      :close-on-click-overlay="false"
    >
      <view class="overlay-body">
        <view class="overlay-content">
          <view class="notice-wrapper">
            <view class="notice-content">
              <view>
                <view class="title">本味略影</view>
                <view class="content" style="text-indent: 2rem;">外象多变，本心至简。人生百味，回归本味。</view>
                <view class="content" style="text-indent: 2rem;">梅花岛本味山居，位于福建省三明市泰宁世界地质公园、世界自然遗产地核心景区大金湖中心。2022年动工，将岛上23幢夯土、砖彻或全木结构的旧民居进行适当修复，成为中国旧乡村改造为禅意民宿的优秀样板。山中景色四时不同，十里平湖美丽如画，空气清新，泉水清洌，可以感受大自然的静谧祥和，享受水天相接、与天地融为一体的自在惬意，完全地放松、放空、放下。</view>
                <view class="content" style="text-indent: 2rem;">聆听安静，安顿身心，静候您。</view>
                <view class="content" style="text-indent: 2rem; font-weight: bold;">特色：</view>
                <view class="content">1、提供三餐天然纯净素食（不含五辛）。</view>
                <view class="content">2、古早作息方式，日出而作，日落而息。</view>
                <view class="content">3、正念、静心、慢生活。</view>
                <view class="content mb-1">4、静心服务：健身气功八段锦，湖景茶室、咖啡室，可参与甘露别院静心茶会、别院巡礼等活动（该项看时间因缘）。</view>
              </view>
              <view>
                <view class="title">入住须知</view>
                <view class="content">1、本味山居三面环水，为了您的安全，请远离水边，禁止戏水、垂钓、游泳、奔跑等。如有违反，自行承担后果。</view>
                <view class="content">2、为了防范火灾，禁止携带火种上岛，全岛禁烟。如需使用壁炉，请和工作人员联系，做到人走火息。</view>
                <view class="content">3、本味山居周边有野生动物出没，禁止进入山居经营范围外的区域（详见提示牌）。夜间照明范围有限，慎勿外出行走。如有违反，自行承担后果。</view>
                <view class="content">4、山居远离喧嚣，倡导舒缓本味生活，禁止携带荤食、含酒精饮品、宠物，勿穿吊带、短裤、短裙、凉鞋、拖鞋等暴露衣装。</view>
                <view class="content">5、山居统一安排渡船上岛，为保证湖内通行安全，禁止私自雇船进出岛。如有违反，视为当天取消预订，山居不予办理入住。</view>
                <view class="content">6、岛内自然生态茂盛，蚊虫较多，尽量穿着长衣长裤、平底鞋。房间内备有风油精，如果出现过敏等严重症状，请及时和工作人员联系。</view>
                <view class="content">7、工作时间：8:00-10:50；14:30-17:00。</view>
                <view class="content">上岛渡船班次：上午：8:00；9:30；10:20；下午：14:30；16:30。</view>
                <view class="content">其余时间，无法上岛。</view>
                <view class="content">8、入住人员需年满18周岁。</view>
                <view class="content">9、取消或变更请及时联系我们。</view>
                <view class="content">若入住前一天取消，扣除50%费用作为违约金。</view>
                <view class="content">若入住当天取消，扣除100%费用。</view>
                <view class="content mb-1">此须知为入住本位山居之前提，请预订前仔细阅读。若有预订，视为同意上述须知。</view>
              </view>
              <view>
                <view class="title">配套设施</view>
                <view class="content">1、24小时热水供应，部分房间有空调、吊扇，部分区域Wi-Fi。</view>
                <view class="content">2、独栋配有茶室、客厅、书房，部分独栋配有独立厨房、餐厅和院子。</view>
                <view class="content">3、独栋二楼配有景观天窗。</view>
                <view class="content">4、设有公共洗衣房（部分独栋配独立洗衣房）。</view>
                <view class="content">5、公共区域有湖景餐厅、湖景咖啡屋。</view>
                <view class="content">6、房内配有烧水壶、茶具、台灯、吹风机、衣架、拖鞋、洗发水、沐浴露。</view>
                <view class="content mb-1">7、岛上环保需要，牙膏、牙刷、毛巾、浴巾等私人用品请自带。</view>
              </view>

              <nut-row :gutter="10">
                <nut-col :span="24">
                  <nut-button @tap="agreedNotice" color="#6a4925" block type="primary" style="margin-top: 1rem;">同意</nut-button>
                </nut-col>
              </nut-row>
            </view>
          </view>
        </view>
      </view>
    </nut-overlay>
  </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";
import { getRoomAPI, showMyInfoAPI } from '@/api/index'

/**
 * 获取日期星期几
 * @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 showBook = computed(() => {
  return state.roomInfo.num > 0;
});

const page = ref('1'); // banner图索引

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

// 日期选择回调
const onDatesChange = async ({ 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;
  // 获取房间详情
  let params = getCurrentPageParam();
  const { code, data } = await getRoomAPI({ i: params.id, start_date: start_date.value, end_date: end_date.value, room_type: params.room_type });
  if (code) {
    state.roomInfo = data;
    // 轮播图
    if (state.roomInfo.banner.length) {
      state.imgData = [];
      state.roomInfo.banner.forEach(item => {
        state.imgData.push({
          src: item
        })
      });
    }
    if (!state.roomInfo.num) {
      Taro.showToast({
        title: '该时段房间已售罄，请重新选择日期',
        icon: 'none',
        duration: 3000,
      });
    }
  }
}

const onDatesClose = async () => {

}

const state = reactive({
  showPreview: false,
  imgData: [],
  roomInfo: {},
  phone: '',
});

onMounted(async () => {
  let params = getCurrentPageParam();
  // 日历控件日期初始化
  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 roomData = await getRoomAPI({ i: params.id, start_date: params.start_date, end_date: params.end_date, room_type: params.room_type });
  if (roomData.code) {
    state.roomInfo = roomData.data;
    // 轮播图
    if (state.roomInfo.banner.length) {
      state.imgData = [];
      state.roomInfo.banner.forEach(item => {
        state.imgData.push({
          src: item
        })
      });
    }
    // 给所有 img 标签添加 mode 缩放模式
    Taro.options.html.transformElement = (el) => {
      if (el.nodeName === 'image') {
        el.setAttribute('mode', 'widthFix');
        el.setAttribute('style', 'width: 100%');
      }
      return el
    }
  }
});

// TODO: 在预定房之前弹出须知，预订者要同意须知
const show_notice = ref(false); // 显示须知
const agreed_notice = ref(false); // 同意须知

const refuseNotice = () => {
  show_notice.value = false;
}
const agreedNotice = () => {
  show_notice.value = false;
  agreed_notice.value = true;
}

const table_columns = ref([
  {
    title: '时间(冬令)',
    key: 'winter',
    align: 'center'
  },
  {
    title: '时间（夏令)',
    key: 'summer',
    align: 'center'
  },
  {
    title: '事项',
    key: 'matter',
    align: 'center'
  },
  {
    title: '备注',
    key: 'note',
    align: 'center'
  }
])

const table_data = ref([
  {
    winter: '4:30',
    summer: '',
    matter: '打板起床',
    note: ''
  },
  {
    winter: '4:45-5:30',
    summer: '',
    matter: '闻思',
    note: ''
  },
  {
    winter: '5:40-6:40',
    summer: '',
    matter: '定课',
    note: '小禅堂（提前5分钟到达，5:40后坐迟席)'
  },
  {
    winter: '6.42-6.55',
    summer: '',
    matter: '八段锦',
    note: '六头猪茶室平台'
  },
  {
    winter: '7:00',
    summer: '',
    matter: '早斋',
    note: '斋堂（止语排班）'
  },
  {
    winter: '7:40-8:20',
    summer: '',
    matter: '晨会',
    note: '不迟到'
  },
  {
    winter: '8:20-10:45',
    summer: '',
    matter: '上午出坡',
    note: ''
  },
  {
    winter: '11:00',
    summer: '',
    matter: '午斋',
    note: '斋堂 10:55排班'
  },
  {
    winter: '11:40-13:30',
    summer: '',
    matter: '午休（宿舍止静）',
    note: '【备注】 因工作原因晚归的， 请遵循“不打扰他人休息”的原则， 时时保持正念。'
  },
  {
    winter: '13:40-14:20',
    summer: '13:40-14:50',
    matter: '自修',
    note: '自修室或各自宿舍'
  },
  {
    winter: '14:30-16:55',
    summer: '15:00-17:25',
    matter: '下午出坡',
    note: ''
  },
  {
    winter: '17:00',
    summer: '17:30',
    matter: '药石',
    note: '斋堂'
  },
  {
    winter: '19:00-21:30',
    summer: '',
    matter: '自修',
    note: '自修室或各自宿舍'
  },
  {
    winter: '20:30-21:30（周四、周六）',
    summer: '',
    matter: '禅修（必修）',
    note: '地点：小禅堂'
  },
  {
    winter: '21：30-22：00',
    summer: '',
    matter: '宿舍止静',
    note: '【备注】 因工作原因晚归的， 请遵循“不打扰他人休息”的原则， 时时保持正念。'
  },
  {
    winter: '22:00',
    summer: '',
    matter: '打板媳灯',
    note: ''
  },
  {
    winter: '22:00-22:30',
    summer: '',
    matter: '床上打坐',
    note: ''
  },
]);

const table_summary = () => {
  return {
    value: '早课、午斋、八段锦、禅修等须提前5分钟到达。思惟：无常迅速，时不我待。'
  }
}


// 预定房间
const goToConfirm = async () => {
  let params = getCurrentPageParam();
  // 获取用户信息
  const myInfoData = await showMyInfoAPI();
  if (myInfoData.code) {
    state.phone = myInfoData.data.wxapp_user_phone;
  }
  if (state.phone) {
    // 弹出用户须知
    if (!agreed_notice.value) {
      show_notice.value = true;
      return false;
    }
    // 查看是否选择日期
    if (!start_date.value || !end_date.value) {
      Taro.showToast({
        title: '请先选择入住时间段',
        icon: 'none',
        duration: 1000,
      });
      return false;
    }
    if (!showBook.value) {
      Taro.showToast({
        title: '该时段房间已售罄，请重新选择日期',
        icon: 'none',
        duration: 1000,
      });
      return false;
    }
    Taro.navigateTo({
      url: `/pages/confirm/index?id=${params.id}&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}&room_type=${params.room_type}`,
    });
  } else { // 没有手机号记录，需要绑定手机号后再预定房间
    Taro.showToast({
      title: '请先绑定手机号',
      icon: 'none',
      duration: 2000,
      success: () => {
        setTimeout(() => {
          Taro.navigateTo({
            url: `/pages/login/index?page=detail`,
          });
        }, 1000);
      },
    });
  }
}

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}&room_type=${params.room_type}`,    // 默认是当前页面，必须是以‘/'开头的完整路径
      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>