<!--
 * @Date: 2023-12-13 13:42:23
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-12-26 10:47:49
 * @FilePath: /meihuaApp/src/components/roomCard.vue
 * @Description: 房间详情组件
-->
<template>
  <view class="room-card-component" @tap="handleTap">
    <image class="room-cover" mode="aspectFill" :src="cover" />
    <view class="room-info">
      <nut-row>
        <nut-col span="18" class="room-info-left">
          <view class="room-info-title">{{ title }}</view>
          <view class="room-info-desc">{{ room_num }}室 宜住{{ capacity }}人</view>
        </nut-col>
        <nut-col span="6" class="room-info-right">
          <nut-price :price="discount_price" size="normal" style="font-weight: bold;" />
          <nut-price :price="original_price" size="small" strike-through style="color: #7D7C7C;" />
        </nut-col>
      </nut-row>
    </view>
    <view v-if="!num" 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}`,
  });
}

const cover = ref(''); // 封面图
const title = ref(''); // 标题
const original_price = ref(''); // 原价
const discount_price = ref(''); // 优惠价
const capacity = ref(''); // 能住几个人
const num = ref(''); // 可售数量
const room_num = ref(''); // 房间描述 两室

onMounted(() => {
  cover.value = props.data.cover ? props.data.cover : 'https://cdn.ipadbiz.cn/meihua/img1@2x.png';
  title.value = props.data.title;
  room_num.value = props.data.room_num;
  capacity.value = props.data.capacity;
  num.value = props.data.num;
  original_price.value = props.data.original_price;
  discount_price.value = props.data.discount_price;
});

</script>

<style lang="less">
:root,
page {
  --nut-price-medium-size: 35rpx;
}
.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;
        margin-top: 5rpx;
      }
      .room-info-desc {
        color: #7D7C7C;
        font-size: 0.8rem;
        margin-top: 0.2rem;
      }
    }
    .room-info-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .room-info-discount {
        color: #EB2E2E;
        font-weight: bold;
      }
      .room-info-price {
      }
    }
  }
  .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>