<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>

        <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'">
                <el-form-item :label="language==0?'入住日期':'Check-in date'">
                  <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'">
                  <el-input-number v-model="form.roomNum" :min="0" :max="canOrderNum" @change="changeRoomNum" />
                  <div class="red" v-if="rzRange[1]" style="margin:0 8px;display: block;width: 8em;">
                    <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}`">
                  <el-input v-model="rzUserArr[index]" placeholder="每间填一位住客姓名"/>
                </el-form-item>
                <el-form-item label="预计到店">
                  <el-select v-model="form.ddDate" placeholder="请选择预计到店时间">
                    <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="联系电话">
                  <el-input v-model="form.phone"/>
                </el-form-item>

                <div v-if="room.addBedFlag=='1'">
                  <el-form-item label="是否加床">
                      <el-radio-group>
                        <el-radio v-model="form.isAddbed" label="1">是</el-radio>
                        <el-radio v-model="form.isAddbed" label="0">否</el-radio>
                      </el-radio-group>
                  </el-form-item>
                  <el-form-item label="加床张数">
                    <el-input-number v-model="form.addNum" :min="0" :max="1" @change="changeBed" />
                  </el-form-item>
                  <div class="tip" v-if="form.isAddbed=='1'">* 一个房间最多加一张床</div>
                </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> 房费
                <span class="fr">¥{{(room.roomPrice*form.roomNum*choseRooms.length).toFixed(2)}}</span>
              </label>
              <div class="ccitem" v-for="(c, index) in choseRooms" :key="index">
                {{ c }}
                <text>{{form.roomNum}}*¥{{room.roomPrice}}</text>
              </div>

              <label v-if="form.isAddbed=='1'">加床费
                <span  class="fr">¥{{(room.bedPrice*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>{{form.addNum}}*¥{{room.bedPrice}}</text>
              </div>

              <label>共计<span  class="fr bigMoney">¥{{money}}</span></label>

            </div>
          </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} from "element-plus";
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({
  roomNum: 0,
  addNum: 0
})
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'
    }
])
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() {
  money.value = ((room.value.roomPrice * form.value.roomNum * usedays) + (room.value.bedPrice * form.value
      .addNum * usedays)).toFixed(2)
  // console.log(usedays,money.value)
}
function submit() {
  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]

  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)

  // 提交确认
  ElMessage.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 {
          //去付钱
        }
      } 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;

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

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

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

  span {
    font-size: 13px;
  }
}
</style>