<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-12-25 10:57:42
 * @FilePath: /meihuaApp/src/pages/confirm/index.vue
 * @Description: 确认订单页面
-->
<template>
  <view class="confirm-page">
    <view class="book-info-desc">
      <nut-row>
        <nut-col :span="16">
          <view style="font-weight: bold; color: #0B0B0B; font-size: 1.15rem;">非凡魅力豪华总统套房</view>
          <view style="color: #7D7C7C; font-size: 0.8rem; margin-top: 0.15rem;">两室 宜住3人</view>
        </nut-col>
        <nut-col :span="8">
          <image style="width: 100%; height: 50px; border-radius: 0.25rem;" mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/img1@2x.png" />
        </nut-col>
      </nut-row>
    </view>
    <view class="book-count-desc">
      <nut-row>
        <nut-col :span="16">
          <view style="font-weight: bold; color: #0B0B0B; font-size: 1rem;">预定房间数</view>
        </nut-col>
        <nut-col :span="8" style="text-align: center;">
          <nut-input-number v-model="book_count" min="1" button-size="30" input-width="50" @blur="onBookCountBlur" @change="onBookCountChange" />
        </nut-col>
      </nut-row>
    </view>
    <view class="calendar-select-desc">
      <nut-row gutter="15">
        <nut-col span="9" class="calendar-select-left">
          <view class="text">入住日期</view>
          <view class="date">
            {{ booking_info.check_in.year }}.{{ booking_info.check_in.month }}.{{ booking_info.check_in.day }} {{ booking_info.check_in.day_of_week }}
          </view>
        </nut-col>
        <nut-col span="5" class="calendar-select-center">
          <view>共{{ booking_info.days }}晚</view>
        </nut-col>
        <nut-col span="9" class="calendar-select-right">
          <view class="text">退房日期</view>
          <view class="date">
            {{ booking_info.check_out.year }}.{{ booking_info.check_out.month }}.{{ booking_info.check_out.day }} {{ booking_info.check_out.day_of_week }}
          </view>
        </nut-col>
      </nut-row>
    </view>
    <view class="calendar-select-info">
      <nut-row>
        <nut-col span="12">
          <view class="check-in-text">入住时间</view>
        </nut-col>
        <nut-col span="12">
          <view class="check-in-time">{{ booking_info.check_in.month }}月{{ booking_info.check_in.day }}日 14:00 后</view>
        </nut-col>
      </nut-row>
      <nut-row>
        <nut-col span="12">
          <view class="check-out-text">退房日期</view>
        </nut-col>
        <nut-col span="12">
          <view class="check-out-time">{{ booking_info.check_out.month }}月{{ booking_info.check_out.day }}日 12:00 前</view>
        </nut-col>
      </nut-row>
      <nut-row>
        <nut-col span="12">
          <view class="meal-text">早餐</view>
        </nut-col>
        <nut-col span="12">
          <view class="meal-count">{{ booking_info.days }} 份</view>
        </nut-col>
      </nut-row>
      <view class="tip">
        <view class="tip-red">*</view>
        <view class="tip-text">{{ booking_info.check_in.month }}月{{ booking_info.check_in.day }}日 20:00后未入住，订单将被取消</view>
      </view>
    </view>
    <view class="space-line"></view>
    <view class="select-user">
      <nut-radio-group v-model="use_type" direction="horizontal">
        <nut-radio label="1">
          本人入住
          <template #icon><IconFont name="checked" color="gray"></IconFont></template>
          <template #checkedIcon><IconFont name="checked" color="red"></IconFont></template>
        </nut-radio>
        <nut-radio label="2">
          帮别人订
          <template #icon><IconFont name="checked" color="gray"></IconFont></template>
          <template #checkedIcon><IconFont name="checked" color="red"></IconFont></template>
        </nut-radio>
      </nut-radio-group>
    </view>
    <view class="confirm-form">
      <nut-row>
        <nut-col :span="6">
          <view class="form-text required">联系人</view>
        </nut-col>
        <nut-col :span="18">
          <view class="form-input">
            <nut-input v-model="formData.name" class="nut-input-text" placeholder="请输入联系人" type="text" :border="false" />
          </view>
        </nut-col>
      </nut-row>
      <nut-row style="margin: 30rpx 0;">
        <nut-col :span="6">
          <view class="form-text required">联系电话</view>
        </nut-col>
        <nut-col :span="18">
          <view class="form-input">
            <nut-input v-model="formData.tel" class="nut-input-text" placeholder="请输入联系电话" type="number" :border="false" />
          </view>
        </nut-col>
      </nut-row>
      <nut-row>
        <nut-col :span="6">
          <view class="form-text" style="padding-left: 45rpx;">备注</view>
        </nut-col>
        <nut-col :span="18">
          <view class="form-input" style="padding: 20rpx;">
            <!-- <nut-textarea v-model="formData.note" class="nut-input-text" placeholder="如有其他需求，请在此填写" :autosize="{ maxHeight: 100, minHeight: 50 }" /> -->
            <!-- <nut-input v-model="formData.note" class="nut-input-text" placeholder="如有其他需求，请在此填写" type="text" :border="false" /> -->
            <textarea v-model="formData.note" style="width:100%;min-height:80px;" :auto-height="true" />
          </view>
        </nut-col>
      </nut-row>
    </view>
    <view class="confirm-bar">
      <nut-row>
        <nut-col :span="18">
          <view class="price">
            <text class="price-text-left"><text style="font-size: 32rpx;">￥</text>{{ room_price_info.discount * book_count * booking_info.days }}</text>
            <text class="price-text-right">￥{{ room_price_info.price * book_count * booking_info.days }}</text>
          </view>
        </nut-col>
        <nut-col :span="6">
          <view @tap="goPay" class="confirm-btn">提交订单</view>
        </nut-col>
      </nut-row>
    </view>
    <payCard :visible="show_pay" :data="payData" @close="onPayClose"/>
  </view>
