<style scoped>
  .hotelCard-img {
    width: 228px;
    height: 162px;
    overflow: hidden;
  }

  .hotelCard-title {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .hotel-info-item::before {
    display: inline;
    content: "·";
    font-weight: bolder;
    margin-right: 4px;
  }

  .height-320 {
    height: 250px;
  }

  .hotel-details-table {
    border: 1px solid #dcdcdc;
    border-collapse: collapse;
    width: 680px;
  }

  .hotel-details-table .td01 {
    padding: 3px 15px;
    background: #f7f7f7;
    width: 226px;
    height: 19px;
    text-align: center;
  }

  .hotel-details-table .td02 {
    padding: 3px 15px;
    background: #fafafa;
    width: 69px;
    height: 19px;
    text-align: center;
  }

  .hotel-details-table td {
    width: 439px;
    padding: 10px 20px;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #dcdcdc;
    font-size: 14px;
    box-sizing: border-box;
  }

  .hotel-details-tableMoblie {
    border: 1px solid #dcdcdc;
    border-collapse: collapse;
    width: 100%;
    margin-top: 5px;
  }

  .hotel-details-tableMoblie .td01 {
    padding: 3px 10px;
    background: #f7f7f7;
    width: 33.33%;
    height: 19px;
    text-align: center;
  }

  .hotel-details-tableMoblie .td02 {
    padding: 3px 5px;
    background: #fafafa;
    width: 33.33%;
    height: 19px;
    text-align: center;
  }

  .hotel-details-tableMoblie td {
    width: 100%;
    padding: 10px 20px;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #dcdcdc;
    font-size: 14px;
    box-sizing: border-box;
  }

  .HD_hotelComIntroduce {
    margin: auto;
    height: auto;
    border-bottom: 1px solid #dcdcdc;
    color: #111111;
  }

  .HD_hotelComIntroduce span {
    display: inline-block;
    margin-bottom: 10px;
  }

  .HD_inTitle {
    font-size: 14px;
    font-weight: bold;
    color: #111111;
    margin-bottom: 20px;
  }

  .HD_ServiceList span {
    display: inline-block;
    margin: 0 30px 10px 0;
    white-space: nowrap;
  }

  .bg-white {
    background: #fff !important;
  }

  .q-py-lg {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .q-py-lg8 {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .q-py-bottom8 {
    padding-bottom: 8px;
  }

  .column {
    flex-direction: column;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
  }

  .q-mb-lg {
    margin-bottom: 24px;
  }

  .justify-between {
    justify-content: space-between;
  }

  .q-position-engine {
    margin-top: var(--q-pe-top, 0) !important;
    margin-left: var(--q-pe-left, 0) !important;
    will-change: auto;
  }

  .scroll {
    overflow: auto;
  }

  .q-menu {
    position: fixed !important;
    display: inline-block;
    max-width: 95vw;
    box-shadow: 0 1px 5px #0003, 0 2px 2px #00000024, 0 3px 1px -2px #0000001f;
    background: #fff;
    border-radius: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    outline: 0;
    max-height: 65vh;
    z-index: 6000;
  }

  .q-pa-md {
    padding: 16px;
  }

  .q-pa-mdlr {
    padding: 0px 16px;
  }

  .rounded-borders {
    border-radius: 4px;
  }

  .wrap {
    flex-wrap: wrap;
  }

  .q-card {
    box-shadow: 0 1px 5px #0003, 0 2px 2px #00000024, 0 3px 1px -2px #0000001f;
    border-radius: 4px;
    vertical-align: top;
    background: #fff;
    position: relative;
  }

  .q-card>div:not(:last-child),
  .q-card>img:not(:last-child) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .q-card>div:first-child,
  .q-card>img:first-child {
    border-top: 0;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
  }

  .q-card>div {
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }

  .q-mr-md {
    margin-right: 16px;
  }

  .no-shadow {
    display: flex;
    justify-content: flex-start;
  }

  .el-date-editor .el-range-input {
    width: 70px;
  }

  .el-range-separator {
    width: 20px !important;
  }

  .el-date-editor--daterange.el-input,
  .el-date-editor--daterange.el-input__inner,
  .el-date-editor--timerange.el-input,
  .el-date-editor--timerange.el-input__inner {
    width: 202px;
  }

  .el-input .el-input__inner,
  .el-select .el-input {
    border-radius: 4px;
    height: 32px;
  }

  .HD_Green {
    background-color: green;
  }

  .text-white {
    color: #fff !important;
  }

  .absolute,
  .absolute-full,
  .absolute-center,
  .absolute-bottom,
  .absolute-left,
  .absolute-right,
  .absolute-top,
  .absolute-top-left,
  .absolute-top-right,
  .absolute-bottom-left,
  .absolute-bottom-right {
    position: absolute;
  }

  .HD_Black {
    background-color: #000;
  }

  .q-px-lg {
    padding-left: 24px;
    padding-right: 24px;
  }

  .q-pl-lg {
    padding-left: 24px;
  }

  .q-pt-sm {
    padding-top: 8px;
  }

  .q-px-sm {
    padding-left: 8px;
    padding-right: 8px;
  }

  .q-pb-md8 {
    padding-bottom: 8px;
  }

  .q-mb-md {
    margin-bottom: 16px !important;
  }

  .q-mb-md8 {
    margin-bottom: 8px !important;
  }

  .text-right {
    text-align: right;
  }

  .q-pt-md {
    padding-top: 16px;
  }

  .text-green {
    color: #4caf50 !important;
  }

  .text-grey-6 {
    color: #9e9e9e !important;
  }

  .text-red {
    color: #f44336 !important;
  }

  .q-focus-helper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1),
      opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
  }

  .q-btn--actionable {
    cursor: pointer;
  }

  .bg-green-6 {
    background: #4caf50 !important;
  }

  .q-separator--horizontal {
    display: block;
    height: 1px;
  }

  .el-divider--horizontal {
    margin: 0px !important;
  }

  .order-show {
    text-align: center;
    color: red;
  }

  .fz18 {
    font-size: 18px;
    font-weight: bold;
  }

  .text-orange-6 {
    color: #ff9800 !important;
  }

  .text-green-6 {
    color: #4caf50 !important;
  }

  .text-weight-bold {
    font-weight: 700;
  }

  .text-grey-9 {
    color: #424242 !important;
  }

  .fz20 {
    font-size: 20px;
  }

  .text-red {
    color: #f44336 !important;
  }

  .text-h5 {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2rem;
    letter-spacing: normal;
  }

  .q-ml-md {
    margin-left: 6px;
  }

  .q-px-md {
    padding-left: 16px;
    padding-right: 16px;
  }

  .items-center,
  .flex-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  /deep/ .el-card__body,
  .el-main {
    padding: 10px !important;
  }

  .d-pr8 {
    padding-right: 8px;
  }

  .table-list tr,
  td {
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    padding: 8px;
    border-collapse: collapse;
    /* 移除单元格之间的间隔 */
    font-size: 12px;
  }

  .table-list tr:first-child td {
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    padding: 8px;
    border-collapse: collapse;
    /* 移除单元格之间的间隔 */
  }

</style>
<template>
  <div class="q-py-lg">
    <div class="bg-white q-py-lg8 column  q-mb-md"
      style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px">
      <div class="row q-px-lg q-py-lg8 row justify-between">
        <div class="row no-wrap items-center  q-mt-xs q-pt-sm text-orange-6 text-weight-bold" style="width:100%;">
          <el-button class="bg-orange-6 text-white" size="sm" type="warning" icon="el-icon-user" circle></el-button>
          <span class="fz18 q-pl-lg" style="margin-top:8px;">{{$t('objFill.v101.hote.chaog13swcrcl')}}</span>
        </div>
        <div class="row no-wrap items-center text-green-6 q-mt-xs q-pt-sm text-weight-bold" style="width:100%;">
          <el-button class="bg-green-6 text-white" size="sm" type="success" icon="el-icon-document" circle></el-button>
          <span class="fz18 q-pl-lg" style="margin-top:8px;">{{$t('objFill.v101.hote.yudcghfjzwl')}}</span>
        </div>
      </div>
    </div>

    <div class="bg-white  column  q-mb-md" style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px">
      <div class="row  q-py-bottom8 row justify-between">
        <div
          style="width:100%;background:#e1f5fe!important;font-weight:700;border-radius:4px;height:53px;display:flex;padding-left:10px; align-items: center;">
          {{$t('objFill.v101.hote.yudingxx')}}
        </div>
      </div>
      <template v-if="sureMsg&&sureMsg.BookingID&&sureMsg.BookingID.length>0">
        <div class="row q-px-lg  row justify-between q-mb-md">
          <div class="row no-wrap items-center  q-mt-xs q-pt-sm text-red text-weight-bold" style="width:100%;">
            <span class="fz18 text-red">
              {{ sureMsg.HotelName }}</span>
          </div>
        </div>
        <div style="padding-bottom: 8px;">
          <div style="display: flex;">
            <div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
              <span class="text-grey-6 q-pr-lg"> <i class="text-grey-13 q-mr-xs el-icon-location-outline" name="place"
                  size="xs"></i>
                <span class="col fz14 text-weight-bold text-blick text-grey-6">{{
            Address
          }}</span>
              </span>
            </div>

            <div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
              <span class="text-grey-6 q-pr-lg"> <i style="color:#c0c4cc;" class="text-grey-13 q-mr-xs el-icon-phone"
                  name="place" size="xs"></i>
                <span class="col fz14 text-weight-bold text-blick text-grey-6">{{  $route.query.tel }}</span>
              </span>

            </div>
          </div>
        </div>
        <div style="display:row;flex-direction:row;padding-bottom:16px;" class="justify-between">
          <div style="padding-bottom: 8px;">
            <div style="display: flex;">
              <div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
                <span class="text-grey-6 q-pr-lg">{{$t('hotel.hotel_roomType')}}</span>
                <span class="text-grey-9">
                  <template v-if=" roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0 ">
                    {{ roomRateDetails.RatePlanList[0].RoomName_CN }}
                  </template>
                </span>
              </div>
              <div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
                <span class="text-grey-6 q-pr-lg">{{$t('objFill.chuangxing')}}</span>
                <span class="text-grey-9 q-pr-lg"
                  v-if="roomRateDetails.RatePlanList &&  roomRateDetails.RatePlanList.length > 0" v-loading="loading">
                  {{ getRoomType(roomRateDetails.RatePlanList[0].BedType) }}
                </span>
              </div>
            </div>
          </div>

          <div style="padding-bottom: 8px;">
            <div style="display: flex;">
              <div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
                <span class="text-grey-6 q-pr-lg">{{$t('objFill.ruzhuriqi')}}</span>
                <span class="text-grey-9"> {{params.CheckInDate}} <span class="q-ml-md">{{ checkInWeek }}</span>
                  -
                  <span> {{params.CheckOutDate}} </span>
                  <span class="q-ml-md">{{ checkOutWeek }}</span>
                </span>
              </div>
              <div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
                <span class="text-grey-6 q-pr-lg">{{$t('objFill.ruzhurenshu')}}</span>
                <span class="text-grey-9">
                  <span>{{$t('salesModule.Adult')}} {{ auditNum }} {{$t('hotel.hotel_people')}} </span>
                  <span class="q-pl-lg" v-if="childNum > 0"> {{$t('sm.ertong')}}{{ childNum }} {{$t('hotel.hotel_people')}} </span>
                  <span class="q-pl-lg" v-if="isBaoChild"> {{$t('objFill.v101.hote.bunengbet')}}</span>
                </span>
              </div>
            </div>
          </div>
          <div style="padding-bottom: 8px;">
            <div style=" display: flex;">
              <template v-if="roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0">
              <div style="width:50%;"
                v-for="(item, index) in roomRateDetails.RatePlanList" :key="`rd_rp_`+index">
                <div class="q-pt-xs col q-px-lg q-mb-md8">
                  <span class="text-grey-6 q-pr-lg"> {{$t('objFill.fangjianshul')}}</span>
                  <span class="text-grey-9"> {{ item.RoomOccupancy.RoomNum }} </span>
                  <span class="text-grey-9"><i class="text-grey-13 q-mr-xs  el-icon-warning-outline text-orange-6"
                      name="place" size="xs"></i>
                   {{$t('objFill.jinsheng')}}
                    <span class="text-orange text-orange-6">{{
                      item.InventoryCount
                    }}</span>
                   {{$t('hotel.hotel_room')}}
                  </span>
                </div>
              </div>
              </template>
              <div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
                <div>
                  <span class="text-grey-6 q-pr-lg">{{$t('objFill.v101.hote.baojsfjsqr')}}</span>
                  <span class="text-grey-9">
                    <template v-if=" roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0 ">
                      {{ roomRateDetails.RatePlanList[0].IsOnRequest?$t('pub.no'):$t('pub.yes')}}
                    </template>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="q-pt-xs col q-px-lg q-mb-md ">
            <span class=" q-pr-lg d-pr8" style="float:left;">{{$t('objFill.dindianfukuan')}}</span>
            <span class=" col row wrap text-red" style="font-size:18px;">
              ( {{DanWei}} ){{roomRateDetails.TotalPrice}}
            </span>
          </div>
          <div class="q-pt-xs col q-px-lg q-mb-md">
            <span class="text-grey-6 q-pr-lg d-pr8" style="float:left;">{{$t('objFill.v101.hote.fangfqk')}}</span>
            <span class="text-grey-9 col row wrap">
              <template v-if="roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0">
                <table class="table-list" cellspacing="0">
                  <tr style="background-color: #f1f1f1;">
                    <td v-for="( itemp, indexp ) in roomRateDetails.RatePlanList[0].PriceList" :key="`rp_`+indexp">
                      {{getWeekD(itemp.StayDate)}}
                    </td>
                  </tr>
                  <tr>
                    <td v-for="( itemp, indexp ) in roomRateDetails.RatePlanList[0].PriceList" :key="`rpn_`+indexp">
                      <span class="text-red">{{DanWei }} {{itemp.Price}}</span>
                      <p>
                        <span :class="itemp.MealAmount>0?'text-green':'' ">
                          {{getMealtype(itemp.MealType)}}
                          <template v-if="itemp.MealAmount>0">
                            ×{{itemp.MealAmount}}{{$t('salesModule.Fen')}}
                          </template>
                        </span>
                      </p>
                    </td>
                  </tr>
                </table>
              </template>
            </span>
          </div>
        </div>
      </template>
      <template v-else>
        <div style="text-align:center;padding:18px;">{{$t('system.content_noData')}}</div>
      </template>
    </div>

    <div class="bg-white  column  q-mb-md" style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px">
      <div class="row  q-py-bottom8 row justify-between">
        <div
          style="width:100%;background:#e1f5fe!important;font-weight:700;border-radius:4px;height:53px;padding-left:10px; align-items: center;">
          <span style="float: left;  padding-top: 16px;   display: block;">{{$t('objFill.v101.hote.ruzhuxx')}}</span>
          <span style="float: right;  padding-top: 16px; padding-right:16px;  display: block;" class="text-orange-6">
            <i class="text-grey-13 q-mr-xs  el-icon-warning-outline" name="place" size="xs"></i>{{$t('objFill.v101.hote.suotxmxyzjyz')}}</span>
        </div>
      </div>
      <div class="row q-px-lg q-py-lg8 row justify-between" style="width: 100%; display: block;">
        <el-form label-position="left" label-width="80px" class="iis_info_box clearfix" ref="sureMsg" :rules="rules"
          :model="sureMsg">
          <el-row>
            <el-col :gutter="35" style="width:26%;">
              <el-form-item :label="$t('objFill.v101.hote.yudingren')" prop="guestLastName">
                <el-input v-model="sureMsg.guestLastName" :placeholder="$t('objFill.v101.hote.xiangyw')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :gutter="35" style="width:25%;margin-right:24px;">
              <el-form-item label="" prop="guestFirstName">
                <el-input v-model="sureMsg.guestFirstName" :placeholder="$t('objFill.v101.hote.mingyw')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :gutter="35" style="width:30%;">
              <el-form-item label="Email" prop="guestEmail">
                <el-input v-model="sureMsg.guestEmail" placeholder="Email"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col style="width:49%;" :gutter="35">
              <el-form-item :label="$t('hotel.table_tel')" prop="guestPhoneNumber">
                <el-input v-model="sureMsg.guestPhoneNumber" :placeholder="$t('hotel.table_tel')"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col style="width:49%;" :gutter="35">
              <el-form-item :label="$t('objFill.v101.hote.kehuxq')">
                <el-input v-model="sureMsg.guestRequest" :placeholder="$t('objFill.v101.hote.kehuxq')"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label-width="0px" v-if="sureMsg.GuestList && sureMsg.GuestList.length > 0">
            <template v-for="(item, subIndex) in sureMsg.GuestList">
              <div v-for="(itemguest, numberOfAdultsIndex) in item.GuestInfo" :key="`sg_`+subIndex+numberOfAdultsIndex">
                <el-row style="margin-bottom:22px">
                  <el-col :gutter="35" style="width:26%;margin-right:24px;">
                    <el-form-item :label="numberOfAdultsIndex==0?$t('objFill.fangjian')+(subIndex + 1):''"
                      :prop="`GuestList[${subIndex}].GuestInfo[${numberOfAdultsIndex}].LastName`"
                      :rules="rules.LastName" :style="numberOfAdultsIndex>0?'margin-left: 80px;':''">
                      <el-input v-model="itemguest.LastName" :placeholder="$t('objFill.v101.hote.xiangyw')"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :gutter="35" style="width:25%;margin-right:24px;">
                    <el-form-item label="" :prop="`GuestList[${subIndex}].GuestInfo[${numberOfAdultsIndex}].FirstName`"
                      :rules="rules.FirstName">
                      <el-input v-model="itemguest.FirstName" :placeholder="$t('objFill.v101.hote.mingyw')"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :gutter="35" style="width:30%;">
                    <el-form-item label="">
                      <el-input type="number" v-model="itemguest.Age" :min="0" :max="12" :placeholder="$t('objFill.v101.hote.niannetbt')">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </template>
          </el-form-item>
          <el-row>
            <el-col :gutter="35">
              <div class="row col-12 text-red q-mb-md" v-if="
                  roomRateDetails.CancellationPolicyList &&
                  roomRateDetails.CancellationPolicyList.length > 0
                ">
                <div style="width:100%;" v-for="(itemCancella, index1) in roomRateDetails.CancellationPolicyList">
                  <p v-if="index1==0">{{ getformatDateStr(itemCancella.FromDate) }}{{$t('objFill.v101.hote.zhiqmfqx')}}</p>
                  <div v-if="itemCancella.Amount==roomRateDetails.TotalPrice">
                    <p>{{ getformatDateStr(itemCancella.FromDate) }}{{$t('objFill.v101.hote.qibkqxqxsqe')}}</p>
                  </div>
                  <div v-else>
                    <p>{{ getformatDateStr(itemCancella.FromDate) }}
                      <span v-if="index1!=(roomRateDetails.CancellationPolicyList.length-1)">-
                        {{ getformatDateStr(roomRateDetails.CancellationPolicyList[index1+1].FromDate) }} {{$t('objFill.v101.hote.zhijian')}}</span>
                     {{$t('objFill.v101.hote.quxiaosf')}}{{DanWei}}{{getPrice(itemCancella.Amount)}};</p>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="col row q-mb-md" style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px">
      <el-button type="primary" :disabled="submDisabled" style="width:50%; margin:0 auto;"
        @click="submitForm('sureMsg')" :loading="submLoading">{{$t('sm.xiadan')}}</el-button>
    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        isShowTime: true,
        isLoginB2B: false,
        Verification: "",
        CouponIds: "",
        CodeLoading: false,
        UserCanUseCouponList: [],
        CouponList: [],
        Address: "", //兑换码
        params: {
          sort: 1,
          displayFrom: 1,
          CheckInDate: "",
          CheckOutDate: "",
          searchroomGroup: [],
          ratePlanID: "",
          imgUrl: "",
          RoomCount: 1,
          ChildCount: 0,
          AdultCount: 1,
          OccupancyDetails: [],
          hotelId: 0
        },
        getParamsMsg: {},
        urlParamsMsg: {},
        adultList: [], //成人下拉
        childrenList: [], //儿童下拉
        numberOfAdults: 0,
        numberOfChildren: 0,
        submLoading: false,
        submDisabled: false,
        loading: false,
        dateRange: "", //当前日期
        dateRange2: "", //当前日期
        roomRateDetails: {},
        DanWei: "",
        HotelRoomTypes: [], //散客房间类型
        HotelMealTypes: [], //餐型
        dataList: {},
        GuestInfo: {
          LastName: '',
          FirstName: '',
          Age: '',
        },
        //确认MSG参数
        sureMsg: {
          EmployeeIdStr: "",
          CheckInDate: "",
          RatePlanID: "",
          CheckOutDate: "",
          RoomCount: "",
          guestLastName: "",
          guestFirstName: "",
          guestAddress: "",
          guestPhoneNumber: "",
          guestEmail: "",
          BookingID: "",
          HotelName: "",
          HotelPic: "",
          GuestList: [],
          TotalPrice: 0,
          CustomerPayMoney: 0,
          DiscountMoney: 0,
          OrderSource: 2,
          OrderForm: 1,
          //备注
          guestRequest: "",
          hotelId: '',
          roomType: 0,
        },
        auditNum: 0,
        childNum: 0,
        isBaoChild: false,
        SettlementPrice: 0,
        price: 0,
        pickerBeginDateBefore: "", //入住时间前可选范围
        pickerBeginDateAfter: "", //入住时间后可选范围
        RoomTypeList: [], //房间等级
        scatteredRoomTypeList: [], //散客房间类型
        WeekList: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //周一至周日
        checkInWeek: "", //周一至周日
        checkOutWeek: "",
        beforeCheck: {
          disabledDate: time => {
            if (this.params.CheckInDate) {
              let endTime = new Date(
                this.getBeforeDate(-7, new Date().Format("yyyy-MM-dd"))
              );
              return time && endTime.getTime() >= time.getTime();
            } else {
              return false;
            }
          }
        },
        afterCheck: {
          disabledDate: time => {
            if (this.params.CheckInDate) {
              let startTime = new Date(this.params.CheckInDate);
              //可以选择当天
              return (
                time &&
                time.getTime() < startTime.getTime() - 1 * 24 * 60 * 60 * 1000
              );
            } else {
              return false;
            }
          }
        },
        rules: {
          guestLastName: [{
            required: true,
            message: this.$t('objFill.v101.hote.qiingsrxyw'),
            trigger: "blur",
          }],
          guestFirstName: [{
            required: true,
            message: this.$t('objFill.v101.hote.qingsrmyw'),
            trigger: "blur",
          }],
          guestEmail: [{
            required: true,
            message: this.$t('objFill.qingshureml'),
            trigger: "blur",
          }],
          guestPhoneNumber: [{
            required: true,
            message: this.$t('admin.admin_SpareTel'),
            trigger: "blur",
          }],
          LastName: [{
            required: true,
            message: this.$t('objFill.v101.hote.qiingsrxyw'),
            trigger: "blur",
          }],
          FirstName: [{
            required: true,
            message: this.$t('objFill.v101.hote.qingsrmyw'),
            trigger: "blur",
          }],
        },


      };
    },
    methods: {
      // 提交下单
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.submLoading) return;
            let flag = false;
            this.sureMsg.hotelId = this.$route.query.hotelId;
            this.sureMsg.RatePlanID = this.$route.query.RatePlanID;
            this.sureMsg.CheckInDate = this.params.CheckInDate;
            this.sureMsg.EmployeeIdStr = this.getLocalStorage().EmployeeId + "";
            this.sureMsg.totalRoomCount = this.params.searchroomGroup.length;
            this.sureMsg.RoomCount = this.params.searchroomGroup.length;
            this.sureMsg.CheckOutDate = this.params.CheckOutDate;
            if (this.roomRateDetails && this.roomRateDetails.RatePlanList && this.roomRateDetails.RatePlanList
              .length > 0) {
              this.sureMsg.roomType = this.roomRateDetails.RatePlanList[0].BedType;
            }

            //判断选择的人数与入住人数
            let Count1 = 0;
            this.sureMsg.GuestList.forEach(item => {
              if (item.numberOfChildren > 0) {
                let ageNum = 0;
                item.GuestInfo.forEach(guestItem => {
                  if (guestItem.Age <= 12) {
                    ageNum = ageNum + 1;
                  }
                });
                if (item.numberOfChildren != ageNum) {
                  this.Error(this.$t('objFill.v101.hote.ertsbzq'));
                }
              }
            });
            this.submLoading = true;
            this.apipost("dmc_post_GetDiDaBookingConfirm", this.sureMsg, res => {
                this.loading = false;
                if (res.data.resultCode == 1) {
                  this.Success(this.$t('objFill.v101.hote.xiadancg'));
                  this.$router.push({
                    name: "HotelOrderTotal",
                    query: {
                      tab: '散卖酒店订单'
                    }
                  })
                } else {
                  this.Error(res.data.message);
                }
                this.submLoading = false;
              },
              null
            );


          }
        })
      },

      //获取道旅餐食类型
      getdidaMealType() {
        this.apipost('dmc_post_GetDidaMealType', this.hotelMsg, res => {
          this.loading = false
          if (res.data.resultCode == 1) {
            this.HotelMealTypes = res.data.data;
          }
        }, null)
      },
      //获取餐型
      getMealtype(mealtypeId) {
        let mealtypeName = "";
        if (mealtypeId > 0) {
          this.HotelMealTypes.forEach((item) => {
            if (item.ID == mealtypeId) {
              mealtypeName = item.Name_CN;
            }
          });
        }
        return mealtypeName;
      },
      //日期格式化
      getIsCancella(RatePlanCancellationPolicyList, TotalPrice) {
        let IsCancel = 0; //不可取消
        let date2 = new Date(); //当前时间
        RatePlanCancellationPolicyList.forEach((item, index) => {
          var dt = new Date(item.FromDate); //取消时间
          if (IsCancel == 0) {
            if (dt > date2) {
              if (item.Amount == TotalPrice) {
                IsCancel = 1;
              } else {
                IsCancel = 2;
              }
            } else {
              if (item.Amount != TotalPrice) {
                IsCancel = 2;
              }
            }
          }

        });
        return IsCancel;
      },
      //通过日期得到周几
      getWeek() {
        let CheckInDate = new Date(this.params.CheckInDate).getDay();
        let CheckOutDate = new Date(this.params.CheckOutDate).getDay();

        this.checkInWeek = this.WeekList[CheckInDate];
        this.checkOutWeek = this.WeekList[CheckOutDate];
      },


      //通过日期得到周几
      getWeekD(dateTime) {
        let dt = new Date(dateTime);
        let year = dt.getFullYear();
        let month = (dt.getMonth() + 1).toString().padStart(2, "0");
        let date = (dt.getDate() + 1).toString().padStart(2, "0");
        return month + "-" + date + "(" + this.WeekList[dt.getDay()] + ")";
      },

      //日期格式化
      getformatDateStr(value) {
        var dt = new Date(value);
        let year = dt.getFullYear();
        let month = (dt.getMonth() + 1).toString().padStart(2, "0");
        let date = (dt.getDate()).toString().padStart(2, "0");
        return year + "-" + month + "-" + date;
      },
      optionsFnStar(cd) {
        return (
          cd <=
          date.formatDate(date.addToDate(new Date(), {
            days: 9
          }), "YYYY/MM/DD")
        );
      },
      optionsFnEnd(cd) {
        return (
          cd >=
          date.formatDate(date.addToDate(new Date(), {
            days: 9
          }), "YYYY/MM/DD")
        );
      },
      dateRangeHandler(e) {
        if (qDateProxy.value) qDateProxy.value.hide();
        this.initHotel();
      },
      dateRangeHandler2(e) {
        if (qDateProxy2.value) qDateProxy2.value.hide();
        this.initHotel();
      },
      dateRangeHandler3(e) {
        if (qDateProxy3.value) qDateProxy3.value.hide();
      },

      initHotel() {
        this.getWeek();
        this.loading = true;
        this.apipost(
          "dmc_post_GetDiDaPriceConfirm",
          this.params,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.dataList = res.data.data.PriceDetails;
              this.roomRateDetails = res.data.data.PriceDetails.HotelList[0];
              this.sureMsg.BookingID = res.data.data.PriceDetails.ReferenceNo;
              this.sureMsg.checkInTime = res.data.data.PriceDetails.CheckInDate;
              this.sureMsg.TotalPrice = this.roomRateDetails.TotalPrice;
              this.sureMsg.RoomCount = this.$route.query.room;
              this.DanWei = res.data.data.PriceDetails.HotelList[0].RatePlanList[0].Currency;
              if (
                Object.prototype.toString.call(this.dataList.HotelList) ==
                "[object Object]"
              ) {
                let arr = [];
                arr.push(this.dataList.HotelList);
                this.dataList.HotelList = arr;
              }
              this.TotalChildCount = 0;
              let rateGrouoLen = 0;
            }
            if (this.roomRateDetails && this.roomRateDetails.RatePlanList && this.roomRateDetails.RatePlanList
              .length > 0) {
              this.submDisabled = false;
            } else {
              this.submDisabled = true;
            }
          },
          null
        );
      },
      goShenqing() {
        let dom = document.querySelector("#blankLink");
        dom.href = `http://${window.location.host}/#/PsSystem/${1}`;
        dom.click();
      },
      //获取道旅床类型列表
      getdidaBedType() {
        this.apipost(
          "dmc_post_GetDidaBedTypeBaseInfo",
          this.hotelMsg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.HotelRoomTypes = res.data.data;
            }
          },
          null
        );
      },
      //获取道旅餐食类型
      getdidaMealType() {
        this.apipost(
          "dmc_post_GetDidaMealType",
          this.hotelMsg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.HotelMealTypes = res.data.data;
            }
          },
          null
        );
      },
      //获取房型
      getRoomType(roomtypeId) {
        let roomtypeName = "";
        if (roomtypeId > 0) {
          this.HotelRoomTypes.forEach(item => {
            if (item.ID == roomtypeId) {
              roomtypeName = item.Name_CN;
            }
          });
        }
        return roomtypeName;
      },
      getPrice(price) {
        return Math.ceil(price);
      }
    },
    created() {
      let userInfo = this.getLocalStorage();
      this.EmployeeId = userInfo.EmployeeId;

      if (this.$route.query.StartDate) {
        // this.dateList.push(this.$route.query.StartDate)
        this.params.CheckInDate = this.$route.query.StartDate;
      }
      if (this.$route.query.EndDate) {
        // this.dateList.push(this.$route.query.EndDate)
        this.params.CheckOutDate = this.$route.query.EndDate;
      }
      if (this.$route.query.auditNum) {
        this.params.AdultCount = this.$route.query.auditNum;
        this.auditNum = this.$route.query.auditNum;
      }
      if (this.$route.query.childNum) {
        this.params.childNum = this.$route.query.childNum;
      }
      if (this.$route.query.searchroomGroup) {
        //JSON.parse(JSON.stringify(this.currentEditItemData))
        this.params.searchroomGroup = JSON.parse(
          decodeURIComponent(this.$route.query.searchroomGroup)
        );
      }
      if (this.$route.query.RatePlanID) {
        this.params.ratePlanID = this.$route.query.RatePlanID;
      }
      if (this.$route.query.hotelId) {
        this.params.hotelId = this.$route.query.hotelId;
        this.sureMsg.hotelId = this.$route.query.hotelId;
      }
      if (this.$route.query.Address) {
        this.Address = this.$route.query.Address;
      }
      if (this.$route.query.HotelName) {
        this.sureMsg.HotelName = this.$route.query.HotelName;
      }
      if (this.$route.query.room) {
        this.params.RoomCount = this.$route.query.room;
      }
      if (this.params.searchroomGroup && this.params.searchroomGroup != null) {
        this.sureMsg.GuestList = [];
        this.params.searchroomGroup.forEach((item, index) => {
          var guestInfoList = [];
          let allprople = item.numberOfAdults + item.numberOfChildren;
          for (let i = 1; i <= allprople; i++) {
            let obj = {
              LastName: "",
              FirstName: "",
              Age: ""
            };
            guestInfoList.push(obj);
          }
          var obj = {
            RoomNum: index + 1,
            numberOfAdults: item.numberOfAdults,
            numberOfChildren: item.numberOfChildren,
            GuestInfo: guestInfoList
          };
          this.sureMsg.GuestList.push(obj);
        });
      }
    },
    mounted() {
      this.getdidaBedType();
      this.getdidaMealType();
      this.initHotel();
    }
  };

</script>