<template>
  <div class="q-pa-lg">
    <div style="shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);margin: auto;" :style="{'width':$q.platform.is.desktop?'70vw':'100vw'}">
      <div class="bg-white rounded-border q-mb-md q-px-lg q-py-md">
        <div class="row items-center text-orange-6">
          <q-btn class="bg-orange-6 text-white" round size="sm" icon="person" />
          <span class="fz18 q-pl-lg">{{$t('v101.scatteredOrder.prompt1')}}</span>
        </div>
        <div class="row items-center text-green-6 q-mt-xs q-pt-sm">
          <q-btn class="bg-green-6 text-white" round size="sm" icon="wallet" />
          <span class="fz18 q-pl-lg">{{$t('v101.scatteredOrder.prompt2')}}</span>
        </div>
      </div>
      <div class="col row bg-white rounded-border q-mb-md q-pa-lg">
        <div class="col-5 row">
          <q-img class="col-5 q-mr-lg" :src="params.imgUrl" style="height: auto;display: inline-block;" spinner-color="drk" spinner-size="20px" mode="cover"/>
          <div class="col column q-pl-lg">
            <div class="text-red fz18  text-weight-bold">{{dataList.hotelName}}</div>
            <div class="q-pt-xs">
              <q-icon class="text-grey-13 q-mr-xs" name="place" size="xs"></q-icon>
              <span class="col fz14 text-weight-bold text-blick">{{dataList.address}}</span>
            </div>
            <div class="q-pt-xs">
              <span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.fangxing')}}</span>
              <span class="text-grey-9 q-pr-lg">
                {{roomRateDetails?getGradeType(roomRateDetails.gradeType):''}}{{roomRateDetails?getRoomType(roomRateDetails.roomType):''}}
              </span>
            </div>
            <div class="q-pt-xs">
              <span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.xiyan')}}</span>
              <span class="text-grey-9">
                <template v-if="roomRateDetails.smoking==0">{{$t('v101.scatteredOrder.xiyan0')}}</template>
                <template v-if="roomRateDetails.smoking==1">{{$t('v101.scatteredOrder.xiyan1')}}</template>
              </span>
            </div>
            <div class="q-pt-xs">
              <span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.cesuo')}}</span>
              <span class="text-grey-9">
                <template v-if="roomRateDetails.withBath==0">{{$t('v101.scatteredOrder.wu')}}</template>
                <template v-if="roomRateDetails.withBath==1">{{$t('v101.scatteredOrder.you')}}</template>
              </span>
            </div>
            <div class="q-pt-xs">
              <span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.lutiankefang')}}</span>
              <span class="text-grey-9">
                <template v-if="roomRateDetails.withOpenAirBath==0">{{$t('v101.scatteredOrder.wu')}}</template>
                <template v-if="roomRateDetails.withOpenAirBath==1">{{$t('v101.scatteredOrder.you')}}</template>
              </span>
            </div>
          </div>
        </div>
        <div class="column q-pl-lg">
          <div class="text-red fz18 text-weight-bold">{{$t('v101.scatteredOrder.orderamount')}}</div>
          <div class="q-pt-md">
            <div>
              <span class="text-grey-6">円</span>
              <span class="text-red fz16  text-weight-bold q-pl-lg">{{sureMsg.totalPriceJapanese}}</span>
            </div>
            <div class="q-pt-xs">
              <span class="text-grey-6">{{$t('v101.scatteredOrder.renmingbi')}}</span>
              <span class="text-red fz16  text-weight-bold q-pl-lg">{{sureMsg.totalChargeableRateInfo}}</span>
            </div>
            <div class="q-pt-xs">
              <span class="text-grey-6">{{$t('v101.scatteredOrder.youhui')}}</span>
              <span class="text-red fz16  text-weight-bold q-pl-lg">{{sureMsg.DiscountMoney}}</span>
            </div>
            <div class="q-pt-xs">
              <span class="text-grey-6">{{$t('v101.scatteredOrder.shifu')}}</span>
              <span class="text-h6 text-red text-weight-bold q-pl-lg">{{SettlementPrice}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="col column bg-white rounded-border q-mb-md">
        <div class="bg-light-blue-1 q-py-md q-px-lg fz14 rounded-borders row items-center text-weight-bold">
          {{$t('v101.scatteredOrder.yudinxinx')}}
        </div>
        <div class="q-pa-lg column">
          <div class="row items-center q-mb-md">
            <span class="text-grey-6">房型信息</span>
            <div class="q-pl-lg">
              <span class="q-pr-lg"></span>
            </div>
          </div>
          <div class="row items-center q-mb-md">
            <span class="text-grey-6">入住人数</span>
            <div class="q-pl-lg"></div>
          </div>
          <div class="row items-center q-mb-md">
            <span class="text-grey-6">入住日期</span>
            <div class="q-pl-lg row">
              <div class="row items-center">
                <q-field v-if="$q.platform.is.desktop" stack-label label="入住时间" standout class="col-2" style="min-width: 200px" dense>
                  <div class="self-center full-width no-outline" tabindex="0">
                    {{dateRange}}
                  </div>
                  <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
                    <q-date v-model="dateRange" mask="YYYY/MM/DD"  :options="optionsFn" @range-end="dateRangeHandler"></q-date>
                  </q-popup-proxy>
                </q-field>
                <span class="q-ml-md">周六</span>
                <div class="q-ml-sm text-grey-6">
                  <span>16:00</span>
                  <span class="q-ml-sm">之后</span>
                </div>
              </div>
              <div class="row items-center q-px-md"><q-separator class=" q-px-sm bg-dark"/></div>
              <div class="row items-center">
                <q-field v-if="$q.platform.is.desktop" stack-label label="入住时间" standout class="col-2" style="min-width: 200px" dense>
                  <div class="self-center full-width no-outline" tabindex="0">
                    {{dateRange}}
                  </div>
                  <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
                    <q-date v-model="dateRange" mask="YYYY/MM/DD"  :options="optionsFn" @range-end="dateRangeHandler"></q-date>
                  </q-popup-proxy>
                </q-field>
                <span class="q-ml-md">周六</span>
                <div class="q-ml-sm text-grey-6">
                  <span>18:00</span>
                  <span class="q-ml-sm">之前</span>
                </div>
              </div>
            </div>
          </div>
          <div class="row items-center q-mb-md">
            <span class="text-grey-6">房间数量</span>
            <div class="q-pl-lg row items-center">
              <span>1</span>
              <div class="relative-position q-ml-md">
                <q-icon class="absolute text-orange-6" style="left: 0;top: 1px;width: inherit;" name="information" size="18px"></q-icon>
                <span class="q-pl-lg">仅剩3间</span>
              </div>
            </div>
          </div>
          <div class="row items-center">
            <span class="text-grey-6">房间情况</span>
            <div class="q-pl-lg row">
              <q-card flatv class="row items-end q-px-md q-pb-sm q-mr-md">
                <div class="text-grey-9">12/24/2022</div>
                <div class="q-ml-lg row items-end">
                  <span>円</span>
                  <span class="text-red text-weight-bold fz18 q-px-xs">
                    <span class="relative-position" style="top:3px">2345</span>
                  </span>
                  <span class="text-grey-6">/晚</span>
                </div>
              </q-card>
            </div>
          </div>
        </div>
      </div>
      <div class="col column bg-white rounded-border q-mb-md">
        <div class="bg-light-blue-1 q-py-md q-px-lg fz14 rounded-borders row items-center justify-between">
          <span class="text-weight-bold">入住信息</span>
          <span class="relative-position text-orange-6">
            <q-icon class="absolute text-orange-6" style="left: 0;top: 1px;width: inherit;" name="information" size="18px"></q-icon>
            <span class="q-pl-lg">所填姓名需和入住时所持证件一致</span>
          </span>
        </div>
        <div class="q-px-lg q-py-lg">
          <q-form
            dense
            @submit="onSubmit"
            @reset="onReset"
            class="row wrap"
          >
            <div class="col-6 row">
              <span class="q-px-lg HotelSure-text"><span class="text-red">*</span> 入住时间</span>
              <q-input
              class="col"
              dense
              size="xs"
              filled
              v-model="name"
              label="Your name"
              hint=""
              lazy-rules
              :rules="[ val => val && val.length > 0 || 'Please type something']"
            />
            </div>
            <div class="col-6 row">
              <span class="q-px-lg HotelSure-text"><span class="text-red">*</span> 预定人</span>
              <div class="col row justify-between">
                <div class="col-6">
                  <q-input
                    dense
                    size="xs"
                    filled
                    v-model="name"
                    label="姓"
                    hint=""
                    lazy-rules
                    :rules="[ val => val && val.length > 0 || 'Please type something']"
                  />
                </div>
                <div class="col-6">
                  <q-input
                  class="q-pl-lg"
                  dense
                  size="xs"
                  filled
                  v-model="name"
                  label="名"
                  hint=""
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Please type something']"
                />
                </div>
                
              </div>
              
            </div>
            <div class="col-6 row">
              <span class="q-px-lg HotelSure-text"><span class="text-red">*</span> 当前地址</span>
              <q-input
              class="col"
              dense
              size="xs"
              filled
              v-model="name"
              label="Your name"
              hint=""
              lazy-rules
              :rules="[ val => val && val.length > 0 || 'Please type something']"
            />
            </div>
            <div class="col-6 row">
              <span class="q-px-lg HotelSure-text"><span class="text-red">*</span> Email</span>
              <q-input
              class="col"
              dense
              size="xs"
              filled
              v-model="name"
              label="Your name"
              hint=""
              lazy-rules
              :rules="[ val => val && val.length > 0 || 'Please type something']"
            />
            </div>
            <div class="col-6 row">
              <span class="q-px-lg HotelSure-text"><span class="text-red">*</span> 电话</span>
              <q-input
              class="col"
              dense
              size="xs"
              filled
              v-model="name"
              label="Your name"
              hint=""
              lazy-rules
              :rules="[ val => val && val.length > 0 || 'Please type something']"
            />
            </div>
            <div class="col-12 row">
              <div class="col-6 row">
                <span class="q-px-lg HotelSure-text"><span class="text-red"></span> 客户需求</span>
                <q-input
                class="col"
                dense
                size="xs"
                filled
                autogrow
                type="textarea"
                v-model="name"
                label="Your name"
                hint=""
                lazy-rules
              />
              </div>
            </div>
            <div class="col-12 row">
              <div class="col-6 row q-mb-md" v-for="item in 1">
                  <span class="q-px-lg HotelSure-text"><span class="text-red"></span> 房间1</span>
                  <div class="col row">
                    <div class="col-4 row">
                      <span class="q-mx-md">成人男</span>
                      <q-select class="col" v-model="numberOfAdults" dense :options="adultList" emit-value map-options :label="$t('v101.scattered.chengren')" standout @update:model-value="setPeopleNum"/>
                    </div>
                    <div class="col-4 row">
                      <span class="q-mx-md">成人女</span>
                      <q-select class="col" v-model="numberOfAdults" dense :options="adultList" emit-value map-options :label="$t('v101.scattered.chengren')" standout @update:model-value="setPeopleNum"/>
                    </div>
                    <div class="col-4 row">
                      <span class="q-mx-md">儿童数</span>
                      <q-select class="col" v-model="numberOfChildren" dense :options="childrenList" emit-value map-options :label="$t('v101.scattered.ertong')" standout @update:model-value="setPeopleNum"/>
                    </div>
                  </div>
              </div>
            </div>
            <div class="column text-red q-pl-lg">
              <span>没有通知取消，手续费：100%</span>
              <span>入住当日取消，手续费：100%</span>
            </div>
          </q-form>

        </div>
      </div>
      <div class="col column bg-white rounded-border q-mb-md">
        <div class="bg-light-blue-1 q-py-md q-px-lg fz14 rounded-borders row items-center justify-between">
          <span class="text-weight-bold">优惠信息 </span>
        </div>
        <div class="q-px-lg q-py-lg">
          <div class="row">
            <div class="col-3">
              <q-input
                dense
                size="xs"
                filled
                v-model="name"
                label="Your name"
                hint=""
                lazy-rules
              />
            </div>
            <div class="q-ml-lg"><q-btn class="q-px-lg q-py-sm" color="primary" dense unelevated label="兑换"/></div>
          </div>
          <div class="column">
            <span class="fz16 text-weight-bold q-pb-md">优惠券使用</span>
            <span>暂无可用优惠券</span>
          </div>
        </div>
      </div>
      <div class="col row q-mb-md">
        <q-btn class="col-12 bg-blue rounded-border text-white q-py-sm" label="下单" :loading="submLoading" @click="submitForm"/>
      </div>


    </div>
  </div>
  </template>
  
  <script lang="ts">
    import svgIcon from '../../components/global/svg-icon.vue'
  import { defineComponent, ref, reactive, toRef, toRefs, provide, onMounted, inject, watch } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { DirtionmaryHelper } from '../../config/dictionary'
  import { date } from 'quasar'
  import message from '../../utils/message'
  import { moneyFormat, dateDiffer } from '../../utils/tools'
  import HotelService from '../../api/scattered'
  import { currentRouter } from 'src/router'
  import { HotelRate,HotelArea, useHotel } from '../../utils/hotelRate'
  import { ApiResult } from 'src/@types/enumHelper'
  export default defineComponent({
    components: { svgIcon },
    props: {
      HotelRow: {
        type: Object,
        require: false
      },
      hotelInfor: {
        type: Object,
        require: false
      }
    },
    emits:['close'],
    setup(props, context) {
      const { t } = useI18n()
      const qDateProxy = ref(null) as any
      // const HotelLength = inject(DirtionmaryHelper.HOTEL_CAR_ORDER_LENGTH) as any
      const data = reactive({
        params:{
          // hotelId:'',
          sort:1,
          displayFrom:1,
          arrivalDate:'',
          departureDate:'',
          searchroomGroup:[],
          imgUrl: ''
        },
        getParamsMsg:{} as any,
        urlParamsMsg:{} as any,
        adultList: [] as Array<Number>,//成人下拉
        childrenList: [] as Array<Number>,//儿童下拉
        numberOfAdults: 0,
        numberOfChildren: 0,
        submLoading: false,
        loading: false,
        dateRange: '' as any,//当前日期
        dateRangeFormat: '',//可选日期
        roomRateDetails: {} as any,
        dataList: {} as any,
          //确认MSG参数
        sureMsg:{
            dataId:'',
            hotelId:'',
            totalRoomCount:'',
            arrivalDate:'',
            checkInTime:'',
            departureDate:'',
            roomOptionCd:'',
            totalChargeableRateInfo:'',
            totalPriceJapanese:'',
            roomGroup:[] as Array<any>,
            guestLastName:'',
            guestFirstName:'',
            guestAddress:'',
            guestPhoneNumber:'',
            guestEmail:'',
            //备注
            guestRequest:'',
            CustomerId:0,
            HotelName:'',
            HotelPic:'',
            EmployeeIdStr:'',
            OldTotalPrice:0,

            CustomerPayMoney:0,
            DiscountMoney:0,
            OrderSource:2,  
            OrderForm:1,

          },
          auditNum:0,
          childNum:0,
          TotalChildCount:0,//孩子能否报入
          chekedChildCount:0,//选了的儿童数
          isBaoChild: false,
          SettlementPrice : 0,
          price: 0,
          isShowTime: true,
          isLoginB2B: true,
          pickerBeginDateBefore:'',//入住时间前可选范围
          pickerBeginDateAfter:'',//入住时间后可选范围
          RoomTypeList: [] as Array<HotelArea>,//房间等级
          scatteredRoomTypeList: [] as Array<HotelArea>,//散客房间类型
        name: '',
        age: '',
      })
      for(let i=0;i<21;i++){
        data.adultList.push(i)
        data.childrenList.push(i)
      }
      data.getParamsMsg = JSON.parse(localStorage.getItem(DirtionmaryHelper.SCATTERED_HOTEL_ORDER))
      data.params.arrivalDate = data.getParamsMsg.arrivalDate
      data.params.departureDate = data.getParamsMsg.departureDate
      data.params.searchroomGroup = data.getParamsMsg.searchroomGroup
      data.params.imgUrl = data.getParamsMsg.imgUrl
      data.urlParamsMsg = currentRouter.currentRoute.value.params
      data.dateRange = date.formatDate(date.addToDate(new Date(), { days: 9 }), 'YYYY/MM/DD')
      data.RoomTypeList = useHotel.getHotelRoomType()
      data.scatteredRoomTypeList = useHotel.getHotelScatRoom()
      // data.dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 8 }), 'YYYY/MM/DD')
      // data.dateRangeFormat = data.dateRange
  
      // watch(
      //   () => data.urlParamsMsg.hotelId,
      //   (o, n) => {
      //     methods.initHotel()
      //   }
      // )
      const methods = {
        submitForm () {
          
        },
        onReset () {
          data.name.value = null
          data.age.value = null
        },
        //设置房间里面成人数改变总成人数和儿童数
        setPeopleNum() {
            // data.auditNum = 0;
            // data.childNum = 0;
            // search.searchroomGroup.forEach(x => {
            //     data.auditNum += x.numberOfAdults;
            //     data.childNum += x.numberOfChildren;
            // })
            // if (data.auditNum == null || data.auditNum == undefined) {
            //     data.auditNum = 1
            // }
            // if (data.childNum == null || data.childNum == undefined) {
            //     data.childNum = 1
            // }
        },
        optionsFn(cd: any) {
          return cd >= date.formatDate(date.addToDate(new Date(), { days: 8 }), 'YYYY/MM/DD')
        },
        dateRangeHandler(e: any) {
          if (qDateProxy.value) qDateProxy.value.hide()
        },
        //获取房间等级
        getRoomType(type) {
          let gradeType = "";
          switch (parseInt(type)) {
            case 1:
              gradeType = data.scatteredRoomTypeList[0].name;
              break;
            case 2:
              gradeType = data.scatteredRoomTypeList[1].name;
              break;
            case 3:
              gradeType = data.scatteredRoomTypeList[2].name;
              break;
            case 4:
              gradeType = data.scatteredRoomTypeList[3].name;
              break;
            case 5:
              gradeType = data.scatteredRoomTypeList[4].name;
              break;
            case 6:
              gradeType = data.scatteredRoomTypeList[5].name;
              break;
            case 7:
              gradeType = data.scatteredRoomTypeList[6].name;
              break;
            case 8:
              gradeType = data.scatteredRoomTypeList[7].name;
              break;
            case 9:
              gradeType = data.scatteredRoomTypeList[8].name;
              break;
          }
          return gradeType;
        },
        //获取房型
        getGradeType(type) {
          let gradeType = "";
          switch (parseInt(type)) {
            case 1:
              gradeType = data.RoomTypeList[0].name;
              break;
            case 2:
              gradeType = data.RoomTypeList[1].name;
              break;
            case 3:
              gradeType = data.RoomTypeList[2].name;
              break;
            case 4:
              gradeType = data.RoomTypeList[3].name;
              break;
            case 5:
              gradeType = data.RoomTypeList[4].name;
              break;
            case 6:
              gradeType = data.RoomTypeList[5].name;
              break;
          }
          return gradeType;
        },
        initHotel() {
          data.loading = true
          let param = Object.assign(data.params,data.urlParamsMsg)
          HotelService.GetHotelRoomsList(param)
            .then(r => {
              if (r.data.resultCode == ApiResult.SUCCESS) {
                data.dataList = r.data.data;
                data.roomRateDetails = r.data.data.roomRateDetails
                console.log(data.roomRateDetails,'---1111')
                if(Object.prototype.toString.call(data.dataList.roomGroup) == '[object Object]'){
                    let arr = [];
                    arr.push(data.dataList.roomGroup);
                    data.dataList.roomGroup=arr;
                }
                data.sureMsg.totalChargeableRateInfo=0;
                data.sureMsg.totalPriceJapanese=0;
                data.TotalChildCount = 0;
                let rateGrouoLen = 0;
                data.dataList.roomGroup.forEach(x=>{
                    if(Object.prototype.toString.call(x.rateGroup) == '[object Object]'){
                        let arr = [];
                        arr.push(x.rateGroup);
                        x.rateGroup= arr;
                    }
                    let tt = 0;
                    let tt2 = 0;
                    let AdultTotalPrice = 0;
                    let childToTalPrice = 0;
                    let AdultCount = 0;
                    let childCount = 0;

                    let AdultJapanPrice = 0;
                    let ChildJapanPrice = 0;
                    let AdultJapanCount = 0;
                    let childJapanCount = 0;
                    
                    //原始成人
                    let oldAount=0;
                    let childAount=0;
                    let oldAuditPrice=0;
                    let oldChildPrice=0;
                    data.TotalChildCount+=x.roomChildCount*x.rateGroup.length;

                    rateGrouoLen+= x.rateGroup.length;
                    data.chekedChildCount = data.childNum*rateGrouoLen;
                    if(data.TotalChildCount<data.chekedChildCount){
                        data.isBaoChild=true;
                    }
                    //无价格 只有房间价格
                    let onlyRoomPrice=0;
                    let onlyJanpnase=0;
                    x.rateGroup.forEach(z=>{
                        if(z.perAdultRateBySetCurrency){
                            z.oldAuditPrice = z.perAdultRateBySetCurrency;
                            z.oldchildPrice = z.perChildRateBySetCurrency;

                            z.perAdultRateBySetCurrency = Math.ceil(z.perAdultRateBySetCurrency/data.dataList.JapanIncrease);
                            z.perChildRateBySetCurrency = Math.ceil(z.perChildRateBySetCurrency/data.dataList.JapanIncrease);
                            if(x.roomAdultCount>0){
                                AdultTotalPrice+=parseFloat(z.perAdultRateBySetCurrency);
                                oldAuditPrice+=parseFloat(z.oldAuditPrice);

                                AdultJapanPrice+=parseFloat(z.perAdultRate);

                            }
                            if(x.roomChildCount>0){
                                childToTalPrice+=parseFloat(z.perChildRateBySetCurrency);
                                oldChildPrice+=parseFloat(z.oldchildPrice);

                                ChildJapanPrice+=parseFloat(z.perChildRate);
                            }
                        }
                        if(z.totalPerRoomRateBySetCurrency){
                            z.totalPerRoomRateBySetCurrency = Math.ceil(z.totalPerRoomRateBySetCurrency/data.dataList.JapanIncrease);

                            onlyRoomPrice+=parseFloat(z.totalPerRoomRateBySetCurrency);
                            onlyJanpnase+=parseFloat(z.totalPerRoomRate);
                        }
                    })
                    AdultCount+=AdultTotalPrice*x.roomAdultCount;
                    childCount+=childToTalPrice*x.roomChildCount;
                    
                    oldAount+=oldAuditPrice;
                    childAount+=childAount;
                    data.sureMsg.totalChargeableRateInfo += parseFloat(AdultCount+childCount+onlyRoomPrice);
                    data.sureMsg.OldTotalPrice+=parseFloat(oldAount+childAount+onlyRoomPrice);
                    AdultJapanCount+=AdultJapanPrice*x.roomAdultCount;
                    childJapanCount+=ChildJapanPrice*x.roomChildCount;
                    data.SettlementPrice=data.sureMsg.totalChargeableRateInfo;
                    data.SettlementPrice=data.sureMsg.totalChargeableRateInfo;

                    data.price=data.sureMsg.totalChargeableRateInfo;
                    

                    data.sureMsg.totalPriceJapanese += parseFloat(AdultJapanCount+childJapanCount+onlyJanpnase);
                })
              }
              data.loading = false
            }).catch(e => {
              data.loading = false
              message.errorMsg(e.message)
            })
          },
        // 获取优惠券
        getUserCanUseCouponList(){
          let msg={
              lineId:0,
              lineteamId:0,
              CouponsUseScope:10,
          };
          let param = Object.assign(msg)
          // HotelService.GetHotelDetailScat(param)
          // .then(r => {
          //   if (r.data.resultCode == ApiResult.SUCCESS) {
              
          //   }
          // }).catch(e => {
          //   data.loading = false
          //   message.errorMsg(e.message)
          // })
        },
      }
      
      onMounted(()=>{
        methods.initHotel()
      })
  
      return { ...toRefs(data), ...methods,qDateProxy }
    }
  })
  </script>
  
  <style>
    .HotelSure-text{
      width: 120px;
    }
  </style>
  