</template>

<script setup>
import Taro from '@tarojs/taro'
import { ref, reactive, onMounted } from "vue";
import { getCurrentPageParam } from "@/utils/weapp";
import { IconFont } from '@nutui/icons-vue-taro';
import payCard from '@/components/payCard.vue'

const booking_info = ref({
  days: 1, // 入住天数
  check_in: {
    year: '',
    month: '',
    day: '',
    day_of_week: ''
  },
  check_out: {
    year: '',
    month: '',
    day: '',
    day_of_week: ''
  },
});

const room_price_info = ref({
  discount: 980,
  price: 1280,
});

const book_count = ref(1); // 预定房间数

const onBookCountBlur = (evt) => {
  if (isNaN(evt.detail.value)){
    book_count.value = 1;
  }
}
const onBookCountChange = (count) => {
  console.warn(count);
}

const use_type = ref('1'); // 本人入住或者帮别人订

const formData = reactive({
  name: '11',
  tel: '1',
  note: ''
});

const show_pay = ref(false);
const payData = ref({});

onMounted(() => {
  const { id, start_date, end_date, between_date, start_date_week, end_date_week } = getCurrentPageParam();
  booking_info.value.days = between_date;
  let check_in = start_date.split('-');
  let check_out = end_date.split('-');
  //
  booking_info.value.check_in = {
    year: check_in[0],
    month: check_in[1],
    day: check_in[2],
    day_of_week: start_date_week ? JSON.parse(start_date_week) : ''
  }
  booking_info.value.check_out = {
    year: check_out[0],
    month: check_out[1],
    day: check_out[2],
    day_of_week: end_date_week ? JSON.parse(end_date_week) : ''
  }
});

const goPay = () => {
  if (!formData.name) {
    Taro.showToast({
      title: '请填写联系人',
      icon: 'none',
      duration: 1000
    });
    return;
  } else if (!formData.tel) {
    Taro.showToast({
      title: '请填写联系电话',
      icon: 'none',
      duration: 1000
    });
    return;
  } else {
    // TODO: 保存订房信息
    console.warn('保存订房信息', formData);
    // TODO: 跳转支付页面
    setTimeout(() => {
      show_pay.value = true;
      payData.value.id = '123';
      payData.value.price = room_price_info.value.discount * book_count.value * booking_info.value.days;
      payData.value.remain_time = '1000';
    }, 1000);
  }
}

const onPayClose = () => {
  show_pay.value = false;
  Taro.navigateTo({
    url: '/pages/payInfo/index?id=123',
  });
}
</script>

<script>
import "./index.less";
import mixin from '@/utils/mixin';

export default {
  name: "confirmPage",
  mixins: [mixin.init],
};
</script>