<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-12-27 15:11:58
 * @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;">{{ state.roomInfo.title }}</view>
          <view style="color: #7D7C7C; font-size: 0.8rem; margin-top: 0.15rem;">{{ state.roomInfo.room_num }}室 宜住{{ state.roomInfo.capacity }}人</view>
        </nut-col>
        <nut-col :span="8">
          <image style="width: 100%; height: 50px; border-radius: 0.25rem;" mode="aspectFill" :src="state.roomInfo.cover" />
        </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" :max="state.roomInfo.num" 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 }}日 {{ state.sysInfo.check_in_time }} 后</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 }}日 {{ state.sysInfo.check_out_time }} 前</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">{{ state.roomInfo.capacity }} 份</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 }}日 {{ state.sysInfo.last_check_time }}后未入住，订单将被取消</view>
      </view>
    </view>
    <view class="space-line"></view>
    <view class="select-user">
      <nut-radio-group v-model="use_type" direction="horizontal" @change="onChange">
        <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">
            <view class="price-text-left"><nut-price :price="price_discount" size="large" /></view>
            <view class="price-text-right"><nut-price :price="price_old" size="small" strike-through style="color: #7D7C7C;" /></view>
          </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, computed } from "vue";
import { getCurrentPageParam } from "@/utils/weapp";
import { IconFont } from '@nutui/icons-vue-taro';
import payCard from '@/components/payCard.vue'
import { getRoomAPI, showMyInfoAPI, sysParamAPI, addOrderAPI } from '@/api/index'

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: 0,
  price: 0,
});

const price_discount = computed(() => {
  return ((room_price_info.value.discount * book_count.value * booking_info.value.days) * 100) / 100;
});

const price_old = computed(() => {
  return ((room_price_info.value.price * book_count.value * booking_info.value.days) * 100) / 100;
});

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 onChange = async (type) => {
  formData.name = type !== '2' ? formData.wxapp_user_name : '';
  formData.tel = type !== '2' ? formData.wxapp_user_phone : '';
};

const formData = reactive({
  name: '',
  tel: '',
  wxapp_user_name: '',
  wxapp_user_phone: '',
  note: ''
});

const state = reactive({
  cover: '',
  roomInfo: {},
  sysInfo: {},
});

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

onMounted(async () => {
  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) : ''
  }
  // 获取房间详情
  let params = getCurrentPageParam();
  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;
    room_price_info.value.discount = +roomData.data.discount_price;
    room_price_info.value.price = +roomData.data.original_price;
  }
  // 获取系统参数
  const sysData = await sysParamAPI();
  if (sysData.code) {
    state.sysInfo = sysData.data;
  }
  // 获取用户信息
  const myInfoData = await showMyInfoAPI();
  if (myInfoData.code) {
    formData.name = myInfoData.data.wxapp_user_name;
    formData.tel = myInfoData.data.wxapp_user_phone;
    formData.wxapp_user_name = myInfoData.data.wxapp_user_name;
    formData.wxapp_user_phone = myInfoData.data.wxapp_user_phone;
  }
});

const goPay = async () => {
  if (!formData.name) {
    Taro.showToast({
      title: '请填写联系人',
      icon: 'none',
      duration: 1000
    });
    return;
  } else if (!formData.tel) {
    Taro.showToast({
      title: '请填写联系电话',
      icon: 'none',
      duration: 1000
    });
    return;
  } else {
    let params = getCurrentPageParam();
    // 保存订房信息
    const { code, data } = await addOrderAPI({ id: params.id, num: book_count.value, contact_name: formData.name, contact_phone: formData.tel, order_remark: formData.note, plan_in: params.start_date, plan_out: params.end_date, room_type: params.room_type })
    if (code) {
      show_pay.value = true;
      payData.value.id = data.order_id;
      payData.value.price = data.order_total;
      payData.value.remain_time = data.pay_time; // 支付失效秒数
    }
  }
}

// 单击支付弹框关闭回调
const onPayClose = () => {
  show_pay.value = false;
  // 订房成功页面，不一定支付了
  Taro.navigateTo({
    url: '/pages/payInfo/index',
  });
}
</script>

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

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