<!--
 * @Date: 2023-12-13 13:42:23
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-12-25 12:49:46
 * @FilePath: /meihuaApp/src/components/roomCard.vue
 * @Description: 房间详情组件
-->
<template>
  <view class="room-card-component" @tap="handleTap">
    <image class="room-cover" mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/img1@2x.png" />
    <view class="room-info">
      <nut-row>
        <nut-col span="18" class="room-info-left">
          <view class="room-info-title">非凡魅力豪华总统套房</view>
          <view class="room-info-desc">两室 宜住3人</view>
        </nut-col>
        <nut-col span="6" class="room-info-right">
          <view class="room-info-discount"><nut-price :price="980" size="normal" /></view>
          <view class="room-info-price"><nut-price :price="1280" size="small" strike-through style="color: #7D7C7C;" /></view>
        </nut-col>
      </nut-row>
    </view>
    <view class="room-status">
      <view class="room-status-wrapper">
        <image mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/icon_checked@2x.png" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, onMounted, watch } from 'vue'
import Taro from '@tarojs/taro'

/**
 * 获取今天和明天日期
 */
const getTodayAndTomorrow = () => {
  var today = new Date(); // 获取当前日期

  var todayYear = today.getFullYear();
  var todayMonth = today.getMonth() + 1; // 月份从0开始，所以要加1
  var todayDay = today.getDate();

  var tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000); // 获取明天日期

  var tomorrowYear = tomorrow.getFullYear();
  var tomorrowMonth = tomorrow.getMonth() + 1; // 月份从0开始，所以要加1
  var tomorrowDay = tomorrow.getDate();

  // 跨年处理
  if (tomorrowYear > todayYear) {
    tomorrowMonth = '01';
    tomorrowDay = '01';
  }

  // 跨月处理
  if (tomorrowMonth > 12) {
    tomorrowMonth = '01';
    tomorrowYear = todayYear + 1;
  }

  // 格式化为两位数
  todayMonth = todayMonth < 10 ? '0' + todayMonth : todayMonth;
  todayDay = todayDay < 10 ? '0' + todayDay : todayDay;
  tomorrowMonth = tomorrowMonth < 10 ? '0' + tomorrowMonth : tomorrowMonth;
  tomorrowDay = tomorrowDay < 10 ? '0' + tomorrowDay : tomorrowDay;

  return {
    today: todayYear + '-' + todayMonth + '-' + todayDay,
    tomorrow: tomorrowYear + '-' + tomorrowMonth + '-' + tomorrowDay
  };
}

const props = defineProps({
  data: { // 房间详情
    type: Object,
    default: {},
  },
  calenderInfo: { // 日历信息
    type: Object,
    default: {
      startDate: '',
      endDate: '',
    },
  },
});

const startDate = ref('');
const endDate = ref('');

watch(
  () => props.calenderInfo,
  (val) => {
    startDate.value = val.startDate;
    endDate.value = val.endDate;
  },
  {
    deep: true,
    immediate: true
  }
);

// 调用方法获取今天和明天的日期
const dates = getTodayAndTomorrow();

const handleTap = () => {
  let id = 'abc';
  if (!startDate.value) {
    startDate.value = dates.today;
  }
  if (!endDate.value) {
    endDate.value = dates.tomorrow;
  }
  Taro.navigateTo({
    url: `../detail/index?id=${id}&start_date=${startDate.value}&end_date=${endDate.value}`,
  });
}

onMounted(() => {
});

</script>

<style lang="less">
.room-card-component {
  position: relative;
  margin: 1rem;
  background-color: white;
  box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
  border: 1px solid #f9f9f9;
  border-radius: 0.5rem;
  overflow: hidden;
  .room-cover {
    width: 100%;
    height: 10rem;
  }
  .room-info {
    padding: 0.5rem;
    .room-info-left {
      .room-info-title {
        color: #0B0B0B;
        font-weight: bold;
      }
      .room-info-desc {
        color: #7D7C7C;
        font-size: 0.8rem;
        margin-top: 0.1rem;
      }
    }
    .room-info-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .room-info-discount {
        float: right;
        color: #EB2E2E;
        font-weight: bold;
        font-size: 1.1rem;
      }
      .room-info-price {
        float: right;
      }
    }
  }
  .room-status {
    width: 100%;
    height: 10rem;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    .room-status-wrapper {
      position: absolute; left: calc(50% - 200rpx / 2); right: 0; top: 50rpx;
      image {
        width: 200rpx;
        height: 200rpx;
      }
    }
  }
}
</style>