<template>
  <div>
    <div class="box">
      <el-card :body-style="{ padding: '0px' }" class="mt20">
        <div slot="header">
          <div class="bg-lineg">{{ language == 0 ? '酒店预约下单' : 'Hotel booking order' }}</div>
        </div>
        <!--        {{room}}-->
        <el-row class="pd20" :gutter="20">
          <el-col :span="14">
            <div class="border-info">
              <h3>{{ hotelName }}</h3>
              <div class="roomType">{{ room.roomType }}</div>
              <div class="room">
                <span>{{ room.bedType }}</span>
                <span>{{ ' | ' + room.area }}m²</span>
                <span>{{ ' | ' + room.occupantsNum }}{{ language == 0 ? '人入住' : ' people' }}</span>
                <span v-show="room.breakfastFlag=='1'">{{ ' | ' + room.breakfastNum }} {{
                    language == 0 ? '份早餐' : 'breakfasts'
                  }}</span>
                <span v-show="room.breakfastFlag=='0'">  | {{ language == 0 ? '无早餐' : 'No breakfast' }}</span>
                <span v-show="room.bathroomFlag=='1'">  | {{ language == 0 ? '热水洗浴' : 'Shower' }}</span>
                <span v-show="room.windowFlag=='1'"> |  {{ language == 0 ? '有窗' : 'With windows' }}</span>
                <span v-show="room.addBedFlag=='1'"> |  {{ language == 0 ? '允许加床' : 'Extra bed' }}</span>
              </div>
            </div>

            <div class="leftboderTT">{{ language == 0 ? '预约信息' : 'Reservation information' }}</div>
            <div class="border-rr mt20 pd20">
              <el-form :model="form" :label-width="language == 0 ?'100':'150'" :rules="rules" ref="formRef">
                <el-form-item :label="language==0?'入住日期':'Check-in date'" required>
                  <el-date-picker @change="getDaysBetween"
                                  v-model="rzRange"
                                  type="daterange"
                                  :placeholder="language==0?'选择日期':'Select date'" format="YYYY-MM-DD"
                                  value-format="YYYY-MM-DD"/>
                  <!--                    :picker-options="pickerOptions"-->
                </el-form-item>
                <el-form-item :label="language==0?'房间数':'Rooms'" required prop="roomNum">
                  <el-input-number v-model="form.roomNum" :min="0" :max="canOrderNum" @change="changeRoomNum"/>
                  <div class="red ml20" v-if="rzRange[1]">
                    <span v-if="language == 0">剩余房间数:{{ canOrderNum }}</span>
                    <span v-else>{{ canOrderNum }} Remaining rooms</span>
                  </div>
                </el-form-item>
                <el-form-item v-for="(n,index) in form.roomNum" :key="index" :label="`入住人${index+1}`" required>
                  <el-input v-model="rzUserArr[index]" :placeholder="language==0?'每间填一位住客姓名':'Each room fill in one name of the guest'"/>
                </el-form-item>
                <el-form-item :label="language==0?'预计到店':'Expected check-in'" required>
                  <el-select v-model="form.ddDate"
                             :placeholder="language==0?'请选择预计到店时间':'Please select the expected check-in time'">
                    <el-option
                        v-for="item in ddDateArr"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item :label="language==0?'联系电话':'Contact phone'" required prop="phone">
                  <el-input v-model="form.phone"/>
                </el-form-item>

                <div v-if="room.addBedFlag=='1'">
                  <el-form-item :label="language==0?'是否加床':'Extra bed'" required>
                    <el-radio-group v-model="form.isAddbed">
                      <el-radio label="1">{{ language == 0 ? '是' : 'Yes' }}</el-radio>
                      <el-radio label="0">{{ language == 0 ? '否' : 'No' }}</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item :label="language==0?'加床张数':'Extra bed num'" required>
                    <el-input-number v-model="form.addNum" :min="0" :max="1" @change="changeBed"/>

                  <div class="tip" v-if="form.isAddbed=='1'">*
                    <span v-if="language == 0">一个房间最多加一张床</span>
                    <span v-else>A room can only add one bed</span>
                  </div>
                  </el-form-item>
                </div>
              </el-form>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="leftboderTT">{{ language == 0 ? '订单明细' : 'Order details' }}</div>
            <div class="border-rr mt20 pd20 ccitemBox">
              <label> {{ language == 0 ? '房费' : 'Room fee' }}
                <span class="fr" v-if="language==0">{{
                    language == 0 ? '¥' : '€'
                  }}{{ (room.roomPrice * form.roomNum * choseRooms.length).toFixed(2) }}</span>
                <span class="fr" v-else>{{
                    language == 0 ? '¥' : '€'
                  }}{{ (room.roomPriceEn * form.roomNum * choseRooms.length).toFixed(2) }}</span>
              </label>
              <div class="ccitem" v-for="(c, index) in choseRooms" :key="index">
                {{ c }}
                <text v-if="language==0">{{ form.roomNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.roomPrice }}</text>
                <text v-else>{{ form.roomNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.roomPriceEn }}</text>
              </div>

              <label v-if="form.isAddbed=='1'">{{ language == 0 ? '加床费' : 'Extra bed fee' }}
                <span class="fr" v-if="language==0">{{
                    language == 0 ? '¥' : '€'
                  }}{{ (room.bedPrice * form.addNum * choseRooms.length).toFixed(2) }}</span>
                <span class="fr" v-else>{{
                    language == 0 ? '¥' : '€'
                  }}{{ (room.bedPriceEn * form.addNum * choseRooms.length).toFixed(2) }}</span>
              </label>

              <div v-if="form.isAddbed=='1'" class="ccitem" v-for="(c, index) in choseRooms" :key="index">
                {{ c }}
                <text v-if="language==0">{{ form.addNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.bedPrice }}</text>
                <text v-else>{{ form.addNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.bedPriceEn }}</text>
              </div>

              <label class="bigMoney">{{ language == 0 ? '共计' : 'Total' }}<span
                  class="fr bigMoney">{{ language == 0 ? '¥' : '€' }}{{ money }}</span></label>

            </div>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="mt30">
        <el-row justify="space-between" align="middle">
          <el-col :span="12">
            <label>{{ language == 0 ? '共计金额' : 'Total' }}：
              {{ language == 0 ? '¥' : '€' }}<span class="bigMoney">{{ money }}</span>
            </label>
          </el-col>
          <el-col :span="12" class="text-right">
            <el-button type="primary" class="btn-lineG" @click="submit">确认付款</el-button>
          </el-col>
        </el-row>
      </el-card>
      <div style="height: 60px;"></div>

    </div>
  </div>
