<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}}人入住</span>
                <span v-show="room.breakfastFlag=='1'">{{ ' | ' + room.breakfastNum}} 份早餐</span>
                <span v-show="room.breakfastFlag=='0'">  | 无早餐</span>
                <span v-show="room.bathroomFlag=='1'">  | 独立卫生间</span>
                <span v-show="room.windowFlag=='1'"> |  有窗</span>
                <span v-show="room.addBedFlag=='1'"> |  允许加床</span>
              </div>
            </div>

            <div class="leftboderTT">{{ language == 0 ? '预约信息' : 'Reservation information' }}</div>
            <div class="border-rr mt20 pd20">
              <el-form :model="form" label-width="100px">
                <el-form-item label="入住日期">
                  <el-date-picker
                    v-model="rzRange"
                    type="daterange"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                  />
                </el-form-item>
                <el-form-item label="房间数">
                  <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>剩余房间数:{{canOrderNum}}</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-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([])
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
  }
  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 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>