<template>
  <div class="commonSure">
    <div :class="{'q-pa-lg':$q.platform.is.desktop,'q-pa-md':$q.platform.is.mobile}" style="shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);margin: auto;" :style="{'width':$q.platform.is.desktop?'70vw':'100vw','min-width':$q.platform.is.desktop?'866px':'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 no-wrap 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 bg-white rounded-border q-mb-md q-pa-lg" :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
        <q-img v-if="params.imgUrl" :class="{'col-1 q-mr-lg':$q.platform.is.desktop,'col-12 q-mb-sm':$q.platform.is.mobile}" :src="params.imgUrl" style="height: auto;display: inline-block;" :style="{'height':$q.platform.is.mobile?'150px':'auto'}" spinner-color="drk" spinner-size="20px" heigth="100%" mode="cover" :ratio="1"/>
        <div class="col column q-pl-xs">
          <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 class="col row items-end q-pl-lg" :class="{'justify-end':$q.platform.is.mobile}">
            <div class="column">
              <div class="text-green-6 fz20 text-weight-bold q-pb-sm" :class="{'row justify-end':$q.platform.is.mobile}"><span>{{$t('v101.scatteredOrder.orderamount')}}</span></div>
              <div :class="{'row justify-end':$q.platform.is.mobile}">
              <!-- <div class="row justify-between">
                <div class="row no-wrap items-center">
                  <span class="text-grey-10">円</span>
                  <span class="text-red fz18 q-pl-xs">{{sureMsg.totalPriceJapanese}}</span>
                </div>
                <div class="q-pt-xs q-pl-lg row no-wrap items-center">
                  <span class="text-grey-9">{{$t('v101.scatteredOrder.renmingbi')}}</span>
                  <span class="text-red fz18 q-pl-xs">{{sureMsg.totalChargeableRateInfo}}</span>
                </div>
              </div> -->
              <div class="row justify-between">
                <div class="q-pt-xs row no-wrap items-center" v-if="sureMsg.DiscountMoney>0">
                  <span class="text-grey-10">{{$t('v101.scatteredOrder.youhui')}}</span>
                  <span class="text-red fz18 q-pl-xs">{{sureMsg.DiscountMoney}}</span>
                </div>
                <div class="q-pt-xs row no-wrap items-center" :class="{'q-pl-lg':$q.platform.is.mobile}">
                  <span class="text-grey-10">{{$t('v101.scatteredOrder.shifu')}}</span>
                  <span class="text-h5 text-red text-weight-bold q-pl-xs">{{SettlementPrice}}</span>
                </div>
                <div class="q-pt-xs row items-center" v-if="sureMsg.DiscountMoney==0">
                  <span>  </span>
                </div>
              </div>
              </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" :class="{'HotelSure-textMobile':$q.platform.is.mobile}">{{$t('v101.scatteredOrder.fangxingxinxi')}}</span>
            <div :class="{'q-pl-lg':$q.platform.is.desktop}">
              <span class="q-pr-lg">
                {{roomRateDetails?getGradeType(roomRateDetails.gradeType):''}}{{roomRateDetails?getRoomType(roomRateDetails.roomType):''}}
              </span>
            </div>
          </div>
          <div class="row items-center q-mb-md">
            <span class="text-grey-6" :class="{'HotelSure-textMobile':$q.platform.is.mobile}">{{$t('v101.scatteredOrder.ruzhurenshu')}}</span>
            <div :class="{'q-pl-lg':$q.platform.is.desktop}">
              <span>{{$t('v101.scatteredOrder.chengren')}} {{auditNum}} {{$t('v101.scatteredOrder.ren')}}</span>
              <span class="q-pl-lg" v-if="childNum>0">{{$t('v101.scatteredOrder.ertong')}} {{childNum}} {{$t('v101.scatteredOrder.ren')}}</span>
              <span class="q-pl-lg" v-if="isBaoChild">{{$t('v101.scatteredOrder.noertong')}}</span>
            </div>
          </div>
          <div class="row items-center q-mb-md">
            <span class="text-grey-6" :class="{'HotelSure-textMobile':$q.platform.is.mobile}">{{$t('v101.scatteredOrder.ruzhuriqi')}}</span>
            <div class="col" :class="{'row no-wrap q-pl-lg':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
              <div class="row items-center" :class="{'q-pb-md':$q.platform.is.mobile}">
                <q-field stack-label :label="$t('v101.scatteredOrder.ruzhushijian')" standout class="col-2" style="min-width: 200px" dense>
                  <div class="self-center full-width no-outline" tabindex="0">
                    {{params.arrivalDate}}
                  </div>
                  <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
                    <q-date v-model="params.arrivalDate" mask="YYYY/MM/DD"  :options="optionsFnStar" @update:model-value="dateRangeHandler"></q-date>
                  </q-popup-proxy>
                </q-field>
                <span class="q-ml-md">{{checkInWeek}}</span>
                <div class="q-ml-sm text-grey-6">
                  <span v-if="roomRateDetails.roomOptions&&roomRateDetails.roomOptions.checkIinStartTime">{{roomRateDetails.roomOptions.checkIinStartTime}}</span>
                  <span class="q-ml-sm">{{$t('v101.scatteredOrder.zhihou')}}</span>
                </div>
              </div>
              <div class="row items-center q-px-md desktop-only"><q-separator class="q-px-sm bg-dark"/></div>
              <div class="row items-center">
                <q-field stack-label :label="$t('v101.scatteredOrder.ruzhushijian')" standout class="col-2" style="min-width: 200px" dense>
                  <div class="self-center full-width no-outline" tabindex="0">
                    {{params.departureDate}}
                  </div>
                  <q-popup-proxy :offset="[0, 10]" ref="qDateProxy2">
                    <q-date v-model="params.departureDate" mask="YYYY/MM/DD"  :options="optionsFnEnd" @update:model-value="dateRangeHandler2"></q-date>
                  </q-popup-proxy>
                </q-field>
                <span class="q-ml-md">{{checkOutWeek}}</span>
                <div class="q-ml-sm text-grey-6">
                  <span v-if="roomRateDetails.roomOptions&&roomRateDetails.roomOptions.finalCheckInTime">{{roomRateDetails.roomOptions.finalCheckInTime}}</span>
                  <span class="q-ml-sm">{{$t('v101.scatteredOrder.zhiqian')}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="row items-center q-mb-md">
            <span class="text-grey-6" :class="{'HotelSure-textMobile':$q.platform.is.mobile}">{{$t('v101.scatteredOrder.fangjianshuliang')}}</span>
            <div class="row items-center" :class="{'q-pl-lg':$q.platform.is.desktop}">
              <span v-if="dataList.roomGroup">{{dataList.roomGroup.length}}</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">
                  {{$t('v101.scatteredOrder.jinsheng')}}
                  <span class="text-orange">{{dataList.currentAllotment}}</span>
                  {{$t('v101.scatteredOrder.jian')}}
                </span>
              </div>
            </div>
          </div>
          <div class="row no-wrap">
            <span class="text-grey-6 row" :class="{'HotelSure-textMobile':$q.platform.is.mobile}">{{$t('v101.scatteredOrder.fangfeiqingkuang')}}</span>
            <div class="col row wrap" :class="{'q-pl-lg':$q.platform.is.desktop}">
              <template v-for="(item,index) in dataList.roomGroup">
                <q-card flatv class="row no-wrap items-end q-px-md q-pb-sm q-mr-md q-mb-md"  v-for="subItem in item.rateGroup">
                  <div class="text-grey-9">{{subItem.stayDate}}</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">{{subItem.perAdultRateBySetCurrency?subItem.perAdultRateBySetCurrency:subItem.totalPerRoomRateBySetCurrency}}</span>
                    </span>
                    <span class="text-grey-6">/{{subItem.totalPerRoomRateBySetCurrency?$t('v101.scatteredOrder.wan'):$t('v101.scatteredOrder.ren')}}</span>
                  </div>
                </q-card>
              </template>
            </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">{{$t('v101.scatteredOrder.ruzhuxinxi')}}</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">{{$t('v101.scatteredOrder.ruzhuxinxi1')}}</span>
          </span>
        </div>
        <div class="q-px-lg q-py-lg">
          <q-form
            dense
            class="row wrap"
          >
            <div class="row" :class="{'col-6':$q.platform.is.desktop,'col-12 q-pb q-pb-lg':$q.platform.is.mobile}">
              <span class="" :class="{'HotelSure-text q-px-lg':$q.platform.is.desktop,'HotelSure-textMobile q-pr-sm':$q.platform.is.mobile}"><span class="text-red">*</span> {{$t('v101.scatteredOrder.ruzhushijian1')}}</span>
              <q-field stack-label :label="$t('v101.scatteredOrder.ruzhushijian')" standout class="col" :class="{'ischeckInTimeSure':ischeckInTimeSure}" style="min-width: 200px" dense>
                <div class="self-center full-width no-outline" tabindex="0">
                  {{sureMsg.checkInTime}}
                </div>
                <q-popup-proxy :offset="[0, 10]" ref="qDateProxy3">
                  <q-time v-model="sureMsg.checkInTime" format24h :rules="[ val => val && val.length > 0 || ' ']" @update:model-value="dateRangeHandler3"/>
                </q-popup-proxy>
              </q-field>
            </div>
            <div class="row" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
              <span class="" :class="{'HotelSure-text q-px-lg':$q.platform.is.desktop,'HotelSure-textMobile q-pr-sm':$q.platform.is.mobile}"><span class="text-red">*</span> {{$t('v101.scatteredOrder.yudinren')}}</span>
              <div class="col row justify-between">
                <div class="col-6">
                  <q-input
                    dense
                    size="xs"
                    filled
                    v-model="sureMsg.guestLastName"
                    :label="$t('v101.scatteredOrder.xin')+'('+$t('v101.scatteredOrder.yingwen')+')'"
                    hint=""
                    lazy-rules
                    :rules="[ val => val && val.length > 0 || ' ']"
                    ref="guestLastName"
                  />
                </div>
                <div class="col-6">
                  <q-input
                  class="q-pl-lg"
                  dense
                  size="xs"
                  filled
                  v-model="sureMsg.guestFirstName"
                  :label="$t('v101.scatteredOrder.ming')+'('+$t('v101.scatteredOrder.yingwen')+')'"
                  hint=""
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || ' ']"
                  ref="guestFirstName"
                />
                </div>
                
              </div>
              
            </div>
            <div class="row" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
              <span class="" :class="{'HotelSure-text q-px-lg':$q.platform.is.desktop,'HotelSure-textMobile q-pr-sm':$q.platform.is.mobile}"><span class="text-red">*</span> {{$t('v101.scatteredOrder.dangqiandizhi')}}</span>
              <q-input
              class="col"
              dense
              size="xs"
              filled
              v-model="sureMsg.guestAddress"
              :label="$t('v101.scatteredOrder.dangqiandizhi')"
              hint=""
              lazy-rules
              :rules="[ val => val && val.length > 0 || ' ']"
              ref="guestAddress"
            />
            </div>
            <div class="row" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
              <span class="" :class="{'HotelSure-text q-px-lg':$q.platform.is.desktop,'HotelSure-textMobile q-pr-sm':$q.platform.is.mobile}"><span class="text-red">*</span> {{$t('v101.scatteredOrder.Email')}}</span>
              <q-input
              class="col"
              dense
              size="xs"
              filled
              v-model="sureMsg.guestEmail"
              :label="$t('v101.scatteredOrder.Email')"
              hint=""
              lazy-rules
              :rules="[(val:any, rules:any) => rules.email(val) || ' ']"
              ref="guestEmail"
            />
            </div>
            <div class="row" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
              <span class="" :class="{'HotelSure-text q-px-lg':$q.platform.is.desktop,'HotelSure-textMobile q-pr-sm':$q.platform.is.mobile}"><span class="text-red">*</span> {{$t('v101.scatteredOrder.dianhua')}}</span>
              <q-input
              class="col"
              dense
              size="xs"
              filled
              v-model="sureMsg.guestPhoneNumber"
              :label="$t('v101.scatteredOrder.dianhua')"
              type="Number"
              hint=""
              lazy-rules
              :rules="[ val => val && val.length == 11 || ' ']"
              ref="guestPhoneNumber"
            />
            </div>
            <div class="col-12 row">
              <div class="row" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
                <span class="" :class="{'HotelSure-text q-px-lg':$q.platform.is.desktop,'HotelSure-textMobile q-pr-sm':$q.platform.is.mobile}"><span class="text-red"></span> {{$t('v101.scatteredOrder.kehuxuqiu')}}</span>
                <q-input
                class="col"
                dense
                size="xs"
                filled
                autogrow
                type="textarea"
                v-model="sureMsg.guestRequest"
                :label="$t('v101.scatteredOrder.kehuxuqiu')"
                hint=""
                lazy-rules
              />
              </div>
            </div>
            <div class="col-12 row">
              <div class="row q-mb-md" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" v-for="item in sureMsg.roomGroup">
                  <span class="" :class="{'HotelSure-text q-px-lg':$q.platform.is.desktop,'HotelSure-textMobile q-pr-sm':$q.platform.is.mobile}"><span class="text-red">*</span> 
                  {{$t('v101.scatteredOrder.fangjian')}}
                  {{item.roomCount}}
                </span>
                  <div class="col row">
                    <div class="col-4 row">
                      <q-select class="col" v-model="item.roomMaleCount" dense :options="adultList" emit-value map-options :label="$t('v101.scatteredOrder.chengrennan')" standout @update:model-value="setPeopleNum"/>
                    </div>
                    <div class="col-4 row" :class="{'q-pl-lg':$q.platform.is.desktop,'q-pl-xs':$q.platform.is.mobile}">
                      <q-select class="col" v-model="item.roomFemaleCount" dense :options="adultList" emit-value map-options :label="$t('v101.scatteredOrder.chengrennv')" standout @update:model-value="setPeopleNum"/>
                    </div>
                    <div class="col-4 row" :class="{'q-pl-lg':$q.platform.is.desktop,'q-pl-xs':$q.platform.is.mobile}">
                      <q-select class="col" v-model="item.roomChildCount" dense :options="childrenList" emit-value map-options :label="$t('v101.scatteredOrder.ertongshu')" standout @update:model-value="setPeopleNum"/>
                    </div>
                  </div>
              </div>
            </div>
            <div class="column text-red" :class="{'q-pl-lg':$q.platform.is.desktop}">
              <div v-if="(dataList.cancellationPeriod1==-1||dataList.cancellationPeriod1==0)&&(dataList.cancellationType1==1||dataList.cancellationType1==2)">
                <template v-if="dataList.cancellationPeriod1==-1">{{$t('v101.scatteredOrder.quxiao1')}},</template>
                <template v-if="dataList.cancellationPeriod1==0">{{$t('v101.scatteredOrder.quxiao2')}},</template>
                <template v-if="dataList.cancellationType1==1">{{$t('v101.scatteredOrder.shouxufei')}}: {{dataList.cancellation1}}%</template>
                <template v-if="dataList.cancellationType1==2">{{$t('v101.scatteredOrder.shouxufei')}}: {{dataList.cancellation1}}</template>
              </div>
              <div v-if="(dataList.cancellationPeriod2==-1||dataList.cancellationPeriod2==0)&&(dataList.cancellationType2==1||dataList.cancellationType2==2)">
                <template v-if="dataList.cancellationPeriod2==-1">{{$t('v101.scatteredOrder.quxiao1')}},</template>
                <template v-if="dataList.cancellationPeriod2==0">{{$t('v101.scatteredOrder.quxiao2')}},</template>
                <template v-if="dataList.cancellationType2==1">{{$t('v101.scatteredOrder.shouxufei')}}: {{dataList.cancellation2}}%</template>
                <template v-if="dataList.cancellationType2==2">{{$t('v101.scatteredOrder.shouxufei')}}: {{dataList.cancellation2}}</template>
            </div>
            <div v-if="(dataList.cancellationPeriod3==-1||dataList.cancellationPeriod3==0)&&(dataList.cancellationType3==1||dataList.cancellationType3==2)">
                <template v-if="dataList.cancellationPeriod3==-1">{{$t('v101.scatteredOrder.quxiao1')}},</template>
                <template v-if="dataList.cancellationPeriod3==0">{{$t('v101.scatteredOrder.quxiao2')}},</template>
                <template v-if="dataList.cancellationType3==1">{{$t('v101.scatteredOrder.shouxufei')}}: {{dataList.cancellation3}}%</template>
                <template v-if="dataList.cancellationType3==2">{{$t('v101.scatteredOrder.shouxufei')}}: {{dataList.cancellation3}}</template>
            </div>
            </div>
          </q-form>

        </div>
      </div><template v-if="$q.platform.is.desktop">
      </template>
      <div v-if="isLoginB2B" 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">{{$t('v101.scatteredOrder.youhuixingxi')}} </span>
        </div>
        <div class="q-px-lg q-py-lg">
          <div class="fz16 text-weight-bold q-mb-sm">{{$t('v101.scatteredOrder.youhuiquanduihuan')}}</div>
          <div class="row">
            <div class="col-3 column">
              <q-input
                dense
                size="xs"
                filled
                v-model="ActivateCode"
                label=""
                hint=""
                lazy-rules
              />
            </div>
            <div class="q-ml-lg"><q-btn class="q-px-lg q-py-sm" color="primary" dense unelevated :label="$t('v101.scatteredOrder.duihuan')" :loading="CodeLoading" @click="GetCode"/></div>
          </div>
          <div class="column">
            <span class="fz16 text-weight-bold q-pb-md">{{$t('v101.scatteredOrder.youhuiquanshiyong')}}</span>
            <span>{{$t('v101.scatteredOrder.nokeyongyouhuiquan')}}</span>
          </div>
        </div>
        <!-- 优惠券 -->
        <div class="Yhq column" v-if="!isLoginB2B">
          <p class="pfR text-dark q-pl-lg">{{$t('v101.scatteredOrder.youhuiquanshiyong')}}</p>
          <ul class="yhqUl">
              <p v-if="!Verification.length || Verification[0].ApplyState !== 1" class="_trip_xiangqing_tips">{{$t('v101.scatteredOrder.jinxing1')}} <span @click="goShenqing">{{$t('v101.scatteredOrder.jinxing2')}}</span>{{$t('v101.scatteredOrder.jinxing3')}}</p>

              <li v-for="(item,index) in UserCanUseCouponList" :class="{'blue':item.couponsType===1,'_active':item.active,'disab': !Platfrom(item.fromPlatform)|| !Verification.length || Verification[0].ApplyState !== 1}" @click="!Platfrom(item.fromPlatform) || !Verification.length || Verification[0].ApplyState !== 1 ? '' : clickCoupon(item)" :key="index+5000" class="sawtooth">
                  <div class="yhqImg">
                      <img v-if="item.fromPlatform=='1'" src="../../assets/images/yhq/app.png" alt="">
                      <img v-if="item.fromPlatform=='2'" src="../../assets/images/yhq/xcx.png" alt="">
                      <img v-if="item.fromPlatform=='3'" src="../../assets/images/yhq/pc.png" alt="">
                  </div>
                  <span class="kdj">
                      <span v-if="item.overlapUse==1">{{$t('v101.scatteredOrder.kediejia')}}</span>
                      <span v-else>{{$t('v101.scatteredOrder.nodiejia')}}</span>

                  </span>
                  <p style="margin-top:10px">
                      <span v-if="item.couponsType==1">円<span>{{item.denomination}}</span></span>
                      <span v-else>{{item.denomination}}{{$t('v101.scatteredOrder.zhe')}}</span>
                  </p>
                  <p style="font-size:14px">{{$t('v101.scatteredOrder.man')}}{{item.useCondition}}{{$t('v101.scatteredOrder.shiyong')}}</p>
                  <p  style="font-size:12px;color:#4C58A4;margin-top:6px">
                    {{$t('v101.scatteredOrder.youxiaoqi')}}：{{item.effectDate | YMD}}-{{item.expirationDate | YMD}}
                  </p>
                  <div v-if="Platfrom(item.fromPlatform)" class="_choice_box">
                      <span v-if="!item.active"></span>
                      <span v-else class="iconfont icon-xuanzhong2"></span>
                  </div>
              </li>
              <div v-if="UserCanUseCouponList.length==0" class="_no_coupon">
                  <p>{{$t('v101.scatteredOrder.nokeyongyouhuiquan')}}</p>
              </div>
          </ul>
        </div>
      </div>
      <div class="col row q-mb-md">
        <q-btn class="col-12 bg-blue rounded-border text-white q-py-sm" :label="$t('v101.scatteredOrder.xiadan')" :loading="submLoading" @click="submitForm"/>
      </div>


    </div>
  </div>
  </template>
  
  <script lang="ts">
  import Store from '../../store'
  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 { isPhone, validatAlphabetsName } from '../../utils/validate'
  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 qDateProxy2 = ref(null) as any
      const qDateProxy3 = ref(null) as any
      const guestLastName = ref(null) as any
      const guestFirstName = ref(null) as any
      const guestAddress = ref(null) as any
      const guestEmail = ref(null) as any
      const guestPhoneNumber = ref(null) as any

      
      const data = reactive({
        isShowTime: true,
        isLoginB2B: false,
        Verification:'',
        CouponIds: '',
        CodeLoading: false,
        UserCanUseCouponList: [] as Array<any>,
        CouponList: [] as Array<any>,
        ActivateCode: '',//兑换码
        params:{
          // hotelId:'',
          sort:1,
          displayFrom:1,
          arrivalDate:'',
          departureDate:'',
          searchroomGroup:[],
          roomOptionCd: '',
          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,//当前日期
        dateRange2: '' as any,//当前日期
        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,
          },
        ischeckInTimeSure: false,
        auditNum:0,
        childNum:0,
        TotalChildCount:0,//孩子能否报入
        chekedChildCount:0,//选了的儿童数
        isBaoChild: false,
        SettlementPrice : 0,
        price: 0,
        pickerBeginDateBefore:'',//入住时间前可选范围
        pickerBeginDateAfter:'',//入住时间后可选范围
        RoomTypeList: [] as Array<HotelArea>,//房间等级
        scatteredRoomTypeList: [] as Array<HotelArea>,//散客房间类型
        WeekList: [] as Array<HotelArea>,//周一至周日
        checkInWeek: '',//周一至周日
        checkOutWeek: '',
      })
      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.auditNum = data.getParamsMsg.auditNum
      data.childNum = data.getParamsMsg.childNum
      data.RoomTypeList = useHotel.getHotelRoomType()
      data.scatteredRoomTypeList = useHotel.getHotelScatRoom()
      data.WeekList = useHotel.getHotelWeek()

      let roomGroupLen = data.params.searchroomGroup.length
      for(var i=0;i<roomGroupLen;i++){
          var obj = {
              roomCount:i+1,
              roomMaleCount:0,
              roomFemaleCount:0,
              roomChildCount:0,
              roomInfantCount:0,
              rateGroup:[]
          }
          data.sureMsg.roomGroup.push(obj);
      }
  
      // watch(
      //   () => data.urlParamsMsg.hotelId,
      //   (o, n) => {
      //     
      //   }
      // )
      const methods = {
        // 提交下单
        submitForm () {
          if(data.submLoading) return
          let flag = false

          guestLastName.value.validate()
          guestFirstName.value.validate()
          guestAddress.value.validate()
          guestEmail.value.validate()
          guestPhoneNumber.value.validate()

          flag = !guestLastName.value.hasError && !guestFirstName.value.hasError && !guestAddress.value.hasError && !guestEmail.value.hasError && !guestPhoneNumber.value.hasError
          if(!data.sureMsg.checkInTime) return data.ischeckInTimeSure = true

          if(validatAlphabetsName(data.sureMsg.guestLastName)==false) return message.errorMsg(t('v101.scatteredOrder.xin')+t('v101.scatteredOrder.qingshuru')+t('v101.scatteredOrder.yingwen'))
          if(validatAlphabetsName(data.sureMsg.guestFirstName)==false) return message.errorMsg(t('v101.scatteredOrder.ming'+t('v101.scatteredOrder.qingshuru')+t('v101.scatteredOrder.yingwen')))
          if(isPhone(data.sureMsg.guestPhoneNumber)==false) return message.errorMsg(t('v101.scatteredOrder.qingshuru')+t('v101.scatteredOrder.zhengque')+t('v101.scatteredOrder.dianhua'))

          if(!flag) return

          data.sureMsg.hotelId = data.urlParamsMsg.hotelId;
          data.sureMsg.arrivalDate = data.params.arrivalDate;
          data.sureMsg.totalRoomCount = data.params.searchroomGroup.length;
          data.sureMsg.departureDate = data.params.departureDate;
          data.sureMsg.roomOptionCd = data.params.roomOptionCd;
          data.sureMsg.HotelName = data.dataList.hotelName;
          data.sureMsg.HotelPic = data.params.imgUrl;

          //判断选择的人数与入住人数
          let Count1=0
          data.sureMsg.roomGroup.forEach(x=>{
              Count1+=x.roomMaleCount+x.roomFemaleCount+x.roomChildCount
          })
          let Count2=0;
          Count2=data.auditNum+data.childNum;
          if(Count1!=Count2){
              message.errorMsg(t('v101.scatteredOrder.Errorruzhushu'))
              return;
          }
          data.dataList.roomGroup.forEach(x=>{
            data.sureMsg.roomGroup.forEach(j=>{
                if(Object.prototype.toString.call(x.rateGroup) == '[object Object]'){
                    j.rateGroup.push(x.rateGroup);
                }else{
                    j.rateGroup=x.rateGroup
                }
            })
          })
          let CustomerId
          if (Store.state && Store.state.user?.userDetail) {
            CustomerId = Store.state.user?.userDetail?.customerId
            data.sureMsg.CustomerId=CustomerId
          }
          // if(data.sureMsg.CustomerId==null||data.sureMsg.CustomerId==""){
          //   data.sureMsg.CustomerId=0
          // }
          data.submLoading = true
          let param = Object.assign(data.sureMsg)
          HotelService.GetHotelHotelBooking(param)
          .then(r => {
            data.submLoading = false
            if (r.data.resultCode == ApiResult.SUCCESS) {
              localStorage.removeItem(DirtionmaryHelper.SCATTERED_HOTEL_ORDER_MSG)
              message.successMsg(`${t('v101.scatteredOrder.xiadanSuccess')}`)
              let num =0;
              data.sureMsg.roomGroup.forEach(x=>{
                  num+=parseInt(x.roomFemaleCount)+parseInt(x.roomMaleCount)+parseInt(x.roomChildCount)
              })
              let msg = {
                  RB_Branch_id:r.data.data.RB_Branch_id,
                  costType:r.data.data.costType,
                  orderId:r.data.data.orderId,
                  bookingNumber:r.data.data.parmResult.bookingNumber,
                  bookMoney:data.SettlementPrice,
                  CancelTime:r.data.data.CancelTime,
                  hotelName:r.data.data.parmResult.hotelName,
                  totalPnumber:num
              }
              localStorage.setItem(DirtionmaryHelper.SCATTERED_HOTEL_ORDER_MSG,JSON.stringify(msg))
            } else {
              message.errorMsg(r.data.message)
            }
          })
          .catch(e => {
            message.errorMsg(e.message)
            data.submLoading = false
          })
        },
        //设置房间里面成人数改变总成人数和儿童数
        setPeopleNum() {
            // data.auditNum = 0;
            // data.childNum = 0;
            // search.searchroomGroup.forEach(x => {
            //     data.auditNum += (x.roomMaleCount+x.roomFemaleCount);
            //     data.childNum += x.roomChildCount;
            // })
            // if (data.auditNum == null || data.auditNum == undefined) {
            //     data.auditNum = 1
            // }
            // if (data.childNum == null || data.childNum == undefined) {
            //     data.childNum = 1
            // }
        },
        //通过日期得到周几
        getWeek(){
          let arrivalDate = new Date(data.params.arrivalDate).getDay();
          let departureDate = new Date(data.params.departureDate).getDay();
          switch(arrivalDate){
              case 0:
              data.checkInWeek=data.WeekList[6].name
              break;
              case 1:
              data.checkInWeek=data.WeekList[0].name
              break;
              case 2:
              data.checkInWeek=data.WeekList[1].name
              break;
              case 3:
              data.checkInWeek=data.WeekList[2].name
              break;
              case 4:
              data.checkInWeek=data.WeekList[3].name
              break;
              case 5:
              data.checkInWeek=data.WeekList[4].name
              break;
              case 6:
              data.checkInWeek=data.WeekList[5].name
              break;
          }
          switch(departureDate){
              case 0:
              data.checkOutWeek=data.WeekList[6].name
              break;
              case 1:
              data.checkOutWeek=data.WeekList[0].name
              break;
              case 2:
              data.checkOutWeek=data.WeekList[1].name
              break;
              case 3:
              data.checkOutWeek=data.WeekList[2].name
              break;
              case 4:
              data.checkOutWeek=data.WeekList[3].name
              break;
              case 5:
              data.checkOutWeek=data.WeekList[4].name
              break;
              case 6:
              data.checkOutWeek=data.WeekList[5].name
              break;
          }
        },
        optionsFnStar(cd: any) {
          return cd <= date.formatDate(date.addToDate(new Date(), { days: 9 }), 'YYYY/MM/DD')
        },
        optionsFnEnd(cd: any) {
          return cd >= date.formatDate(date.addToDate(new Date(), { days: 9 }), 'YYYY/MM/DD')
        },
        dateRangeHandler(e: any) {
          if (qDateProxy.value) qDateProxy.value.hide()
          methods.initHotel()
        },
        dateRangeHandler2(e: any) {
          if (qDateProxy2.value) qDateProxy2.value.hide()
          methods.initHotel()
        },
        dateRangeHandler3(e: any) {
          if (qDateProxy3.value) qDateProxy3.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() {
          methods.getWeek()
          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
                data.roomRateDetails.roomOptions.checkIinStartTime = data.roomRateDetails.roomOptions['check-inStartTime']
                data.sureMsg.checkInTime = data.roomRateDetails.roomOptions.checkIinStartTime

                data.roomRateDetails.roomOptions.finalCheckInTime = data.roomRateDetails.roomOptions['finalCheck-inTime']
                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);
                    // methods.getUserCanUseCouponList()
                })
              }
              data.loading = false
            }).catch(e => {
              data.loading = false
              message.errorMsg(e.message)
            })
        },
        clickCoupon(item){
          let list = [];
            if (!item.active) { // 是否选中
            if(item.denomination>data.SettlementPrice){
                  message.errorMsg(t('v101.scatteredOrder.notiaojian'))
                  return;
                }
            if (item.overlapUse === 1) {  // 1允许叠加使用
                data.CouponList.forEach(x=>{
                if (x.overlapUse === 1 && x.couponsType === item.couponsType) { // 优惠券列表筛选出允许叠加并且type相同的
                    list.push(x)
                }
                })
                item.active = !item.active
                data.UserCanUseCouponList = list
            } else {  // 不允许叠加使用
              data.CouponList.forEach(x=>{  // 筛选掉其他
                if (x.id === item.id) {
                    list.push(x)
                }
                })
                item.active = !item.active
                data.UserCanUseCouponList = list
            }
            } else {
            item.active = !item.active
            if (data.UserCanUseCouponList.length===1) {  // 取消优惠券选中状态 之前直选择了一个优惠券
              data.UserCanUseCouponList = data.CouponList
            } else {  //... 之前选择了多个优惠券 循环判断是否已全部取消
                let num = 0
                data.UserCanUseCouponList.forEach(x=>{
                if (x.active)
                    num +=1
                })
                if (num===0) {
                  data.CouponList.forEach(x=>{
                    x.active = false 
                })
                data.UserCanUseCouponList = this.CouponList
                }
            }
            }
            if (data.UserCanUseCouponList.length>0) {
            let CouponIds = ''
            let CouponMoney = 0
            let CouponSale = 1
            let type = 0
            data.UserCanUseCouponList.forEach(x=>{
                if (x.active) {
                type = x.couponsType
                CouponIds = CouponIds + x.id + ','
                if (x.couponsType === 1) {
                    CouponMoney =  CouponMoney + x.denomination 
                } else {
                    CouponSale = CouponSale * (x.denomination/10)
                }
                }
            })
            data.CouponIds = CouponIds
            if (type === 1) {
              data.SettlementPrice = data.price - CouponMoney
            } else if (type === 2) {
              data.SettlementPrice = data.price * CouponSale
            } else if (type === 0) {
              data.SettlementPrice = data.price
            }
            } else {
              data.SettlementPrice = data.price
            }
            // this.SettlementPrice=parseInt(this.SettlementPrice).toFixed(2);
            let allmonney=data.price - data.SettlementPrice;
            data.sureMsg.DiscountMoney = (data.price - data.SettlementPrice).toFixed(2);
            data.CouponIds=data.CouponIds.substring(0,data.CouponIds.length-1)
            data.sureMsg.CouponAllotIds=data.CouponIds;
        },
        goShenqing () {
            let dom = document.querySelector("#blankLink")
            dom.href=`http://${window.location.host}/#/PsSystem/${1}`
            dom.click()
        },
        // 兑换优惠券
        GetCode(){
          if(data.CodeLoading) return
          if(!data.ActivateCode) return
          let msg={
            ActivateCode:data.ActivateCode
          };
          data.CodeLoading = true
          let param = Object.assign(msg)
          HotelService.updateUseCouponBycod(param)
          .then(r => {
            data.CodeLoading = false
            if (r.data.resultCode == ApiResult.SUCCESS) {
              message.successMsg(`${t('v101.scatteredOrder.duihuanSuccess')}`)
              methods.getUserCanUseCouponList();
            }else{
              message.errorMsg(r.message)
            }
          }).catch(e => {
            data.CodeLoading = false
            message.errorMsg(e.message)
          })
        },
          // 获取优惠券
        getUserCanUseCouponList(){
          let msg={
              lineId:0,
              lineteamId:0,
              CouponsUseScope:10,
          };
          let param = Object.assign(msg)
          HotelService.getUserCanUseCouponList(param)
          .then(r => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              data.CouponList=res.data.data;
              data.CouponList.forEach(item=>{
                  item.active=false;
              })
              methods.filterCoupon();
            }
          }).catch(e => {
            data.loading = false
            message.errorMsg(e.message)
          })
        },
        filterCoupon() {
          let list = []
          data.CouponList.forEach(x=>{
            if (data.price>x.useCondition) {
                x.active = false
                list.push(x);
            }
          })
          data.UserCanUseCouponList = list;
        },
      }
      
      onMounted(()=>{
        methods.initHotel()
      })
  
      return { ...toRefs(data), ...methods,qDateProxy,qDateProxy2,qDateProxy3,guestLastName,guestFirstName,guestAddress,guestEmail,guestPhoneNumber }
    }
  })
  </script>
  
  <style>
    .HotelSure-text{
      width: 145px;
    }
    .HotelSure-textMobile{
      width: 80px;
    }
    .ischeckInTimeSure .q-field__control{
      border: 1px solid red;
    }
    .commonSure .yhqUl{
      padding:0 20px;
      margin:20px 0;
    }
    .commonSure .icon-xuanzhong2{
      color: #31AA21;
    }
    .commonSure .sawtooth:hover {
        cursor: pointer;
    }
    .commonSure .yhqUl .blue{
      background-color: #8794E2;
    }
    .commonSure .yhqUl .blue:hover{
      background-color: #6776D2;
    }
    .commonSure .yhqUl .blue ._time{
      color: #4C58A4 !important;
    }
    .commonSure .yhqUl ._active{
      background-color: #D9A24D;
    }
    .commonSure .yhqUl .blue._active{
      background-color: #6776D2;
    }

    .commonSure ._trip_xiangqing_tips{
      color: red !important;
      font-size: 14px !important;
    }
    .commonSure ._trip_xiangqing_tips span{
      color: #3965B0;
      cursor: pointer;
    }
    .commonSure .yhqImg{
        position: absolute;
        right: 80px;
        top: 10px;
        width: 50px;
        height: 50px;
    }
    .commonSure .yhqImg img{
        width: 100%;
        height: 100%;
        display: block;
    }
    .commonSure .yhqUl .disab{
      background-color: #7d7d7d !important;
    }
  </style>
  