</template>

<script setup>
import {useRouter, useRoute} from "vue-router";
import {ref, reactive, onMounted} from "vue";
import {useStorage} from "@vueuse/core/index";
import {checkResidueRoom, newsSubmitOrderHotel} from "@/apiPc/booking"
import dayjs from 'dayjs'
import {ElMessage,ElMessageBox} from "element-plus";
import useUserStore from "@/store/modules/user";
const user = useUserStore().user
const language = useStorage('language', 0)
const router = useRouter()
const route = useRoute()
const room = ref({})
const hotelName = ref('')
const canOrderStart = ref('')
const canOrderNum = ref(0)
const form = ref({
  isAddbed: '0',
  roomNum: 0,
  addNum: 1,
  ddDate:'14:00',
  phone: user.phonenumber||'',
})
const rzRange = ref([])
const rzUserArr = ref([])
const money = ref(0)
const choseRooms = ref([])
const ddDateArr = ref([
  {
    value: '08:00',
    label: '08:00'
  },
  {
    value: '09:00',
    label: '09:00'
  },
  {
    value: '10:00',
    label: '10:00'
  },
  {
    value: '11:00',
    label: '11:00'
  },
  {
    value: '12:00',
    label: '12:00'
  },
  {
    value: '13:00',
    label: '13:00'
  },
  {
    value: '14:00',
    label: '14:00'
  },
  {
    value: '15:00',
    label: '15:00'
  },
  {
    value: '16:00',
    label: '16:00'
  },
  {
    value: '17:00',
    label: '17:00'
  },
  {
    value: '18:00',
    label: '18:00'
  },
  {
    value: '19:00',
    label: '19:00'
  },
  {
    value: '20:00',
    label: '20:00'
  },
  {
    value: '21:00',
    label: '21:00'
  },
  {
    value: '22:00',
    label: '22:00'
  },
  {
    value: '23:00',
    label: '23:00'
  },
  {
    value: '00:00',
    label: '00:00'
  }
])
const rules = ref({})

let usedays = 0
onMounted(() => {
  console.log(route.query)
  room.value = JSON.parse(decodeURIComponent(route.query.room))
  hotelName.value = route.query.hotelName
  money.value = 0
  const today = dayjs()
  canOrderStart.value = today
  if (room.value.hqNewStart < canOrderStart.value) {
    room.value.hqNewStart = canOrderStart.value
  }
})

function changeRoomNum(e) {
  if (form.value.addNum > e) {
    form.value.addNum = e
  }
  console.log(e)
  rzUserArr.value.length = e
  countMoney()
}

function changeBed() {
  countMoney()
}

function checkreRooms() {
  var obj = {
    ahrId: room.value.id,
    rzStart: rzRange.value[0],
    rzEnd: rzRange.value[1]
  }
  checkResidueRoom(obj).then(res => {
    canOrderNum.value = res.data.useCount
  })
}

