<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}"  v-if="roomRateDetails.RatePlanList&&roomRateDetails.RatePlanList.length>0" >
        <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">{{roomRateDetails.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 v-if="roomRateDetails.RatePlanList&&roomRateDetails.RatePlanList.length>0" v-for="(item,index) in roomRateDetails.RatePlanList" :key="index" v-loading="loading">
          <div class="q-pt-xs">
            <span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.chuangxing')}}</span>
            <span class="text-grey-9 q-pr-lg">
             {{getRoomType(item.BedType)}}
            </span>
          </div>
          <div class="q-pt-xs">
            <span class="text-grey-6 q-pr-lg">{{$t('v103.scheduledTripDetails.itineraryDetails.canshi')}}</span>
            <span class="text-grey-9">
            {{item.BreakfastType==1?"不含早":"含早"}}
            </span>
          </div>
          <div class="q-pt-xs">
            <span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.jiagejihua')}}</span>
            <span class="text-grey-9">
             {{item.RatePlanName}}
            </span>
          </div>
          <div class="q-pt-xs">
            <span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.baojiaqueren')}}</span>
            <span class="text-grey-9">
              <template v-if="item.IsOnRequest==true">{{$t('v101.scatteredOrder.shi')}}</template>
              <template v-if="item.IsOnRequest==false">{{$t('v101.scatteredOrder.fou')}}</template>
            </span>
          </div>
          </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="q-pt-xs row no-wrap items-center" v-if="roomRateDetails.TotalSupplement
