<template>
  <div class="content-page order-preview">
    <q-stepper
      v-model="step"
      ref="stepper"
      color="primary"
      inactive-color="grey-5 "
      class="bg-transparent"
      flat
      animated
    >
      <q-step
        :name="1"
        title="確認訂單"
        icon="settings"
        :done="step > 1"
      ></q-step>

      <q-step
        :name="2"
        title="付款"
        icon="iconfont iconPayment-1"
        :done="step > 2"
      ></q-step>

      <q-step
        :name="3"
        title="訂購完成"
        icon="iconfont iconicon_finish_R"
        :done="step == 3"
      ></q-step>
    </q-stepper>
    <div
      class="row q-pa-md"
      style="min-width: 375px; margin: 0 auto"
      :class="{
        row: $q.screen.width >= 1200 && $q.platform.is.desktop,
        column: $q.screen.width < 1200 || $q.platform.is.mobile,
      }"
    > 
      <div class="col">
        <q-form ref="baseUserInfo">
        <q-card flat class="q-pa-md">
          <div class="text-subtitle1 text-weight-bolder">訂購人資訊</div>
          <q-separator color="grey-2" class="q-my-md" />
          <div class="row q-col-gutter-md">
            <div :class="filedWidth">
              <q-select
                v-model="userInfo.Country"
                @input="changeCountry"
                :options="countrys"
                emit-value
                option-label="Name"
                option-value="ID"
                map-options
                label="國家/地區"
                standout
              />
            </div>
            <div :class="filedWidth">
              <q-input
                standout
                v-model="userInfo.Mailbox"
                label="郵箱地址"
                :rules="[(val) => /^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/.test(val) || '請輸入正確的郵箱地址']"
                ref="mail"
              />
            </div>
          </div>
        </q-card>

        <q-card flat class="q-pa-md q-mt-lg" v-if="details">
          <div class="text-subtitle1 text-weight-bolder q-mb-md">旅客資料</div>
          <div class="row">
            <q-img
              :src="details.roomRateDetails?details.roomRateDetails.roomImageURL:'https://image.kkday.com/v2/image/get/s1.kkday.com/product_138437/20230217083232_t5rcO/jpg'"
              class="rounded-borders"
              spinner-color="grey-3"
              style="width: 80px"
            />
            <div class="q-ml-md col">
              <div class="text-subtitle1 ellipsis">
                {{details.hotelName}}
              </div>
              <div class="text-caption text-grey-6 ellipsis q-mt-sm">
                {{details.access}}
              </div>
            </div>
          </div>
          <div class="q-mt-md row">
            <div class="text-grey-9">
              <q-icon name="iconfont iconrili" size="20px" class="q-mr-sm" />
              <span>{{msg.arrivalDate}}至{{msg.departureDate}}</span>
            </div>
            
          <div class="text-grey-9 q-ml-sm">
            <q-icon name="iconfont icontime" size="20px" class="q-mr-xs q-ml-sm" />
            <span class="q-mr-sm">
              住宿時間 {{OrderDate.liveNvm}}  晚
            </span>
            <span v-if="details.roomRateDetails">(
              <span class="fz15 text-weight-bold">
                <span v-if="details.roomRateDetails.roomType==1">{{getGradeType(details.roomRateDetails.gradeType)}}單人間</span>
                <span v-if="details.roomRateDetails.roomType==2">{{getGradeType(details.roomRateDetails.gradeType)}}雙人間</span>
                <span v-if="details.roomRateDetails.roomType==3">{{getGradeType(details.roomRateDetails.gradeType)}}大床房</span>
                <span v-if="details.roomRateDetails.roomType==4">{{getGradeType(details.roomRateDetails.gradeType)}}三人間</span>
                <span v-if="details.roomRateDetails.roomType==5">{{getGradeType(details.roomRateDetails.gradeType)}}四人間</span>
                <span v-if="details.roomRateDetails.roomType==6">{{getGradeType(details.roomRateDetails.gradeType)}}日式房</span>
                <span v-if="details.roomRateDetails.roomType==7">{{getGradeType(details.roomRateDetails.gradeType)}}日式+西式混合房</span>
                <span v-if="details.roomRateDetails.roomType==8">{{getGradeType(details.roomRateDetails.gradeType)}}大床房（小型）</span>
                <span v-if="(details.roomRateDetails.roomType==9||details.roomRateDetails.roomType=='')&&details.roomRateDetails.gradeType==''">未知房型</span>
              </span>

              <span class="fz13 text-grey-6 q-ml-sm">
                <span v-if="details.roomRateDetails.smoking==0">禁煙, </span>
                <span v-if="details.roomRateDetails.smoking==1">可吸煙, </span>
                <span v-if="details.roomRateDetails.withBath==0">無浴室</span>
                <span v-if="details.roomRateDetails.withBath==1">有浴室</span>
              </span>
              )
            </span>
            <q-icon name="iconfont jinggao1" size="20px"/><span>僅剩{{details.currentAllotment}}間</span>
            <span class="q-mr-sm"></span>
            <q-icon name="iconfont iconpeople" size="20px" class="q-mr-xs q-ml-sm" />
            <span class="q-mr-sm">
              成人 {{numberOfAdults}}<span class="q-pl-sm">兒童 {{numberOfChildren}}</span>
            </span>
            
          </div>
          </div>
          <div class="rounded-borders bg-blue-1 q-px-md q-py-sm q-mt-sm column">
            <!-- <span class="text-orange-6 q-pb-xs">超过13岁视为成人处理</span> -->
            <!-- <span class="text-green-6">预定成功后房间将为您整晚保留</span> -->
            <span class="text-red-6 q-pb-xs">所填姓名需和入住時所持證件一致</span>
              <span class="text-orange-6 q-pb-xs" v-if="(details.cancellationPeriod1==-1||details.cancellationPeriod1==0)&&(details.cancellationType1==1||details.cancellationType1==2)">
                  <template v-if="details.cancellationPeriod1==-1">沒有通知取消，</template>
                  <template v-if="details.cancellationPeriod1==0">入住當日取消，</template>
                  <template v-if="details.cancellationType1==1">手續費：{{details.cancellation1}}%</template>
                  <template v-if="details.cancellationType1==2">手續費：{{details.cancellation1}}</template>
              </span>
              <span class="text-green-6 q-pb-xs" v-if="(details.cancellationPeriod2==-1||details.cancellationPeriod2==0)&&(details.cancellationType2==1||details.cancellationType2==2)">
                  <template v-if="details.cancellationPeriod2==-1">沒有通知取消，</template>
                  <template v-if="details.cancellationPeriod2==0">入住當日取消，</template>
                  <template v-if="details.cancellationType2==1">手續費：{{details.cancellation2}}%</template>
                  <template v-if="details.cancellationType2==2">手續費：{{details.cancellation2}}</template>
              </span>
              <span class="text-green-6" v-if="(details.cancellationPeriod3==-1||details.cancellationPeriod3==0)&&(details.cancellationType3==1||details.cancellationType3==2)">
                  <template v-if="details.cancellationPeriod3==-1">沒有通知取消，</template>
                  <template v-if="details.cancellationPeriod3==0">入住當日取消，</template>
                  <template v-if="details.cancellationType3==1">手續費：{{details.cancellation3}}%</template>
                  <template v-if="details.cancellationType3==2">手續費：{{details.cancellation3}}</template>
              </span>
              
          </div>
          <q-separator color="grey-2" class="q-mt-md" />
          
          <div
            class="bg-grey-1 rounded-borders q-pa-md q-mt-md guest-item"
          >
            <div class="text-subtitle1 q-pb-md text-weight-bold"></div>
            <div class="row q-col-gutter-md">
              <div :class="filedGuestWidth">
                <q-input
                  standout
                  v-model="parameters.guestLastName"
                  label="本國姓"
                  placeholder="例：張"
                  :rules="[(val) => !!val || '請輸本國姓']"
                  ref="SurName"
                />
              </div>
              <div :class="filedGuestWidth">
                <q-input
                  standout
                  v-model="parameters.guestFirstName"
                  label="本國名"
                  placeholder="例：三"
                  :rules="[(val) => !!val || '請輸本國名']"
                  ref="Name"
                />
              </div>
              <div :class="filedGuestWidth">
                <q-input
                    standout
                    v-model="parameters.guestPhoneNumber"
                    label="電話"
                    :rules="[(val) => !!val || '請輸正確電話']"
                    ref="Mobile"
                    mask="#"
                    reverse-fill-mask
                >
                    <template v-slot:prepend>
                    <div class="text-subtitle2">+{{ userInfo.areaCode }}</div>
                    </template>
                </q-input>
            </div>
            <div :class="filedGuestWidth">
              <q-input
                  standout
                  v-model="parameters.guestAddress"
                  label="當前地址"
                  :rules="[(val) => !!val || '請輸當前地址']"
                  ref="guestAddress"
              ></q-input>
            </div>
            <div :class="filedGuestWidth">
              <q-input
                class="q-pb-md"
                standout
                :value="parameters.checkInTime"
                label="入住時間"
                :rules="[(val) => !!val || `請选入住時間`]"
                ref="checkInTime"
                readonly
              >
                <template v-slot:append>
                  <q-icon name="event" class="cursor-pointer"></q-icon>
                </template>
                <q-popup-proxy :offset="[0, 0]" ref="qDateProxy">
                  <div class="row">
                      <q-time format24h v-model="parameters.checkInTime" mask="HH:mm" 
                      @input="()=>$refs.qDateProxy.hide()"/>
                  </div>
                </q-popup-proxy>
              </q-input>
            </div>
            </div>
          </div>
          <q-separator color="grey-2" class="q-mt-md" />
          <div
            class="bg-grey-1 rounded-borders q-pa-md q-mt-md guest-item"
            v-for="(x,i) in parameters.roomGroup"
            :key="i"
          >
            <div class="text-subtitle1 q-pb-md text-weight-bold">
              房間{{ x.roomCount }}
            </div>
            <div class="row q-col-gutter-md">
              <div :class="filedGuestWidth">
                <q-input
                  standout
                  v-model="x.roomMaleCount"
                  label="成人男"
                  placeholder=""
                  mask="#"
                  reverse-fill-mask
                  :ref="`guest${i}Male`"
                />
                <!-- :ref="`guest${i}Male`" :rules="[(val) => !!val || '請輸成人數']"-->
              </div>
              <div :class="filedGuestWidth">
                <q-input
                  standout
                  v-model="x.roomFemaleCount"
                  label="成人女"
                  placeholder=""
                  mask="#"
                  reverse-fill-mask
                  :ref="`guest${i}Female`"
                  
                />
                <!-- :ref="`guest${i}Female`" :rules="[(val) => !!val || '請輸成人女數']"-->
              </div>
              <div :class="filedGuestWidth">
                <q-input
                  standout
                  v-model="x.roomChildCount"
                  label="兒童"
                  placeholder=""
                  mask="#"
                  reverse-fill-mask
                  :disable="!numberOfChildren?true:false"
                />
                <!-- :rules="[(val) => !!val || '請輸儿童數']" -->
              </div>
            </div>
          </div>
          <div class="text-subtitle1 q-my-md text-weight-bold">特殊需求備註：</div>
          <q-input standout v-model="parameters.guestRequest" input-style="height:170px;" type="textarea"  placeholder="此欄位僅限資料備註。不在商品規範內的個人需求，不保證提供" maxlength="200" counter />
        </q-card>
        </q-form>
        <coupon
        v-if="sumPrice>0"
        :product-type="productType"
        :current-price="sumPrice"
        @change="changeDiscountHandler"
      ></coupon>
      </div>
      
      <div class="relative-position" v-if="details"
        :class="{
          'q-ml-lg': !($q.screen.width < 1200 || $q.platform.is.mobile),
          'q-mt-lg  full-width': $q.screen.width < 1200 || $q.platform.is.mobile,
        }"
      >
        <div
          class="rounded-borders bg-white q-pa-md"
          style="width: 300px"
          :style="{
            width:
              $q.screen.width < 1200 || $q.platform.is.mobile
                ? 'unset'
                : '300px',
            position:$q.platform.is.mobile?'unset':'sticky',
            top:$q.platform.is.mobile?'unset':'50px',
          }"
        >
          <div class="text-subtitle1 text-weight-bolder">付款明細</div>
          <div class="row q-mt-md">
            <q-img
              :src="details.roomRateDetails?details.roomRateDetails.roomImageURL:'https://image.kkday.com/v2/image/get/s1.kkday.com/product_138437/20230217083232_t5rcO/jpg'"
              class="rounded-borders"
              spinner-color="grey-3"
              style="width: 80px"
            />
            <div class="q-ml-md col">
              <div class="text-subtitle1 ellipsis">
                {{details.hotelName}}
              </div>
              <div class="text-caption text-grey-6 ellipsis q-mt-sm">
                {{details.access}}
              </div>
            </div>
          </div>
          <div class="q-mt-md text-grey-6" v-if="details.roomRateDetails">
            <div class="row">
              <div style="width: 80px">
                入住時間：</div>
              <div class="q-ml-md">
                {{checkInTimeH}} 
                {{details.roomRateDetails.roomOptions['check-inStartTime']}} 之後
                </br>
                {{checkInTimeQ+' '+details.roomRateDetails.roomOptions['finalCheck-outTime']}} 之前
              </div>
            </div>
          </div>
          <q-separator color="grey-2" class="q-my-md"/>
          <div class="text-grey-9">
            <template v-for="(x,i) in details.roomGroup">
                <template v-for="y in x.rateGroup">
                  <div class="row q-mb-sm">
                      <div class="col">{{y.stayDate}}</div>
                      <div>
                        <span v-if="y.perAdultRateBySetCurrency">CNY {{y.perAdultRateBySetCurrency}}/人</span>
                        <span v-else="y.totalPerRoomRateBySetCurrency">CNY {{y.totalPerRoomRateBySetCurrency}}/晚</span>
                      </div>
                  </div>
                </template>
            </template>
            <hr
              style="border: none; border-top: 1px dashed #eee !important"
              class="bg-transparent q-mb-sm"
            />
            <div class="row q-mb-sm items-center">
              <div class="col">總金額</div>
              <div class="text-subtitle2 text-weight-bolder text-primary">
                CNY {{ moneyFormat(sumPrice, 2) }}
              </div>
            </div>
            <hr style="border:none;border-top:1px dashed #EEE !important;" class="bg-transparent q-mb-sm" />
            <div class="row q-mb-sm items-center" v-if="parameters.DiscountMoney > 0">
              <div class="col">優惠金額</div>
              <div
                class="text-subtitle2 text-weight-bolder text-teal"
                v-if="parameters.DiscountMoney > 0"
              >
                CNY - {{ moneyFormat(parameters.DiscountMoney, 2) }}
              </div>
              <div class="text-grey-5" v-else>暫無優惠</div>
            </div>
            <div class="row q-mb-sm items-center">
              <div class="col">支付金額</div>
              <div class="text-h6 text-weight-bolder text-primary product-price">
                CNY {{ moneyFormat(parameters.totalChargeableRateInfo, 2) }}
              </div>
            </div>
          </div>
          <div class="text-right q-mt-md" v-if="step!=3">
            <q-btn v-if="step!=3" unelevated color="primary" 
            :loading="loading" :label="step!=3?'立即支付':'已支付'" @click="submit()"
            :disable="step!=3&&loading"/>
            <q-btn v-else unelevated color="primary" label=""/>
          </div>
          
        </div>
      </div>
    </div>
    <div v-if="!orderKey || orderKey == ''" class="text-center q-my-xl">
      <none-data
        iconType="order"
        title="沒有找到您的訂單信息哦"
        subtitle="趕緊去挑選心儀的旅遊產品吧,三秒後自動跳轉到首頁"
      ></none-data>
    </div>
    <auth></auth>
  </div>
