<style>
  .roomReservationsDetailsTalbe .el-button {
    padding: 5px;
    display: block;
    margin: 5px auto;
    font-size: 12px;
  }

  .rq_importNote {
    color: red;
  }

  .rq_disImNote {
    color: #ea6d6d;
  }

  .piliangPop .roomReserSet tr {
    height: 30px;
  }

  .piliangPop .roomReserSet tr th {
    background-color: #eee;
    text-align: center;
    margin-bottom: 10px;
  }

  .roomResetTable tr td {
    padding: 5px;
  }

</style>

<template>
  <div>
    <div class="query-box" style="border-bottom: none;">
      <ul>
        <li>
          <input v-if="IsOperation!=1" type="button" class="fr normalBtn mb30" :value="$t('pub.saveBtn')"
            @click="saveList(1)" />
          <input v-if="IsOperation==1&& EditBtn" type="button" class="fr normalBtn mb30" :value="$t('pub.saveBtn')"
            @click="saveList(1)" />
          <span v-if="IsOperation==1" style="color:red;font-size:14px;">{{$t('ground.yizhidanbng')}}</span>
        </li>
      </ul>

    </div>
    <div style="width: 100%;  overflow-x: auto;padding-bottom: 10px; " :style="{height: boxHeight + 'px'}"
      class="ownScrollbarStyle" ref="ownScrollbarStyle">
      <table border="0" cellspacing="1" cellpadding="0" class="roomReservationsDetailsTalbe" v-loading="loading">
        <tr>
          <th class="fz14" colspan="5">
            {{$t('visa.v_teaminfo')}}:{{TCNUM}}&nbsp;&nbsp;{{$t('leader.leader_Leader')}}:{{LeaderName}}
            &nbsp;&nbsp;{{$t('leader.leader_Guide')}}:{{GuideName}}</th>
          <th class="fz14" colspan="17">
            <el-tooltip class="item" effect="dark" content="批量上传手配书" placement="top-start"
              style="float:left;margin-left:20px;display:none;">
              <el-popover placement="bottom" popper-class="piliangPop" width="400" trigger="click"
                v-model="isShowPiliangPop">
                <table class="dmcSetTable roomReserSet" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <th>日期</th>
                    <th>酒店名称</th>
                  </tr>
                  <template v-for="(lItem,lIndex) in list">
                    <tr v-for="(subItem,subIndex) in lItem.HotelOrderList" :key="subIndex+lIndex">
                      <td style="width:100px;">
                        {{lItem.UseTimeStr}}
                      </td>
                      <td style="width:280px;">
                        <el-checkbox v-model="subItem.IsChecked" @change="MoreUpdate(subItem)">{{subItem.NewHotelName}}
                        </el-checkbox>
                      </td>
                    </tr>
                  </template>
                  <tr>
                    <td colspan="2" style="text-align:center">
                      <el-upload :http-request="uploadFileBtnS" :multiple="false" :show-file-list="false" action=''>
                        <el-button size="small" type="danger" style="margin-top:10px;">
                          选择文件</el-button>
                      </el-upload>
                    </td>
                  </tr>
                </table>
                <el-button slot="reference" style="background:#E95252; border-color:#E95252" type="primary">
                  批量上传手配书
                </el-button>
              </el-popover>
            </el-tooltip>
            <span style="margin-top:6px;display:inline-block;">{{$t('ground.dijiecaozuoxinxi')}}</span>

            <el-tooltip class="item" effect="dark" content="批量修改" placement="top-start"
              style="float:left;margin-left:20px;">
              <el-popover placement="bottom" popper-class="piliangPop" width="400" trigger="click"
                v-model="IsShowMoreUpdate">
                <table class="dmcSetTable roomReserSet roomResetTable" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <th>房型</th>
                    <th>房间数量</th>
                    <th>{{$t('admin.admin_personNumber')}}</th>
                  </tr>
                  <tr v-for="(subItem,subIndex) in HotelHouseTypeList" :key="subIndex">
                    <td style="width:100px;">
                      <el-checkbox v-model="subItem.IsChecked"> {{subItem.Name}}
                      </el-checkbox>
                    </td>
                    <td style="width:150px;">
                      <el-input class='w135 tcenter' maxlength="2" @keyup.native="checkInteger(subItem,'HouseNum')"
                        v-model='subItem.HouseNum'></el-input>
                    </td>
                    <td style="width:150px;">
                      <el-input class='w135 tcenter' maxlength="2" @keyup.native="checkInteger(subItem,'BookNum')"
                        v-model='subItem.BookNum'>
                      </el-input>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2" style="text-align:right">
                      <input type="button" class="normalBtn" :value="$t('pub.saveBtn')" @click="BatchHotelOrder()">
                    </td>
                  </tr>
                </table>
                <el-button slot="reference" style="background:#E95252; border-color:#E95252;" type="primary"
                  v-if="EditBtn" @click="IsShowMoreUpdate=true">
                  批量修改酒店
                </el-button>
              </el-popover>
            </el-tooltip>
          </th>
        </tr>
        <tr>
          <th width="120">{{$t('hotel.table_CheckInDate')}}</th>
          <th width="180">{{$t('hotel.hotel_name')}}</th>
          <th width="120">{{$t('ground.jiweizongshu')}}<br />(Y/E/F)</th>
          <th width="80">{{$t('ground.zhanchuang')}}/<br />{{$t('ground.bzhanchuang')}}</th>
          <th width="80">{{$t('ground.shiji')}}<br />{{$t('ground.yongfangshu')}}</th>
          <th width="170">{{$t('ground.xiugaijiudiangys')}}</th>
          <th width="100">{{$t('ground.fangjianleixing')}}</th>
          <th width="80">{{$t('ground.fangjian')}}<br />{{$t("ground.yudingshu")}}</th>
          <th width="80">{{$t('ground.yudingrenshu')}}</th>
          <th width="80">{{$t('ground.danjiameiren')}}</th>
          <th width="80">{{$t('ground.mianjianrenshu')}}</th>
          <th width="80">{{$t('ground.jinexiaoji')}}</th>
          <th width="80">{{$t('ground.fanyongleixing')}}</th>
          <th width="80">{{$t('hotel.hotel_commission')}}</th>
          <th width="80">{{$t('ground.fanyongyjin')}}</th>
          <th width="80">{{$t('ground.rutangshui')}}</th>
          <th width="80">{{$t('ground.chengshishui')}}</th>
          <th width="80">{{$t('ground.tingchefei')}}</th>
          <th width="100">{{$t('ground.jinezongji')}}</th>
          <th width="250">{{$t('ground.fukuanbzdth')}}</th>
          <th width="80">{{$t('system.table_operation')}}</th>
        </tr>
        <template v-for="(item,index) in list">
          <template v-for="(subItem,subIndex) in item.HotelOrderList">
            <tr v-for="(childItem,childIndex) in subItem.OrderDetailsList" :key="childIndex">
              <td>
                {{item.UseTimeStr}}
              </td>
              <!-- 酒店名称 -->
              <td>
                <table class="hotelTable">
                  <tr>
                    <td colspan="2">
                      <p class="link" style="word-break: normal;text-align:left;"
                        :class="{'Hotel_red':subItem.HotelChangeState==3}"
                        @click="goUrlR('HotelManagement',subItem.HotelId,'酒店管理')">{{subItem.HotelName}}</p>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2" style="height:5px;"></td>
                  </tr>
                  <tr>
                    <td width="40">
                      {{$t('hotel.table_tel')}}：
                    </td>
                    <td style="text-align:left">
                      {{subItem.Tel}}
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2" style="height:5px;"></td>
                  </tr>
                  <tr>
                    <td width="40">
                      {{$t('hotel.table_address')}}：
                    </td>
                    <td style="text-align:left">
                      {{subItem.Address}}
                    </td>
                  </tr>
                </table>
                <br />
                <span style="color:red;font-weight:bold" >报价金额：{{subItem.OfferUnitPrice}}/人</span>
              </td>
              <!-- 机位总数/(Y/E/F) -->
              <td>
                <p class="link" @click="goUrlT('RegistrationList',subItem.TCID,'报名清单')">
                  {{flightTotal}}/{{subItem.HouseStatistics.RealityYSeatNum}}/{{subItem.HouseStatistics.RealityESeatNum}}/{{subItem.HouseStatistics.RealityFSeatNum}}
                </p>
              </td>
              <!-- 占床/不占床 -->
              <td>
                <p class="link" @click="goUrlT('passengerHouse',subItem.TCID,'房间分配')">
                  {{subItem.RealityHouseGuestNum}}/{{subItem.HouseStatistics.NoNeedBed}}</p>
              </td>
              <!-- 实际用房数 -->
              <td>
                {{subItem.RealityHouseTypeCount}}
              </td>
              <td>
                <table class="hotelTable">
                  <tr>
                    <td width="70" style="text-align:center;" colspan="2">
                      <span style="color:green">{{subItem.NewHotelName}}</span>
                      <el-popover placement="right" width="540" trigger="click" v-model="subItem.isShowPop">
                        <comCheckHotel :ref="'comCheckHotel'+index+subIndex+''" v-on:childHotel="childHotelList"
                          :UseDate="item.UseTimeStr" :Country="ChooseCountry">
                        </comCheckHotel>
                        <el-button size="small" type="danger" :data-index="'comCheckHotel'+index+subIndex+''"
                          slot="reference" style="cursor:pointer;"
                          @click="getChildHotel(index,subIndex),subItem.isShowPop=true">
                          {{$t('sm.jiudianxuanz')}}
                        </el-button>
                      </el-popover>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2" style="height:5px;"></td>
                  </tr>
                  <tr>
                    <td width="70" style="text-align:right;">
                      {{$t('hotel.hotel_Supplier')}}
                    </td>
                    <td>
                      <el-select class='w120 sel' v-model='subItem.SupplierId' @change="getSupplierShoupei(subItem)"
                        filterable :placeholder="$t('ground.qingxuanzegys')">
                        <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
                        <el-option v-for="(SupplierItem,Supplierindex) in SupplierList" :key="Supplierindex"
                          :label="SupplierItem.Name" :value="SupplierItem.ID">
                        </el-option>
                      </el-select>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2" style="height:5px;"></td>
                  </tr>
                  <tr>
                    <td colspan="2">
                      <span v-if="subItem.IsHaveShouPeiFee==0" style="color:red;">{{$t('ground.wshoupeifei')}}</span>
                      <span v-if="subItem.IsHaveShouPeiFee==1&&isShoufeifei==true"
                        style="color:red;">{{$t('ground.shoupeifei')}}:{{subItem.ShouPeiMoney}}</span>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2">
                      <p style="padding-top: 5px;">
                        <template v-if="subItem.ContractUrl!=''">
                          <span style="color:green">已上传手配书</span>
                          &nbsp;&nbsp;<a v-if="subItem.ContractUrl" target="_blank" style="color:blue"
                            :href="subItem.ContractUrl">查看</a>
                        </template>
                      </p>
                      <el-upload :http-request="uploadFileBtnS" :multiple="false" :show-file-list="false" action=''>
                        <el-button size="small" type="danger" @click='getItem(index, subIndex)'>
                          {{!subItem.ContractUrl ? '上传手配书' : '重新上传手配书'}}</el-button>
                      </el-upload>
                    </td>
                  </tr>
                </table>
              </td>
              <!-- 房间类型 -->
              <td>
                <div v-if="childItem.HouseType === 2">
                  <template
                    v-if="subItem.HouseStatistics.HouseTypeList&&subItem.HouseStatistics.HouseTypeList.length>1">
                    {{subItem.HouseStatistics.HouseTypeList[1].HouseTypeNameExt}}
                  </template>
                  <template v-if="childIndex==4">
                    <template v-if="subItem.DriverGuideIsRebate==1">
                      <br /><span style="color:green">{{$t('hotel.hotel_commission')}}</span>
                    </template>
                    <template v-else-if="subItem.DriverGuideIsRebate==0">
                      <br /><span style="color:red;">{{$t('ground.bufanyong')}}</span>
                    </template>
                  </template>
                  <template v-if="childIndex==5">
                    <br /><span style="color:red;">{{$t('ground.bufanyong')}}</span>
                  </template></div>
              </td>
              <!-- 房间数 -->
              <td>
                <div v-if="childItem.HouseType === 2">
                  <el-input class='w40 tcenter' maxlength="2" @keyup.native="checkPrice(childItem,'HouseTypeCount')"
                    v-model='childItem.HouseTypeCount' :disabled="IsEditHotelPeople==0?true:false"></el-input>
                </div>
              </td>
              <td>
                <div v-if="childItem.HouseType === 2">
                  <el-input class='w40 tcenter' maxlength="2" @keyup.native="checkInteger(childItem,'BookNum')"
                    @input="calculationPrice(subItem)" v-model='childItem.BookNum'
                    :disabled="IsEditHotelPeople==0?true:false">
                  </el-input>
                </div>
              </td>
              <!-- 单价/每人 -->
              <td>
                <div v-if="childItem.HouseType === 2">
                  <template v-if="childIndex==1">
                    <template v-if="EditBtn">
                      <el-input @keyup.native="checkInteger(childItem,'UnitPrice')" class='w60 tcenter'
                        @input="calculationPrice(subItem)" v-model='childItem.UnitPrice'></el-input>
                    </template>
                    <template v-else>
                      <el-input @keyup.native="checkInteger(childItem,'UnitPrice')" class='w60 tcenter'
                        @input="calculationPrice(subItem)" v-model='childItem.UnitPrice'
                        :disabled="(IsEditHotel==0||childItem.IsHaveStockPrice==1)?true:false">
                      </el-input>
                    </template>
                  </template>
                  <template v-else>
                    <el-input @keyup.native="checkInteger(childItem,'UnitPrice')" class='w60 tcenter'
                      @input="calculationPrice(subItem)" v-model='childItem.UnitPrice'
                      :disabled="IsEditHotel==0?true:false">
                    </el-input>
                  </template></div>
              </td>
              <!-- 免减人数 -->
              <td>
                <div v-if="childItem.HouseType === 2">
                  <el-input class='w40' maxlength="2" @keyup.native="checkInteger(childItem,'HotelDiscount')"
                    v-model='childItem.HotelDiscount' @input="calculationPrice(subItem)">
                  </el-input>
                </div>
              </td>
              <!-- 金额小计 -->
              <td style="white-space:nowrap;">
                <div v-if="childItem.HouseType === 2">
                  <el-input class='w40' @keyup.native="checkPrice(childItem,'TotalPrice')"
                    v-model='childItem.TotalPrice' @input="changeTotalPrice(subItem)">
                  </el-input>
                </div>
              </td>
              <!-- 返佣类型 -->
              <td style="white-space:nowrap;" v-if="childIndex==0">
                <template v-if="subItem.RebateType==1">
                  <span style="color:green">{{$t('ground.hanshui')}}</span>
                </template>
                <template v-else>
                  <span style="color:red"> {{$t('ground.bhanshui')}}</span>
                </template>
              </td>
              <!--返佣-->
              <td>
                <div v-if="childItem.HouseType === 2">
                  <template v-if="childIndex<4">
                    <el-input class='w40' maxlength="2" @keyup.native="checkInteger(childItem,'RebateRatio')"
                      v-model='childItem.RebateRatio'
                      @input="SetRebateRatio(subItem,childItem.RebateRatio),calculationPrice(subItem)"
                      :disabled="IsEditHotel==0?true:false"></el-input> %
                  </template>
                  <template v-if="childIndex==5">
                    <el-input class='w40' maxlength="2" @keyup.native="checkInteger(childItem,'RebateRatio')"
                      v-model='childItem.RebateRatio' @input="calculationPrice(subItem)" :disabled="true"></el-input> %
                  </template>
                  <template v-if="childIndex==4 && subItem.DriverGuideIsRebate==0">
                    <el-input class='w40' maxlength="2" @keyup.native="checkInteger(childItem,'RebateRatio')"
                      v-model='childItem.RebateRatio' @input="calculationPrice(subItem)" :disabled="true"></el-input> %
                  </template></div>
              </td>
              <!--返佣金额-->
              <td>
                <div v-if="childItem.HouseType === 2">
                  <!--含税-->
                  <template v-if="subItem.RebateType==1">
                    <!--税别-->
                    <template v-if="subItem.TaxType==2">
                      {{ (childItem.UnitPrice * (childItem.BookNum - childItem.HotelDiscount) * (1 + XiaoFeiTaxFee )*( childItem.RebateRatio / 100)).toFixed(2)}}
                    </template>
                    <template v-else>
                      {{(childItem.UnitPrice * (childItem.BookNum - childItem.HotelDiscount) * (1)*( childItem.RebateRatio / 100)).toFixed(2) }}
                    </template>
                  </template>
                  <!--不含税-->
                  <template v-else>
                    <!--税别-->
                    <template v-if="subItem.TaxType==2">
                      {{(childItem.UnitPrice * (childItem.BookNum - childItem.HotelDiscount) * (1 + XiaoFeiTaxFee)*( childItem.RebateRatio / 100)).toFixed(2)}}
                    </template>
                    <template v-else>
                      {{(childItem.UnitPrice * (childItem.BookNum - childItem.HotelDiscount) * (1)*( childItem.RebateRatio / 100)).toFixed(2)}}
                    </template>
                  </template></div>
              </td>
              <!-- 入汤税 -->
              <td style="white-space:nowrap;">
                {{subItem.InTangTax}}
              </td>
              <!-- 城市税 -->
              <td style="white-space:nowrap;">
                {{subItem.CityTax}}
              </td>
              <!-- 停车费 -->
              <td style="white-space:nowrap;">
                {{subItem.ParkFee}}
              </td>
              <!-- 金额总计 -->
              <td style="white-space:nowrap;">
                {{subItem.TotalPrice}}
                <template v-if="subItem.NewTotalPrice">
                  <br /><span style="color:red;">{{subItem.NewTotalPrice}}</span>
                </template>
              </td>
              <!-- 付款方式 -->
              <td>
                <table class="hotelTable">
                  <tr>
                    <td width="70" style="text-align:right;">{{$t('hotel.hotel_Currency')}}：</td>
                    <td>
                      <el-select v-model="subItem.CurrencyId" :placeholder="$t('pub.pleaseSel')" class='w135 sel'
                        @change="calculationPrice(subItem)">
                        <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
                        <el-option v-for="(item,index) in allCurrencyList" :key="index" :label="item.Name"
                          :value="item.ID">
                        </el-option>
                      </el-select>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2" style="height:5px;"></td>
                  </tr>
                  <tr>
                    <td width="70" style="text-align:right;">{{$t('ground.dfzhuangtai')}}：</td>
                    <td>
                      <el-select class='w135 sel' v-model='subItem.DMCState' :placeholder="$t('pub.pleaseSel')"
                        :disabled="IsEditHotel==0?true:false">
                        <el-option :label="$t('pub.pleaseSel')" :value='0'></el-option>
                        <el-option :label="$t('pub.sureBtn')" :value='1'></el-option>
                        <el-option :label="$t('visa.v_zanding')" :value='2'></el-option>
                      </el-select>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2" style="height:5px;"></td>
                  </tr>
                  <tr>
                    <td width="70" style="text-align:right;">{{$t('salesModule.SureTime')}}：</td>
                    <td>
                      <el-date-picker v-model='subItem.SureTime' class='w135' value-format="yyyy-MM-dd" type="date"
                        :disabled="IsEditHotel==0?true:false"></el-date-picker>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2" style="height:5px;"></td>
                  </tr>
                  <!-- <tr>
                    <td width="70" style="text-align:right;">{{$t('ground.shurushubie')}}：</td>
                    <td>
                      <el-select class='w135 sel' v-model='subItem.TaxType' :placeholder="$t('pub.pleaseSel')"
                        @change="calculationPrice(subItem)" :disabled="IsEditHotel==0?true:false">
                        <el-option :label="$t('pub.pleaseSel')" :value='0'></el-option>
                        <el-option :label="$t('pub.SR')" :value='1'></el-option>
                        <el-option :label="$t('pub.SB')" :value='2'></el-option>
                      </el-select>
                    </td>
                  </tr> -->
                  <tr>
                    <td colspan="2" style="height:5px;"></td>
                  </tr>
                  <tr>
                    <td width="70" style="text-align:right;color:red">{{$t('fnc.fkfangshi')}}：</td>
                    <td>
                      <el-select class='w135 sel' v-model='subItem.PayStyle' :placeholder="$t('pub.pleaseSel')"
                        :disabled="IsEditHotel==0?true:false" @change="PayChange(subItem)">
                        <el-option :label="$t('pub.pleaseSel')" :value='0'></el-option>
                        <el-option :label="$t('ground.xianfu')" :value='1'></el-option>
                        <el-option :label="$t('ground.qiandan')" :value='2'></el-option>
                        <el-option :label="$t('ground.shiwudk')" :value='3'></el-option>
                        <el-option :label="$t('ground.yufu')" :value='4'></el-option>
                        <el-option :label="$t('ground.yufukuandk')" :value='5'></el-option>
                        <el-option :label="$t('ground.yuejie')" :value='9'></el-option>
                        <el-option :label="$t('ground.lingduidydf')" :value='10'></el-option>
                        <el-option :label="$t('ground.shuaka')" :value='11'></el-option>
                      </el-select>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2" style="height:5px;"></td>
                  </tr>
                  <!-- <tr>
                    <td width="70" style="text-align:right;">{{$t('ground.sidaoffkfs')}}：</td>
                    <td>
                      <el-select class='w135 sel' v-model='subItem.DMCPayType' :placeholder="$t('pub.pleaseSel')"
                        :disabled="IsEditHotel==0?true:false" @change="calculationPrice(subItem)">
                        <el-option :label="$t('pub.pleaseSel')" :value='0'></el-option>
                        <el-option :label="$t('ground.yuejie')" :value='9'></el-option>
                        <el-option :label="$t('ground.xianfu')" :value='1'></el-option>
                        <el-option :label="$t('ground.qiandan')" :value='2'></el-option>
                        <el-option :label="$t('ground.shiwudk')" :value='3'></el-option>
                        <el-option :label="$t('ground.yufu')" :value='4'></el-option>
                        <el-option :label="$t('ground.yufukuandk')" :value='5'></el-option>
                        <el-option :label="$t('ground.gongsihetzf')" :value='6'></el-option>
                        <el-option :label="$t('ground.lingduidydf')" :value='10'></el-option>
                        <el-option :label="$t('ground.shuaka')" :value='11'></el-option>
                      </el-select>
                    </td>
                  </tr> -->
                  <tr v-show="subItem.PayStyle==6">
                    <td colspan="2" style="height:5px;"></td>
                  </tr>
                  <tr v-show="subItem.PayStyle==6">
                    <td width="70" style="text-align:right;">{{$t('ground.fukuanth')}}：</td>
                    <td>
                      <el-input class='w135' v-model='subItem.PayTypeTCNUM' :disabled="IsEditHotel==0?true:false">
                      </el-input>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2" style="height:5px;"></td>
                  </tr>
                  <tr>
                    <td width="70" style="text-align:right;">{{$t('ground.dingtuanhao')}}：</td>
                    <td>
                      <el-input class='w135' v-model='subItem.ReserveNo'></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2" style="height:5px;"></td>
                  </tr>
                  <tr style="display:none;">
                    <td width="70" style="text-align:right;">{{$t('ground.tixinggys')}}:</td>
                    <td>
                      <el-select class='w135 sel' v-model='subItem.SupplierHotelStatus'
                        :placeholder="$t('pub.pleaseSel')">
                        <el-option :label="$t('pub.pleaseSel')" :value='0'></el-option>
                        <el-option :label="$t('ground.yibantx')" :value='1'></el-option>
                        <el-option :label="$t('ground.zhongyaotx')" :value='2'></el-option>
                      </el-select>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2" style="height:5px;">
                    </td>
                  </tr>
                  <tr>
                    <td width="70" style="text-align:right;">{{$t('ground.duigysbz')}}：</td>
                    <td>
                      <el-input type='textarea' class='w135' v-model='subItem.Remarks'></el-input>
                    </td>
                  </tr>
                  <tr v-if="subItem.SupplierToDmcRemarks" style="display:none;">
                    <td width="70" style="text-align:right;">{{$t('ground.gongysddjbz')}}：</td>
                    <td>
                      <span
                        :class="{'rq_disImNote':subItem.SupplierToDmcHotelStatus==1&&DateMinus(subItem.SupplierToDmcHotelStatusTime)<=5,'rq_importNote':subItem.SupplierToDmcHotelStatus==2&&DateMinus(subItem.SupplierToDmcHotelStatusTime)<=5}">
                        {{subItem.SupplierToDmcRemarks}}
                      </span>
                    </td>
                  </tr>
                  <tr v-if="EditBtn">
                    <td width="70" style="text-align:right;">{{$t('ground.shifoutbgxfj')}}:</td>
                    <td>
                      <el-select class='w135 sel' v-model='subItem.IsSyncHotelCount'>
                        <el-option :label="$t('ground.tongbugx')" :value='0'></el-option>
                        <el-option :label="$t('ground.bugengxin')" :value='1'></el-option>
                      </el-select>
                    </td>
                  </tr>
                </table>
              </td>
              <!-- 操作 -->
              <td>
                <template v-if="subItem.OPState==1">
                  <span class="Hotel_red">{{$t('salesModule.OPZD')}}</span>
                </template>
                <template v-if="IsOperation!=1">
                  <el-tooltip class="item" effect="dark" :content="$t('pub.saveBtn')" placement="top-start">
                    <el-button icon="iconfont icon-baocun1" @click="SaveSingle(subItem)" type="primary"></el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" :content="$t('pub.addBtn')" v-if="subItem.OPState!=1"
                    placement="top-start">
                    <el-button @click='AddHotel(item,subIndex)' icon="iconfont icon-tianjia" type="primary"></el-button>
                  </el-tooltip>
                  <el-tooltip v-if="item.HotelOrderList.length>1 && subItem.OPState!=1" class="item" effect="dark"
                    :content="$t('system.table_delete')" placement="top-start">
                    <el-button type="primary" icon="iconfont icon-shanchu" @click='DeleteHotel(item,subIndex)'>
                    </el-button>
                  </el-tooltip>
                </template>
                <el-popover width="200" trigger="click" popper-class="Bus_HotelPop">
                  <commonHotelLog :ref="'comHotelLog'+index+subIndex+''"> </commonHotelLog>
                  <div slot="reference" class="w80" style="cursor:pointer;text-decoration:underline;"
                    @click="GetHotelLog(subItem,index,subIndex)">{{$t('fnc.rizhi')}}</div>
                </el-popover>
              </td>
            </tr>
          </template>
        </template>
      </table>
      <div class="noDataNotice" v-if="list.length<1">
        <i class="iconfont icon-kong"></i>
        <p>{{$t('active.ld_noData')}}</p>
      </div>
    </div>
  </div>