>0">
                  <span class="text-grey-10">{{$t('v101.scatteredOrder.youhui')}}</span>
                  <span class="text-red fz18 q-pl-xs">{{roomRateDetails.TotalSupplement}}</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')}}({{DanWei}})</span>
                  <span class="text-h5 text-red text-weight-bold q-pl-xs">{{roomRateDetails.TotalPrice}}</span>
                </div>
                <div class="q-pt-xs row items-center" v-if="sureMsg.DiscountMoney==0">
                  <span>  </span>
                </div>
              </div>
              </div>
            </div>
        </div>
      </div>
      <div v-else class="col q-pa-lg text-center">
        {{$t('noneData')}}
      </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.chuangxing')}}</span>
            <div  v-if="roomRateDetails.RatePlanList&&roomRateDetails.RatePlanList.length>0" v-for="(item,index) in roomRateDetails.RatePlanList" :key="index" v-loading="loading" :class="{'q-pl-lg':$q.platform.is.desktop}">
              <span class="q-pr-lg">
                  {{getRoomType(item.BedType)}}
              </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.CheckInDate}}
                  </div>
                  <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
                    <q-date v-model="params.CheckInDate" 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.CheckOutDate}}
                  </div>
                  <q-popup-proxy :offset="[0, 10]" ref="qDateProxy2">
                    <q-date v-model="params.CheckOutDate" 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 v-if="roomRateDetails.RatePlanList&&roomRateDetails.RatePlanList.length>0" v-for="(item,index) in roomRateDetails.RatePlanList" :key="index" v-loading="loading">
          <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>{{item.RoomOccupancy.RoomNum}}</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">{{item.InventoryCount}}</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-if="item.PriceList&&item.PriceList.length>0">
                <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.PriceList">
                  <div class="text-grey-9">{{getformatDateStr(subItem.StayDate)}}</div>
                  <div class="q-ml-lg row items-end">
                    <span>{{item.Currency}}</span>
                    <span class="text-red text-weight-bold fz18 q-px-xs">
                      <span class="relative-position" style="top:3px">{{subItem.Price}}</span>
                    </span>
                    <span class="text-grey-6">/{{$t('v101.scatteredOrder.wan')}}</span>
                  </div>
                </q-card>
              </template>
            </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 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.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.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 v-if="sureMsg.GuestList&&sureMsg.GuestList.length>0" v-for="(item,subIndex) in sureMsg.GuestList" :key="subIndex">
              <div class="row col-12" v-if="item.GuestInfo&&item.GuestInfo.length>0"  v-for="(itemguest,numberOfAdultsIndex) in item.GuestInfo" :key="numberOfAdultsIndex"  >
                <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" v-if="numberOfAdultsIndex==0">*</span> 
                  {{numberOfAdultsIndex==0?$t('v101.scatteredOrder.fangjian'):""}}
                  {{numberOfAdultsIndex==0?subIndex+1:""}}
                </span>
               <div   class="col row " >
                    <div class="col-4">
                  <q-input
                    dense
                    size="xs"
                    filled
                    v-model="itemguest.LastName"
                    :label="$t('v101.scatteredOrder.xin')+'('+$t('v101.scatteredOrder.yingwen')+')'"
                    hint=""
                    lazy-rules
                    :rules="[ val => val && val.length > 0 || ' ']"
                    ref="LastName"
                  />
                </div>
                <div class="col-4">
                  <q-input
                  class="q-pl-lg"
                  dense
                  size="xs"
                  filled
                  v-model="itemguest.FirstName"
                  :label="$t('v101.scatteredOrder.ming')+'('+$t('v101.scatteredOrder.yingwen')+')'"
                  hint=""
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || ' ']"
                  ref="FirstName"
                />
                </div>
                <div class="col-4">
                  <q-input
                  class="q-pl-lg"
                  dense
                    size="xs"
                    filled
                    type="Number"
                    v-model="itemguest.Age"
                    :label="$t('v101.scattered.age')"
                    hint=""
                    lazy-rules
                    :rules="[ val => val && val.length > 0 || ' ']"
                    ref="Age"
                  />
                </div>
                  </div>
            </div>

            </div>
            <div class=" row col-12 text-red" :class="{'q-pl-lg':$q.platform.is.desktop}">
              <div v-if="roomRateDetails.CancellationPolicyList&&roomRateDetails.CancellationPolicyList.length>0" v-for="(item,index) in roomRateDetails.CancellationPolicyList" :key="index" >
                <span>  {{getformatDateStr(item.FromDate)}} {{$t('v101.scatteredOrder.quxiaoshijian')}}</span>
                <span >({{DanWei}})-{{item.Amount}}</span>
              </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 DidaService from "../../api/didahotel"
  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:{
          sort:1,
          displayFrom:1,
          CheckInDate:'',
          CheckOutDate:'',
          searchroomGroup:[],
          ratePlanID: '',
          imgUrl: '',
          RoomCount:1,
          ChildCount:0,
          AdultCount:1,
          OccupancyDetails:[]
        },
        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,
        DanWei:'',
         HotelRoomTypes: [] as Array<HotelArea>,//散客房间类型
        dataList: {} as any,
          //确认MSG参数
        sureMsg:{
          EmployeeIdStr:'',
          CustomerId:0,
          CheckInDate:'',
          RatePlanID:"",
          CheckOutDate:'',
          RoomCount:'',
          guestLastName:'',
          guestFirstName:'',
          guestAddress:'',
          guestPhoneNumber:'',
          guestEmail:'',
            BookingID:"",
            HotelName:'',
            HotelPic:'',
            GuestList:[] as Array<any>,
              TotalPrice:0,
            CustomerPayMoney:0,
            DiscountMoney:0,
            OrderSource:2,  
            OrderForm:1,
            //备注
            guestRequest:'',
          },
        auditNum:0,
        childNum: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_DiDaHOTEL_DATE))
     
      data.params.CheckInDate = data.getParamsMsg.CheckInDate
      data.params.CheckOutDate = data.getParamsMsg.CheckOutDate
      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()
   
        if(data.params.searchroomGroup&&data.params.searchroomGroup!=null){
          data.params.searchroomGroup.forEach(function (item,index) {
            var guestInfoList=[] as Array<any>;
            let allprople= item.numberOfAdults+item.numberOfChildren;
             for (let i = 1; i <= allprople; i++) {
                let obj = {
                  LastName: "",
                  FirstName: "",
                  Age: ""
                }
                guestInfoList.push(obj);
              }
             console.log("guestInfoList",guestInfoList);
            var obj = {
            RoomNum:index+1,
            numberOfAdults:item.numberOfAdults,
            numberOfChildren:item.numberOfChildren,
            GuestInfo:guestInfoList
          }
          data.sureMsg.GuestList.push(obj);
          });
      }
     
      const methods = {
       
        
        // 提交下单
        submitForm () {
          if(data.submLoading) return
          let flag = false

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

          flag = !guestLastName.value.hasError && !guestFirstName.value.hasError &&  !guestEmail.value.hasError && !guestPhoneNumber.value.hasError
          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.RatePlanID = data.urlParamsMsg.ratePlanID;
          data.sureMsg.CheckInDate = data.params.CheckInDate;
          data.sureMsg.totalRoomCount = data.params.searchroomGroup.length;
          data.sureMsg.CheckOutDate = data.params.CheckOutDate;
          //判断选择的人数与入住人数
          let Count1=0
          data.sureMsg.GuestList.forEach(item=>{
             if(item.numberOfChildren>0){
              let ageNum=0;
              item.GuestInfo.forEach(guestItem => {
                if(guestItem.Age<=12){ageNum=ageNum+1;}
              });
              if(item.numberOfChildren!=ageNum){
                message.errorMsg(t('v101.scatteredOrder.ertongshucuowu'));
              }
             }
          })
         
          let CustomerId
          if (Store.state && Store.state.user?.userDetail) {
            CustomerId = Store.state.user?.userDetail?.customerId
            data.sureMsg.CustomerId=CustomerId
          }
          data.submLoading = true
          let param = Object.assign(data.sureMsg)
          DidaService.GetDiDaBookingConfirm(param)
          .then(r => {
            data.submLoading = false
            if (r.data.resultCode == ApiResult.SUCCESS) {
              localStorage.removeItem(DirtionmaryHelper.SCATTERED_DIDAHOTEL_ORDER_MSG)
              message.successMsg(`${t('v101.scatteredOrder.xiadanSuccess')}`)
              let num =0;
              data.sureMsg.GuestList.forEach(x=>{
                  num+=parseInt(x.numberOfAdults)+parseInt(x.numberOfChildren)
              })
              console.log("r.data.data.parmResult",r.data.data);
              
              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.ResultData.BookingDetails.BookingID,
                  bookMoney:data.SettlementPrice,
                  CancelTime:r.data.data.CancelTime,
                  hotelName:data.sureMsg.hotelName,
                  totalPnumber:num
              }
              localStorage.setItem(DirtionmaryHelper.SCATTERED_DIDAHOTEL_ORDER_MSG,JSON.stringify(msg))
            } else {
              message.errorMsg(r.data.message)
            }
          })
          .catch(e => {
            message.errorMsg(e.message)
            data.submLoading = false
          })
        },
       
        //通过日期得到周几
        getWeek(){
          let CheckInDate = new Date(data.params.CheckInDate).getDay();
          let CheckOutDate = new Date(data.params.CheckOutDate).getDay();
          switch(CheckInDate){
              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(CheckOutDate){
              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;
          }
        },
         //日期格式化
      getformatDateStr(value){
        var  dt = new Date(value);
        let year = dt.getFullYear();
        let  month = (dt.getMonth()+1).toString().padStart(2,'0');
        let  date = (dt.getDate()+1).toString().padStart(2,'0');
        return year+"-"+month+"-"+date;
      },
        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()
        },
       
        initHotel() {
          methods.getWeek()
          data.loading = true
          let param = Object.assign(data.params,data.urlParamsMsg)
          DidaService.GetDiDaPriceConfirm(param)
            .then(r => {
              if (r.data.resultCode == ApiResult.SUCCESS) {
                data.dataList = r.data.data.PriceDetails;
               console.log("道旅酒店确认",r.data.data);
                data.roomRateDetails = r.data.data.PriceDetails.HotelList[0]
               data.sureMsg.BookingID=r.data.data.PriceDetails.ReferenceNo
                  console.log("道旅酒店",r.data.data.PriceDetails.HotelList[0]);
                data.sureMsg.checkInTime = r.data.data.PriceDetails.CheckInDate
                data.sureMsg.HotelName= data.roomRateDetails.HotelName
                data.sureMsg.TotalPrice= data.roomRateDetails.TotalPrice
                data.sureMsg.RoomCount= data.roomRateDetails.RatePlanList[0].RoomOccupancy.RoomNum
                data.DanWei=r.data.data.PriceDetails.HotelList[0].RatePlanList[0].Currency
                if(Object.prototype.toString.call(data.dataList.HotelList) == '[object Object]'){
                    let arr = [];
                    arr.push(data.dataList.HotelList);
                    data.dataList.HotelList=arr;
                }
                data.TotalChildCount = 0;
                let rateGrouoLen = 0;
              }
              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()
        },

 //获取道旅床类型列表
      getdidaBedType() {
        DidaService.GetDidaBedType({}).then((res) => {
          if (res.data.resultCode == 1) {
            data.HotelRoomTypes = res.data.data;
          }
        });
      },

        // 兑换优惠券
        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)
          })
        },

         //获取房型
        getRoomType(roomtypeId) {
          let roomtypeName = "";
          if (roomtypeId>0) {
              data.HotelRoomTypes.forEach((item) => {
                if (item.ID == roomtypeId) {
                  roomtypeName=item.Name_CN;
                  
                }
              });
          }
           return roomtypeName;
        },
          // 获取优惠券
        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.getdidaBedType()
        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>
  