function getDaysBetween(e) {
  console.log('入住时间arr', e, rzRange.value)
  var d1 = Date.parse(e[0])
  var d2 = Date.parse(e[1])
  if (d1 == d2) {
    usedays = 0
    ElMessage.error('入住时间跨度需大于一天')
    // console.trace()
    rzRange.value = []
    return
  } else {
    var days = (d2 - d1) / (1 * 24 * 60 * 60 * 1000);
    usedays = days
  }
  countMoney()
  var startTime = getDate(rzRange.value[0]);
  var endTime = getDate(rzRange.value[1]);
  var dateArr = [];
  while ((endTime.getTime() - startTime.getTime()) > 0) {
    var year = startTime.getFullYear();
    var month = (startTime.getMonth() + 1).toString().length === 1 ? "0" + (parseInt(startTime.getMonth()
        .toString(), 10) + 1) : (startTime.getMonth() + 1);
    var day = startTime.getDate().toString().length === 1 ? "0" + startTime.getDate() : startTime.getDate();
    dateArr.push(year + "-" + month + "-" + day);
    startTime.setDate(startTime.getDate() + 1);
  }
  choseRooms.value = dateArr;
  checkreRooms()
}

function getDate(datestr) {
  var temp = datestr.split("-");
  if (temp[1] === '01') {
    temp[0] = parseInt(temp[0], 10) - 1;
    temp[1] = '12';
  } else {
    temp[1] = parseInt(temp[1], 10) - 1;
  }
  //new Date()的月份入参实际都是当前值-1
  var date = new Date(temp[0], temp[1], temp[2]);
  return date
}

function countMoney() {
  if (language.value == 0) {
    money.value = ((room.value.roomPrice * form.value.roomNum * usedays) + (room.value.bedPrice * form.value
        .addNum * usedays)).toFixed(2)

  } else {
    money.value = ((room.value.roomPriceEn * form.value.roomNum * usedays) + (room.value.bedPriceEn * form.value
        .addNum * usedays)).toFixed(2)
  }
  // console.log(usedays,money.value)
}

function submit() {
  if(!user){
    useUserStore().setReLogin()
    return
  }

  if (usedays == 0) {
    ElMessage.error(language.value == 0 ? '入住时间跨度需大于一天' : 'Check-in time must be greater than one day')
    return
  }
  form.value.rzStart = rzRange.value[0]
  form.value.rzEnd = rzRange.value[1]

  let arr = []
  for (var n of rzUserArr.value) {
    if (n == '' || n == undefined) {

       // '请填写入住人信息'


      return
    } else {
      arr.push(n)
    }
  }
  form.value.rzUsers = arr.toString()
  form.value.activeId = room.value.activityId
  form.value.ahId = room.value.hotelId
  form.value.ahrId = room.value.id
  form.value.orderName = hotelName.value
  form.value.roomName = room.value.roomType
  var str = ''
  var str2 = ''
  if (form.value.addNum && form.value.addNum > 0) {
    str = `加床${form.value.addNum}张`
  } else {
    str = `未加床`
  }
  if (room.value.breakfastNum && room.value.breakfastNum > 0) {
    str2 = `${room.value.breakfastNum}份早餐`
  } else {
    str2 = `无早餐`
  }
  form.value.room = `${form.value.roomNum} 间·${usedays}晚·${str}·${str2}`
  console.log(form.value.room)

  // 提交确认
  ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', {
    confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
    cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
    type: 'warning'
  }).then(() => {
    newsSubmitOrderHotel(form.value).then(res => {
      if (res.data) {
        if (res.data.roomNum == -100) {
          ElMessage.warning(language.value == 0 ? '剩余房间数不足' : 'The remaining number of rooms is insufficient')
          checkreRooms()
        } else {
          //去付钱
          router.push({
            name: 'bookingPay',
            query: {
              orderId:res.data.orderId,
              money:res.data.total
            }
          })
        }
      } else {
        ElMessage.warning(language.value == 0 ? '无可预定的房间' : 'No rooms available to book')
      }
    })
  })
}

</script>

<style scoped lang="scss">
.bigMoney {
  font-size: 36px !important;
  font-family: 'DIN Alternate';
  font-weight: bold;
}

.bg-lineg {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  text-align: center;
}

.leftboderTT {
  font-weight: 600;
  font-size: 16px;
  color: #453DEA;
}

.border-rr {
  border-radius: 5px;
  border: 1px solid #DCDFE6;
}

.room {
  font-weight: 400;
  font-size: 14px;
  color: #929AA0;
}

.ccitemBox {
  overflow: auto;

  label {
    margin: 10px 0;
    display: block;
    min-height: 30px;

    span {
      color: #FF8124;
      font-family: DIN Alternate;
      font-size: 24px;
    }
  }
}

.ccitem {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: #666;
  margin: 5px 0 10px;

  label {
    font-size: 16px;
    color: #000;
  }

  span {
    font-size: 13px;
  }
}

.red {
  color: #FF8124;
}
.tip{font-size: 14px;color: #666;padding: 0 10px;}
</style>