</template>
<script>
  import moment from 'moment'
  import comCheckHotel from "../commonPage/comCheckHotel.vue";
  import commonHotelLog from "../commonPage/commonHotelLog.vue";
  import commonPHlInfo from "../commonPage/commonPriceHotelInfo.vue";
  export default {
    data() {
      return {
        isShoufeifei: false,
        LineId: 0,
        EditBtn: false, //房餐景点修改权限
        defaultSelectValue: 0,
        list: [],
        roomList: [],
        TCNUM: '',
        flightTotal: 0,
        GuestNum: 0,
        hotelList: [],
        //创建人头像
        CreateByPhoto: '',
        //创建人联系电话
        CreateByAccount: '',
        //创建人姓名
        CreateByName: '',
        //点击项
        ClickItem: {},
        offsetwidth: 0,
        parentEle: '',
        loading: false,
        boxHeight: 0,
        //合团的团期编号
        NewTCIDs: "",
        //供应商列表
        SupplierList: [],
        ckedHotelId: 0,
        ckedHotelName: '',
        showHotelList: false,
        findex: 0,
        childIndex: 0,
        //修改酒店价格，付款方式权限[0-不能修改，1-有权限修改]
        IsEditHotel: 1,
        //0-可以操作，1-已制单，不能操作
        IsOperation: 1,
        LeaderName: "", //领队名称
        GuideName: "", //导游名称
        IsEditHotelPeople: 1, //是否有修改人数权限[0-不能修改，1-可以修改]
        IsCombine: false, //是否是合团，true-是合团，false-不是合团
        allCurrencyList: [], //币种列表
        checkedIndex: '',
        checkedsubIndex: '',
        XiaoFeiTaxFee: 0.1,
        IsMoreUpdate: 0, //批量上传手配书0-单个上传,1-批量上传
        isShowPiliangPop: false, //是否显示批量上传popover
        IsShowMoreUpdate: false,
        HotelHouseTypeList: [{
            IsChecked: false,
            HouseType: 1,
            Name: "单间",
            HouseNum: 0,
            BookNum: 0
          },
          {
            IsChecked: false,
            HouseType: 2,
            Name: "标准间",
            HouseNum: 0,
            BookNum: 0
          },
          {
            IsChecked: false,
            HouseType: 3,
            Name: "大床间",
            HouseNum: 0,
            BookNum: 0
          },
          {
            IsChecked: false,
            HouseType: 4,
            Name: "三人间",
            HouseNum: 0,
            BookNum: 0
          },
          {
            IsChecked: false,
            HouseType: 5,
            Name: "司导间",
            HouseNum: 0,
            BookNum: 0
          },
        ],
        ChooseCountry: "651"
      }
    },
    components: {
      comCheckHotel,
      commonHotelLog,
      commonPHInfo: commonPHlInfo
    },
    methods: {
      //批量修改房间数和房间人
      BatchHotelOrder() {
        var checkArray = [];
        this.HotelHouseTypeList.forEach(item => {
          if (item.IsChecked) {
            checkArray.push(item);
          }
        });
        if (checkArray != null && checkArray.length > 0) {
          var msg = {
            TCID: this.$route.query.id,
            OrderDetails: checkArray
          };
          this.apipost('dmcstatistics_get_SetBatchHotelOrderService', msg, res => {
            this.loading = false;
            this.IsShowMoreUpdate = false;
            if (res.data.resultCode == 1) {
              this.getList();
              this.Success(res.data.message);
              this.HotelHouseTypeList.forEach(item => {
                item.IsChecked = false;
                item.HouseNum = 0;
                item.BookNum = 0;
              });
            } else {
              this.Error(res.data.message);
            }
          }, err => {})
        } else {
          this.Info("请选择要修改的房型!");
        }
      },
      MoreUpdate(subItem) {
        this.IsMoreUpdate = 1;
      },
      //付款方式切换
      PayChange(subItem) {
        if (subItem.PayStyle > 0) {
          subItem.DMCPayType = subItem.PayStyle;
        }
      },
      //调用子组件方法
      GetHotelUsePriceList(HotelId, UseDay, index, hotelSubIndex) {
        let str = `dmccomPriceHotelInfo${index}${hotelSubIndex}`;
        this.$refs[str][0].getHotelPriceList(HotelId, UseDay);
      },
      //调用子组件获取日志方法
      GetHotelLog(subItem, index, hotelSubIndex) {
        let str = `comHotelLog${index}${hotelSubIndex}`
        this.$refs[str][0].getHotelLogsList(subItem.TCID, subItem.HotelId, subItem.CheckInDateStr);
      },
      //获取子组件返回的数据
      childHotelList(ckedObj) {
        //使用时间
        var oldData = JSON.parse(JSON.stringify(this.list[this.findex].HotelOrderList[this.childIndex]));
        this.list.forEach(x => {
          x.HotelOrderList.forEach(y => {
            y.isShowPop = false;
          })
        });
        var useTime = oldData.CheckInDateStr;
        var hotelId = ckedObj.ID;
        var TCID = oldData.TCID;
        this.apipost('travel_get_GetHotelUsePriceListService_V2', {
          HotelId: hotelId,
          UseTime: useTime,
          TCID: TCID
        }, res => {
          if (res.data.resultCode == 1) {
            var objData = res.data.data;
            //库存不够
            if (objData.isOverStock == 0) {
              if (objData.list && objData.list.length > 0) {
                var str = "";
                objData.list.forEach((cItem, cIndex) => {
                  str += (cIndex == 0 ? "" : ",") + cItem.TCNUM + "使用了" + cItem.LastUseNum + this.$t(
                    'hotel.hotel_room');
                });
                if (str != "") {
                  this.Info(str);
                }
              }
            }
            //库存充足或没有酒店库存的情况
            else if (objData.isOverStock == 1 || objData.isOverStock == -1) {
              this.list[this.findex].HotelOrderList[this.childIndex].Address = ckedObj.Address;
              this.list[this.findex].HotelOrderList[this.childIndex].NewHotelName = ckedObj.Name;
              this.list[this.findex].HotelOrderList[this.childIndex].Tel = ckedObj.Tel;
              this.list[this.findex].HotelOrderList[this.childIndex].NewHotelId = ckedObj.ID;
              this.list[this.findex].HotelOrderList[this.childIndex].PayStyle = ckedObj.PayStyle;
              this.list[this.findex].HotelOrderList[this.childIndex].PayStyleExt = ckedObj.PayStyle;
              //判断供应商编号是否大于0
              if (ckedObj.Supplier > 0) {
                this.list[this.findex].HotelOrderList[this.childIndex].SupplierId = ckedObj.Supplier;
              }
              this.list[this.findex].HotelOrderList[this.childIndex].OrderDetailsList.forEach((subItem,
                subIndex) => {
                //判断是否有库存价格
                if (subIndex == 1 && ckedObj.CostPrice > 0 && ckedObj.Inventory > 0) {
                  subItem.IsHaveStockPrice = 1;
                } else {
                  subItem.IsHaveStockPrice = 0;
                }
                subItem.UnitPrice = ckedObj.CostPrice;
                subItem.RebateRatio = ckedObj.RebateRatio;
              });

              this.calculationPrice(this.list[this.findex].HotelOrderList[this.childIndex]);
            }
          } else {
            this.Error(this.$t('ground.qingqiucanscw'));
          }
        }, err => {})
      },
      getChildHotel(index, subIndex) {
        this.findex = index;
        this.childIndex = subIndex;
        let str = `comCheckHotel${index}${subIndex}`
        this.$refs[str][0].getCheckHotel();
      },
      //输入返佣自动前面4个房型赋值
      SetRebateRatio(subItem, newValue) {
        subItem.OrderDetailsList.forEach((sItem, sIndex) => {
          if (sIndex < 4) {
            sItem.RebateRatio = newValue;
          }
        });
      },
      DateMinus(sDate) {
        var newDate = moment(sDate).format("YYYY-MM-DD");
        var sdate = new Date(newDate.replace(/-/g, "/"));
        var now = new Date();
        var days = now.getTime() - sdate.getTime();
        var day = Math.abs(parseInt(days / (1000 * 60 * 60 * 24)));
        return day;
      },
      //添加酒店
      AddHotel(item, subIndex) {
        var subItem = JSON.parse(JSON.stringify(item.HotelOrderList[subIndex]));
        subItem.HotelId = 0;
        subItem.HotelName = "";
        subItem.OrderID = 0;
        subItem.OrderDetailsList.forEach(childItem => {
          childItem.OrderDetailsId = 0;
        });
        item.HotelOrderList.push(subItem);
      },
      //删除酒店
      DeleteHotel(item, subIndex) {
        var that = this;
        this.Confirm(this.$t('sm.sfdeletenothf'), function () {
          var subItem = item.HotelOrderList[subIndex];
          if (subItem.OrderID > 0) {
            that.apipost('dmcstatistics_post_DeleteHotelOrder', {
              ID: subItem.OrderID,
              TCID: subItem.TCID
            }, res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getList();
                item.HotelOrderList.splice(subIndex, 1);
              } else {
                that.Error(res.data.message);
              }
            }, err => {})
          } else {
            item.HotelOrderList.splice(subIndex, 1);
            that.saveList(0);
          }
        });
      },
      getItem(index, subIndex) {
        this.checkedIndex = index
        this.checkedsubIndex = subIndex
      },
      uploadFileBtnS(file) { //手配书上传
        let that = this
        let newArr = []
        newArr.push(file.file)
        let path = '/Upload/DMC/Hotel'
        this.$message.info(this.$t('tips.shangchuanzhong'))
        this.UploadSelfFileT(path, newArr, x => {
          var fileUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
          //批量上传
          if (this.IsMoreUpdate == 1) {
            this.list.forEach((sItem, sIndex) => {
              sItem.HotelOrderList.forEach((subItem, subIndex) => {
                if (subItem.IsChecked) {
                  subItem.ContractUrl = fileUrl;
                }
                subItem.IsChecked = false;
                this.$forceUpdate();
              });
            });
            this.isShowPiliangPop = false;
          } else {
            this.list[this.checkedIndex].HotelOrderList[this.checkedsubIndex].ContractUrl = fileUrl;
          }
          this.IsMoreUpdate = 0;
          this.$forceUpdate()
        })
      },
      goUrl(path, obj, name) {
        this.$router.push({
          path: path,
          query: {
            id: obj.HotelId,
            blank: "y",
            tab: name
          }
        });
      },
      goUrlR(path, obj, title) {
        this.$router.push({
          name: path,
          query: {
            "ID": obj,
            blank: 'y',
            tab: title
          }
        })
      },
      goUrlT(path, obj, title) {
        this.$router.push({
          name: path,
          query: {
            "id": obj,
            blank: 'y',
            tab: title
          }
        })
      },
      getList() {
        this.loading = true;
        let msg = {
          TCIDs: '',
          NewCombinationNum: '',
          IsCombine: '',
          NewTCIDs: ''
        }
        if (this.$route.query.OrderType) {
          msg = {
            TCIDs: this.$route.query.id,
            OrderType: this.$route.query.OrderType
          }
        } else {
          msg = {
            TCIDs: this.$route.query.id,
            NewCombinationNum: this.$route.query.NewCombinationNum,
            IsCombine: this.IsCombine,
            NewTCIDs: this.NewTCIDs
          }
        }
        this.apipost('dmcstatistics_get_GetHotelStaticsDetail_V2', msg, res => {
          if (res.data.resultCode == 1) {
            this.IsOperation = res.data.data.IsOperation;
            if (this.IsEditHotel == 0) {
              this.IsEditHotel = res.data.data.IsEditHotel;
            }
            if (this.IsEditHotelPeople == 0) {
              this.IsEditHotelPeople = res.data.data.IsEditHotelPeople;
            }

            let list = res.data.data.HotelOrderListReport;
            this.CreateBy = res.data.data.CreateBy;
            this.CreateByPhoto = res.data.data.CreateByPhoto;
            this.CreateByAccount = res.data.data.CreateByAccount;
            if (list != null && list.length > 0) {
              list.forEach((item, sIndex) => {
                item.HotelOrderList.forEach(subItem => {
                  //默认不更新
                  if (this.LineId != 14) {
                    subItem.IsSyncHotelCount = 1;
                  }
                  subItem.hotelList.push({
                    Name: subItem.NewHotelName,
                    ID: subItem.NewHotelId
                  });

                  subItem.OrderDetailsList.forEach((x, index1) => {
                    x.HouseTypeCount = x.HouseTypeCount.toString();
                    x.UnitPrice = x.UnitPrice.toString();
                    x.HotelDiscount = x.HotelDiscount.toString();
                  })
                  if (subItem.ReserveNo == '' || subItem.ReserveNo == null) {
                    subItem.ReserveNo = this.$route.query.NewCombinationNum;
                  }
                  subItem.OrderDetailsList = subItem.OrderDetailsList.filter(item => item.HouseType === 2)
                  const item = subItem.OrderDetailsList.find(item => item.HouseType === 2) || {
                    TotalPrice: 0
                  }
                  subItem.TotalPrice = item.TotalPrice.toFixed(2);
                  // 将金额总计的值赋值给金额小计
                  subItem.OrderDetailsList[0].TotalPrice = Number(subItem.TotalPrice).toFixed(2);
                  subItem.isShowPop = false;
                  subItem.ckedHotelName = "";
                  //遍历手配
                  this.SupplierList.forEach(x => {
                    if (x.ID == subItem.SupplierId) {
                      subItem.IsHaveShouPeiFee = x.IsHaveShouPeiFee;
                      subItem.ShouPeiMoney = x.ShouPeiMoney;
                    }
                  })
                })
              });
              this.list = list;
              this.$forceUpdate();
            }
          } else {
            this.Error(res.data.message);
          }
          this.loading = false
        }, err => {})
      },
      calculationPrice(obj) {
        let totalPrice = 0;
        //获取当前选中的对象
        let currentObj = {};
        if (obj.CurrencyId != 0) {
          currentObj = this.allCurrencyList.find(item => {
            return item.ID === obj.CurrencyId; //筛选出匹配数据
          });
        }

        //日元
        let jpaObj = this.allCurrencyList.find(item => {
          return item.ID === 3; //筛选出匹配数据
        });
        obj.OrderDetailsList.forEach((item, index) => {
          var tempPrice = 0;
          var coefficient = 1;
          //税别
          if (obj.TaxType == 2) {
            coefficient = 1 + this.XiaoFeiTaxFee;
          }
          if (index == 4 && obj.DMCPayType == 9) {
            tempPrice = 0;
          } else {
            tempPrice = item.UnitPrice * (item.BookNum - item.HotelDiscount) * (coefficient - item.RebateRatio /
              100);
          }
          totalPrice += tempPrice;
        })
        totalPrice += obj.ParkFee + obj.CityTax + obj.InTangTax;
        obj.TotalPrice = totalPrice;
        if (this.LineId == 14) {
          if (currentObj && currentObj.ID > 0) {
            //人民币
            if (currentObj.ID == 1) {
              obj.NewTotalPrice = currentObj.Name + ":" + (totalPrice * jpaObj.PayRate).toFixed(2);
            }
            //日元
            else if (currentObj.ID == 3) {
              obj.NewTotalPrice = "";
            } else {
              if (currentObj.CurrentRate > 1) {
                obj.NewTotalPrice = currentObj.Name + ":" + ((totalPrice * jpaObj.PayRate) / currentObj.CurrentRate)
                  .toFixed(2);
              } else {
                obj.NewTotalPrice = currentObj.Name + ":" + ((totalPrice * jpaObj.PayRate) * currentObj.CurrentRate)
                  .toFixed(2);
              }
            }
          } else {
            obj.NewTotalPrice = "";
          }
        }
        // 将金额总计的值赋值给金额小计
        obj.OrderDetailsList[0].TotalPrice = Number(obj.TotalPrice).toFixed(2);
        this.$forceUpdate();
      },
      changeTotalPrice(obj) {
        obj.TotalPrice = Number(obj.OrderDetailsList[0].TotalPrice).toFixed(2);
      },
      saveList(type) {
        if (type == 0) {
          this.list.forEach(item => {
            item.HotelOrderList.forEach(subItem => {
              subItem.HotelOrderState = 0;
            });
          })
        }
        if (type == 1) {
          this.list.forEach(item => {
            item.HotelOrderList.forEach(subItem => {
              subItem.HotelOrderState = 1;
            });
          })
        }
        var flag = true;
        var isUpload = true;
        var str = "";
        this.list.forEach(item => {
          item.HotelOrderList.forEach(subItem => {
            if (isUpload && subItem.PayStyle == 1 && subItem.ContractUrl == '' && !this.EditBtn) {
              str += `请上传${item.UseTimeStr}的手配书`
              isUpload = false;
            }
            subItem.OrderDetailsList.forEach((y, sIndex) => {
              if (y.HouseTypeCount) {
                y.HouseTypeCount = parseFloat(y.HouseTypeCount);
              } else {
                y.HouseTypeCount = 0;
              }
              if (y.UnitPrice) {
                y.UnitPrice = parseInt(y.UnitPrice);
              } else {
                y.UnitPrice = 0;
              }
              if (y.HotelDiscount) {
                y.HotelDiscount = parseInt(y.HotelDiscount);
              } else {
                y.HotelDiscount = 0;
              }
              if (y.BookNum == "") {
                y.BookNum = 0;
              }
              if (!this.$commonUtils.isNumber(y.RebateRatio)) {
                y.RebateRatio = 0;
              }
            })
            if (!this.$commonUtils.isNumber(subItem.TotalPrice)) {
              subItem.TotalPrice = 0;
            }
          });
        })

        this.loading = true;
        this.apipost('dmcstatistics_get_SetHotelOrder', this.list, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.getList();
            this.Success(res.data.message);
          } else {
            this.Error(res.data.message);
          }
        }, err => {})
      },
      //单条保存
      SaveSingle(item) {
        item.HotelOrderState = 1;
        var flag = true;
        var isUpload = true;
        var str = "";
        this.list.forEach(item => {
          item.HotelOrderList.forEach(subItem => {
            if (isUpload && subItem.PayStyle == 1 && subItem.ContractUrl == '' && !this.EditBtn) {
              str += `请上传${item.UseTimeStr}的手配书`
              isUpload = false;
            }
            subItem.OrderDetailsList.forEach(y => {
              if (y.HouseTypeCount) {
                y.HouseTypeCount = parseFloat(y.HouseTypeCount);
              } else {
                y.HouseTypeCount = 0;
              }

              if (y.UnitPrice) {
                y.UnitPrice = parseInt(y.UnitPrice);
              } else {
                y.UnitPrice = 0;
              }
              if (y.HotelDiscount) {
                y.HotelDiscount = parseInt(y.HotelDiscount);
              } else {
                y.HotelDiscount = 0;
              }
              if (y.BookNum == "") {
                y.BookNum = 0;
              }
              if (!this.$commonUtils.isNumber(y.RebateRatio)) {
                y.RebateRatio = 0;
              }
            })
            if (!this.$commonUtils.isNumber(subItem.TotalPrice)) {
              subItem.TotalPrice = 0;
            }
          });
        })
        let mag = {
          TotalList: this.list,
          SingleItem: item
        };
        this.apipost('dmcstatistics_get_SetHotelOrder', this.list, res => {
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            this.getList();
          } else {
            this.Error(res.data.message);
          }
        }, err => {})
      },

      // 获取供应商
      initSupplier() {
        this.apipost("supplier_post_GetAllList", {
          Type: 1,
          Country: 651
        }, res => {
          if (res.data.resultCode === 1) {
            this.SupplierList = res.data.data;
          }
        }, err => {});
      },
      //改变id获取手配价格
      getSupplierShoupei(SubItem) {
        this.SupplierList.forEach(x => {
          if (x.ID == SubItem.SupplierId) {
            SubItem.IsHaveShouPeiFee = x.IsHaveShouPeiFee;
            SubItem.ShouPeiMoney = x.ShouPeiMoney;
          }
        })
      },
      //获取所有币种
      getAllCurrency() {
        this.apipost("financeinfo_post_GetList", {}, res => {
          if (res.data.resultCode === 1) {
            this.allCurrencyList = res.data.data;
          }
        }, err => {});
      },
      GetAuth() {
        var actionCode = this.$AuthCode.EditRoomDinnerTIcket;
        this.CheckUserAuth(actionCode, res => {
          if (res.data.resultCode == 1 && res.data.data == 1) {
            this.EditBtn = true;
            this.IsEditHotel = 1;
            this.IsEditHotelPeople = 1;
          }
        });
      },
    },
    mounted() {
      if (this.$route.query.LineId) {
        this.LineId = this.$route.query.LineId;
      }
      if (this.LineId == 90) {
        this.ChooseCountry = 2;
      } else if (this.LineId == 14) {
        this.ChooseCountry = 651;
      }
      this.GetAuth();
      this.getAllCurrency();
      this.LeaderName = this.$route.query.LeaderName;
      this.GuideName = this.$route.query.GuideName;
      this.TCNUM = this.$route.query.TCNUM;
      this.flightTotal = this.$route.query.flightTotal;
      this.GuestNum = this.$route.query.GuestNum;
      this.IsCombine = this.$route.query.IsCombine;
      this.NewTCIDs = this.$route.query.NewTCIDs;
      this.isShoufeifei = this.$route.query.isShoufeifei
      let width = window.innerWidth - 50;
      let height = window.innerHeight - 65 - 55;
      this.boxHeight = height;
      this.offsetwidth = width;
      this.initSupplier();
      this.getList();
    }
  }

