<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-12-20 13:35:22
 * @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" />
        </nut-col>
      </nut-row>
    </view>
    <view class="calendar-select-desc">
      <nut-row gutter="10">
        <nut-col span="9" class="calendar-select-left">
          <view class="text">入住日期</view>
          <view class="date">2023.12.07 星期四</view>
        </nut-col>
        <nut-col span="5" class="calendar-select-center">
          <view>共1晚</view>
        </nut-col>
        <nut-col span="9" class="calendar-select-right">
          <view class="text">退房日期</view>
          <view class="date">2023.12.08 星期五</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">12月7日 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">12月8日 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">3份</view>
        </nut-col>
      </nut-row>
      <view class="tip">
        <view class="tip-red">*</view>
        <view class="tip-text">12月7日 20:00后未入住，订单将被取消</view>
      </view>
    </view>
    <view class="space-line"></view>
    <view class="select-user">
      <nut-radio-group v-model="radioVal" 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="basicData.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="basicData.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">
            <nut-textarea v-model="basicData.note" class="nut-input-text" placeholder="如有其他需求，请在此填写" :autosize="{ maxHeight: 100, minHeight: 50 }" />
          </view>
        </nut-col>
      </nut-row>
      <nut-number-keyboard v-model:visible="visible" v-model="basicData.tel" maxlength="11" @close="close"> </nut-number-keyboard>
    </view>
    <view class="confirm-bar">
      <nut-row>
        <nut-col :span="18">
          <view class="price">
            <text class="price-text-left">￥980</text>
            <text class="price-text-right">￥1280</text>
          </view>
        </nut-col>
        <nut-col :span="6">
          <view @tap="goPay" class="confirm-btn">提交订单</view>
        </nut-col>
      </nut-row>
    </view>
  </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';
const radioVal = ref('1');
const book_count = ref(1);
const visible = ref(false);
const basicData = reactive({
  name: '',
  tel: '',
  note: ''
});

onMounted(() => {
  const { id } = getCurrentPageParam();
  console.log(id);
});

const goPay = () => {
  Taro.navigateTo({
    url: '/pages/payInfo/index?id=123',
  });
}

function showKeyBoard() {
  console.warn(1);
  visible.value = true;
}
function close() {
  visible.value = false;
}

const onBookCountBlur = (evt) => {
  if (isNaN(evt.detail.value)){
    book_count.value = 1;
  }
}
</script>

<script>
import "./index.less";
export default {
  name: "confirmPage",
};
</script>