</template>

<script>
import NoneData from "src/components/common/noneData.vue";
import auth from "src/components/common/auth.vue";
import { date } from 'quasar'
import { json } from "body-parser";
import coupon from 'src/components/common/coupon.vue'
import ProductTypeEnum from "src/utils/producttypeenum";

export default {
  components:{
    coupon,
    NoneData,
    auth
  },
  data() {
    return {
      CouponIds: [],
      productType: 8,
      sumPrice: 0,//总金额
      order: null,//订单信息
      orderKey: "",
      optionObj: null,//类型
      details: null,//产品详情
      options: {//音频控件
        currentPage: 0,
        speed: 300,
        itemAnimation: true,
        centeredSlides: true,
        thresholdDistance: 100,
        thresholdTime: 300,
        loopedSlides: 2,
        slidesToScroll: 1,
        loop: true,
      },
      OrderDate: null,//接收产品相关信息
      step: 1,
      userInfo: {
        Country: 0,
        areaCode: "",
        Mailbox: "",
        Mobile: "",
        FullName: ""
      },
      countrys: [],
      areaCodes: [],
      loading: false,
      msg:null,
      JapanIncrease: null,
      numberOfAdults: 0,
      numberOfChildren: 0,
      roomRateDetails: [],
      checkInTimeH: '',
      checkInTimeQ: '',
      price: 0,
      guest: {
        roomCount: 0,//房间编号
        roomMaleCount:0,
        roomFemaleCount:0,
        roomChildCount:0,
        roomInfantCount:0,
        rateGroup:[]
      },
      chekedChildCount: 0,
      TotalChildCount: 0,
      isBaoChild: true,
      isShowTime: true,
      price: 0,
      SettlementPrice: 0,//实付
      parameters: {
          dataId:'',//订单id
          hotelId:'',//酒店id
          totalRoomCount:'',//使用客房总数
          arrivalDate:'',//开始时间
          checkInTime:'',//入住时间
          departureDate:'',//结束时间
          roomOptionCd:'',//房间计划CD
          totalChargeableRateInfo:'',//人民币合计费用
          guestRequestAppendix: 0,//费用合计（日元）
          totalPriceJapanese:'',//日元合计费用
          comment: '',//评论
          roomGroup:[],//每天住宿的费用明细
          guestLastName:'',//姓
          guestFirstName:'',//名
          guestAddress:'',//住宿代表地址
          guestPhoneNumber:'',//住宿代表电话
          guestEmail:'',//住宿代表Email
          //备注
          guestRequest:'',
          CustomerId:0,
          HotelName:'',//酒店名称
          HotelPic:'',//酒店图片
          EmployeeIdStr:'',
          OldTotalPrice:0,

          CustomerPayMoney:0,
          DiscountMoney:0,//优惠
          OrderSource: 3,//类型 1 来源内部 2 来源B2B 3 来源B2C
          OrderForm:1,
          CouponAllotIds: '',
      },
      TotalPeople: 0,//总人数
    };
  },
  computed: {
    filedWidth() {
      return {
        "col-12": this.$q.screen.width < 1200,
        "col-6": this.$q.screen.width >= 1200,
      };
    },
    filedGuestWidth() {
      return {
        "col-12": this.$q.screen.width < 1200,
        "col-4": this.$q.screen.width >= 1200,
      };
    },
  },
  created() {},
  mounted() {
    if(this.checkParamsHandler()){
      this.getData()
    }
    
    this.initGuestHandler();
    this.getUserInfoHandler()
  },
  methods: {
    changeDiscountHandler(coupon) {
      if (coupon) {
        this.parameters.DiscountMoney = coupon.discountMoney;
        this.CouponIds = [coupon.couponId];
        this.parameters.CouponAllotIds = this.CouponIds.join(",")
      } else {
        this.parameters.DiscountMoney = 0;
        this.CouponIds = [];
        this.parameters.CouponAllotIds = ''
      }
      this.parameters.totalChargeableRateInfo = this.sumPrice - this.parameters.DiscountMoney
      this.$forceUpdate();
    },
    // 获取商品详情
    getData() {
      this.$q.loading.show();
      this.apipost(
        "dmc_post_Get_GetJAPAN_RoomsList",
        this.msg,
        (r) => {
          this.$q.loading.hide();
          if (r.data.resultCode == 1) {
            
            this.details = r.data.data;
            this.parameters.HotelName = this.details.hotelName
            
            this.parameters.HotelPic = this.details.roomRateDetails.roomImageURL
            this.JapanIncrease = r.data.data.JapanIncrease
            if(Object.prototype.toString.call(this.details.roomGroup) == '[object Object]'){
                let arr = [];
                arr.push(this.details.roomGroup);
                this.details.roomGroup=arr;
            }
            this.TotalChildCount = 0;
            let rateGrouoLen = 0;
            //无价格 只有房间价格
            this.sumPrice = 0
            this.parameters.totalChargeableRateInfo = 0
            this.parameters.totalPriceJapanese = 0
            this.details.roomGroup.forEach((x,index)=>{
                    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;
                    this.TotalChildCount+=x.roomChildCount*x.rateGroup.length;

                    rateGrouoLen+= x.rateGroup.length;
                    this.chekedChildCount = this.numberOfChildren*rateGrouoLen;
                    if(this.TotalChildCount<this.chekedChildCount){
                        this.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/this.details.JapanIncrease);
                            z.perChildRateBySetCurrency = Math.ceil(z.perChildRateBySetCurrency/this.details.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/this.details.JapanIncrease);

                            onlyRoomPrice+=parseFloat(z.totalPerRoomRateBySetCurrency);
                            onlyJanpnase+=parseFloat(z.totalPerRoomRate);
                        }
                        if(z.perAdultRateBySetCurrency){
                          this.sumPrice+=Number(z.perAdultRateBySetCurrency)
                        }else if(z.totalPerRoomRateBySetCurrency){
                          this.sumPrice+=Number(z.totalPerRoomRateBySetCurrency)
                        }
                        
                    })
                    AdultCount+=AdultTotalPrice*x.roomAdultCount;
                    childCount+=childToTalPrice*x.roomChildCount;
                    // AdultCount+=AdultTotalPrice;
                    // childCount+=childToTalPrice;
                    oldAount+=oldAuditPrice;
                    childAount+=childAount;
                    this.parameters.totalChargeableRateInfo += parseFloat(AdultCount+childCount+onlyRoomPrice);
                    this.parameters.OldTotalPrice+=parseFloat(oldAount+childAount+onlyRoomPrice);
                    AdultJapanCount+=AdultJapanPrice*x.roomAdultCount;
                    childJapanCount+=ChildJapanPrice*x.roomChildCount;
                    this.SettlementPrice=this.parameters.totalChargeableRateInfo;
                    this.SettlementPrice=this.parameters.totalChargeableRateInfo;

                    this.price=this.parameters.totalChargeableRateInfo;
                    // AdultJapanCount+=AdultJapanPrice;
                    // childJapanCount+=ChildJapanPrice;
                    this.parameters.roomGroup[index].rateGroup = x.rateGroup
                    this.parameters.totalPriceJapanese += parseFloat(AdultJapanCount+childJapanCount+onlyJanpnase);
                    
                  })
                  let hTIme = date.formatDate(date.addToDate(new Date(this.parameters.arrivalDate), { days: 1 }), 'YYYY/MM/DD')
                let qTime = date.formatDate(date.addToDate(new Date(hTIme), { days: -1 }), 'YYYY/MM/DD')
                this.checkInTimeH = qTime
                this.checkInTimeQ = hTIme
          } else {
            this.$message.error(r.data.message)
          }
          
        },
        null
      );
    },
    checkParamsHandler() {
      try {
        if (this.$route.params && this.$route.params.id) {
          let key = this.$route.params.id;
          let pickuporderHotal = localStorage.getItem("pickuporderHotal");
          pickuporderHotal = pickuporderHotal ? JSON.parse(pickuporderHotal) : [];
          if (pickuporderHotal.length > 0) {
            this.order = pickuporderHotal.find((x) => x.key == key);
            if (this.order) {
              this.orderKey = key;
              this.OrderDate = this.order.order
              this.msg = this.OrderDate.msg
              
              this.parameters.arrivalDate = this.msg.arrivalDate
              this.parameters.departureDate = this.msg.departureDate
              this.parameters.totalRoomCount = this.msg.searchroomGroup.length
              this.parameters.roomGroup=[];
              for(let i=0;i<this.parameters.totalRoomCount;i++){
                var obj = {
                  roomCount:i+1,
                  roomMaleCount:0,
                  roomFemaleCount:0,
                  roomChildCount:0,
                  roomInfantCount:0,
                  rateGroup:[]
                }
                this.parameters.roomGroup.push(JSON.parse(JSON.stringify(obj)))
              }
              this.numberOfAdults = 0
              this.numberOfChildren = 0,
              this.msg.roomOptionCd = this.OrderDate.roomOptionCd
              this.parameters.roomOptionCd = this.OrderDate.roomOptionCd
              this.parameters.hotelId = this.msg.hotelId
              this.msg.searchroomGroup.forEach(x=>{
                this.numberOfAdults+=Number(x.numberOfAdults)
                this.numberOfChildren+=Number(x.numberOfChildren)
              })
            }
          }
        }
      } catch (error) {
        console.log(error);
      }
      if (this.orderKey == "") {
        setTimeout(() => {

        }, 3000);
      }
      return this.orderKey != "";
    },
    async submit() {
      
      let roomGroupLen = this.msg.searchroomGroup.length;
      //判断选择的人数与入住人数
      let Count1=0
      let roomGroup = this.parameters.roomGroup
      roomGroup.forEach(x=>{
          Count1+= Number(x.roomMaleCount)+Number(x.roomFemaleCount)+Number(x.roomChildCount)
      })
      
      let Count2=this.numberOfChildrenNumber?this.numberOfChildrenNumber:0;
      Count2= Number(this.numberOfAdults);
      if(Count1!=Count2){
          this.$message.error('入住人數與總入住數不匹配');
          return;
      }
      for (let i = 0; i < roomGroup.length; i++) {
        roomGroup[i].roomMaleCount = roomGroup[i].roomMaleCount?roomGroup[i].roomMaleCount:0
        roomGroup[i].roomFemaleCount = roomGroup[i].roomFemaleCount?roomGroup[i].roomFemaleCount:0
        roomGroup[i].roomChildCount = roomGroup[i].roomChildCount?roomGroup[i].roomChildCount:0
        if(!roomGroup[i].roomMaleCount&&!roomGroup[i].roomMaleCount){
          this.$message.error('一個房間至少入住一人');
          return;
        }
      }
      this.parameters.CustomerId = this.userInfo.Id;
      this.parameters.EmployeeIdStr = this.userInfo.Surname+this.userInfo.Name
      this.$refs.mail.validate()
      this.$refs.SurName.validate()
      this.$refs.Name.validate()
      this.$refs.Mobile.validate()
      this.$refs.guestAddress.validate()
      this.$refs.checkInTime.validate()
      this.parameters.guestEmail = this.userInfo.Mailbox
      

      

      let flag = true
      flag = await this.formValidateHandler('baseUserInfo')
      if(!flag){
        let errorObj = this.$refs.baseUserInfo.getValidationComponents().find(x=>x.innerError)
        window.scrollTo(0,errorObj.$el.offsetTop)
      }else{
        this.SetCarOrder()
      }
    },
    async formValidateHandler(formName){
      let temp=this.$refs[formName]
      let formObj = temp instanceof Array ? temp[0] : temp
      return formObj.validate()
    },
    SetCarOrder(){
      this.loading = true
      this.apipost(
        "dmc_post_GetJAPAN_HotelBookingB2C",
        this.parameters,
        (r) => {
          if (r.data.resultCode == 1) {
            this.step = 2
            let ErpOrderId = r.data.data.Id
            this.AddOrderInfo(ErpOrderId)
          }else{
            this.$message.error(r.data.message)
            this.loading = false
          }
      })
    },
    AddOrderInfo(ErpOrderId){
      let Name = this.parameters.guestLastName+this.parameters.guestFirstName
      this.apipost(
        "AddOrderInfo_post",
        {
          SurName: this.parameters.guestLastName?this.parameters.guestLastName:this.userInfo.Surname,
          Name: this.parameters.guestFirstName?this.parameters.guestFirstName:this.userInfo.Name,
          ContactNumber: this.parameters.guestPhoneNumber?this.parameters.guestPhoneNumber:this.userInfo.Mobile,//	联系电话
          Mailbox: this.parameters.guestEmail?this.parameters.guestEmail:this.userInfo.Mailbox,//邮箱
          GoodsId: this.parameters.hotelId,//商品id
          GoodsName: this.parameters.HotelName,//商品名称
          GoodsPic: this.parameters.HotelPic,//商品图片
          GoodsType: this.productType,
          OrderMake: this.parameters.arrivalDate,//订单摘要（例如出行时间）
          TotalPrice: this.parameters.totalChargeableRateInfo,//总价格
          PreferentialPrice: this.parameters.DiscountMoney,//	优惠总金额
          ErpOrderId: ErpOrderId,//erp订单id
          Country: this.userInfo.Country,//国家id
          PlatformTax: 0,//平台税金默认0
          Income: 0,//已收默认0
          Refund: 0,//退款金额默认0
        },
        (r) => {
          if (r.data.resultCode == 1) {
            this.step = 3
            this.$message.success("訂單創建成功")
            this.goPayHandler(r.data.data)
          }else{
            this.$message.error(r.data.message)
          }
          this.loading = false
      })
    },
    goPayHandler(pay){
      let pickuporderScenTickets = localStorage.getItem("pickuporderScenTickets");
      pickuporderScenTickets = pickuporderScenTickets ? JSON.parse(pickuporderScenTickets) : [];
      let i = pickuporderScenTickets.findIndex((x) => x.key == this.orderKey);
      if (i >= 0) {
        pickuporderScenTickets.splice(i, 1);
        localStorage.setItem("pickuporderScenTickets", JSON.stringify(pickuporderScenTickets));
      }
      this.CommonJump("/pay/" + pay.OrderNo, {});
    },
    optionsFn(cd) {
      return (
        cd >=
        date.formatDate(date.addToDate(new Date(), { days: 0 }), "YYYY/MM/DD")
      );
    },
    // 音频
    slideHandler(e) {
      this.options.currentPage = e.currentPage;
      if (
        e.currentPage != 0 &&
        this.$refs.video &&
        this.$refs.video.isPlaying
      ) {
        this.$refs.video.pause();
      }
    },
    playHandler(e) {},
    pauseHandler(e) {},
    timeChangeHandler(e) {

    },
    //
    seekedChangeHandler(e) {

    },
    initGuestHandler() {
     
    },
    //获取价格
    getPrice(price) {
      //(chargeableRateInfoPerPersonForANightBySetCurrency/0.9975)*入住天数*入住人数
      //天数
      return Math.ceil(price / this.JapanIncrease)*(this.numberOfAdults+this.numberOfChildren)*this.DateDiff(this.SimilarMsg.arrivalDate,this.SimilarMsg.departureDate);
    },
    getPrice2(price){
        return Math.ceil(price / this.JapanIncrease)
    },
    //获取餐
    getMealType(meals) {
      if (meals != "") {
        let mealType = meals.split(",");
        if (mealType[0] == 0 && mealType[2] == 0) {
          return "无餐";
        }
        if (mealType[0] == 1 && mealType[2] == 1) {
          return "含早晚餐";
        }
        if (mealType[0] == 1 && mealType[2] == 0) {
          return "含早餐";
        }
        if (mealType[0] == 0 && mealType[2] == 1) {
          return "含晚餐";
        }
      }
    },
    //获取房型
    getGradeType(type) {
      let gradeType = "";
      switch (parseInt(type)) {
        case 1:
          gradeType = "标准";
          break;
        case 2:
          gradeType = "普通";
          break;
        case 3:
          gradeType = "经济";
          break;
        case 4:
          gradeType = "精品";
          break;
        case 5:
          gradeType = "豪华";
          break;
        case 6:
          gradeType = "套房";
          break;
      }
      return gradeType;
    },
    
    // 获取当前用户信息
    getUserInfoHandler() {
      let u = this.$user.userInfo;
      if (u) {
        this.apipost("GetCustomerInfo_post", { Id: u.id }, (r) => {
          if (r.data.resultCode == 1) {
            this.userInfo = r.data.data;
            if(r.data.data.Moblie){
              this.parameters.guestEmail = r.data.data.Moblie
              this.userInfo.Mobile = r.data.data.Moblie
            }
          } else {
            this.$user.userInfo = null;
          }
          this.initCountry();
        });
      }
    },
    // 初始化国家
    initCountry() {
      this.apipost("GetCountryInfo_post", {}, (r) => {
        if (r.data.resultCode == 1) {
          this.countrys = r.data.data.countList;
          this.userInfo.Country = this.countrys[0].ID;
  
          this.areaCodes = r.data.data.phoneCountList;
          this.changeCountry(this.userInfo.Country);
          this.areaCodes.forEach((x) => {
            let temp = this.countrys.find((y) => y.ID == x.ID);
            x.EnName = `${temp.EnName}(${x.PhoneCode})`;
          });
        }
      });
    },
    changeCountry(id) {
      this.userInfo.areaCode = this.areaCodes.find((x) => x.ID == id).PhoneCode;
    },
  },
};
</script>

<style>
.order-preview .q-stepper__content {
  display: none !important;
}
.order-preview .q-toggle__track {
  height: 0.7em;
  border-radius: 0.35em;
  opacity: 0.38;
  width: 50px;
}
.order-preview .q-toggle__thumb {
  top: 0.42em;
  left: 0.45em;
  width: 0.5em;
  height: 0.5em;
  transition: left 0.22s ease-in-out;
  user-select: none;
  z-index: 0;
}
.order-preview .q-toggle__inner--truthy .q-toggle__thumb {
  left: 0.94em;
}
.order-preview .q-toggle__inner {
  width: 1.9em;
}
.order-preview .q-toggle__label {
  margin-top: 12px;
}
.guest-item:hover{
  background: rgba(241,65,108,.04) !important;
}
.text-h6Detail {
  text-align: center;
  font-size: 18px;
  color: #333;
  font-weight: 700;
  position: relative;
  width:100%;
  height:50px;
}
.text-h6Detail i {
  position: absolute;
  right:20px;
  top:10px;
  cursor: pointer;
  font-size:23px;
}
</style>