</script>
<style>
  .roomReservationsDetailsTalbe {
    border-collapse: collapse;
    background: #fff;
    text-align: center;
  }

  .roomReservationsDetailsTalbe .el-button+.el-button {
    margin: 5px auto !important;
  }

  .roomReservationsDetailsTalbe tr th {
    background: #eee;
    height: 40px;
    font-size: 12px;
    color: #333;
    border: 1px solid #d1d1d1;
  }

  .roomReservationsDetailsTalbe tr td {
    font-size: 12px;
    border: 1px solid #d1d1d1;
  }

  .roomReservationsDetailsTalbe .pHouseStyle {
    border-bottom: 1px solid #ccc;
    height: 28px;
    line-height: 28px;
  }

  .roomReservationsDetailsTalbe tr td .colorRed {
    color: #E95252;
  }

  .roomReservationsDetailsTalbe tr td .pHouseStyle:last-child {
    border-bottom: none;
  }

  .roomReservationsDetailsTalbe tr td input {
    height: 20px !important;
    padding: 0 !important;
    text-align: center;
  }

  .roomReservationsDetailsTalbe tr td .sel input {
    height: 34px !important;
    padding-right: 20px !important;
    padding-left: 5px !important;
    font-size: 12px !important;
  }

  .roomReservationsDetailsTalbe tr td .link:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  .roomReservationsDetailsTalbe .Hotel_red {
    color: red;
  }




  .roomReservationsDetailsTalbe .hotelTable {
    border: none;
  }

  .roomReservationsDetailsTalbe .hotelTable tr td {
    border: none;
  }

</style>