<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.imageList&&details.imageList.length?details.imageList[0]:'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">
                {{OrderDate.detail.Name_CN}}
              </div>
              <div class="text-caption text-grey-6 ellipsis q-mt-sm">
                {{OrderDate.detail.Address_CN}}
              </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.CheckInDate}}至{{msg.CheckOutDate}}</span>
            </div>
          <span 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>
          <span class="text-grey-9" v-if="msg.roomOptionCd">
            (
              <span class="fz15 text-weight-bold">
                {{ msg.roomOptionCd.RoomName_CN }}
              </span>
              <span class="fz13 text-grey-6 q-ml-sm" v-if="roomRateDetails.RatePlanList &&  roomRateDetails.RatePlanList.length > 0">
                {{ getRoomType(roomRateDetails.RatePlanList[0].BedType) }}
                <template v-for="( itemp, indexp ) in roomRateDetails.RatePlanList[0].PriceList">
                  <template v-if="!indexp">
                    {{getMealtype(itemp.MealType)}}
                      <template v-if="itemp.MealAmount>0">
                        ×{{itemp.MealAmount}}份
                      </template>
                  </template>
                </template>
              </span>
              )
          </span>
          <span class="text-grey-9">
            <q-icon name="iconfont jinggao1" size="20px"/><span>
              <template v-if="roomRateDetails&&roomRateDetails.RatePlanList.length">
                  <template v-for="(item, index) in roomRateDetails.RatePlanList">
                    僅剩{{item.InventoryCount}}間
                  </template>
              </template>
            </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>
          </span>
          </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-pt-xs" v-if="
                  roomRateDetails.CancellationPolicyList &&
                  roomRateDetails.CancellationPolicyList.length > 0
                ">
                <span v-for="(itemCancella, index1) in roomRateDetails.CancellationPolicyList">
                  <span v-if="index1==0">{{ getformatDateStr(itemCancella.FromDate) }}之前免費取消
                  </span>
                  <span v-if="itemCancella.Amount==roomRateDetails.TotalPrice">
                    <span>{{ getformatDateStr(itemCancella.FromDate) }}起不可取消，取消將收取訂單全額費用;</span>
                  </span>
                  <span v-else>
                    <span>{{ getformatDateStr(itemCancella.FromDate) }}
                      <span v-if="index1!=(roomRateDetails.CancellationPolicyList.length-1)">-
                        {{ getformatDateStr(roomRateDetails.CancellationPolicyList[index1+1].FromDate) }}
                        之間</span>
                      取消，收費{{DanWei}}{{getPrice(itemCancella.Amount)}};</span>
                  </span>
                </span>
              </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.CheckInDate"
                label="入住時間"
                :rules="[(val) => !!val || `請选入住時間`]"
                ref="CheckInDate"
                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.CheckInDate" 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.GuestList"
            :key="i"
          >
            <div class="text-subtitle1 q-pb-md text-weight-bold">
              房間{{ x.RoomNum }}
            </div>
            <div class="row q-col-gutter-md" v-for="(y,index) in x.GuestInfo"
            :class="[index!=x.GuestInfo.length-1?'q-mb-md':'']">
              <div :class="filedGuestWidth">
                <q-input
                  standout
                  v-model="y.LastName"
                  label="英文姓"
                  placeholder=""
                  mask="A"
                  reverse-fill-mask
                  :ref="`guest${i}_${index}Male`"
                />
              </div>
              <div :class="filedGuestWidth">
                <q-input
                  standout
                  v-model="y.FirstName"
                  label="英文名"
                  placeholder=""
                  mask="A"
                  reverse-fill-mask
                  :ref="`guest${i}_${index}Female`"
                  
                />
              </div>
              <div :class="filedGuestWidth">
                <q-input
                  standout
                  v-model="y.Age"
                  label="年龄(兒童必填)"
                  placeholder=""
                  mask="#"
                  reverse-fill-mask
                  :disable="!y.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 v-if="details&&details.imageList"
               :src="details.imageList&&details.imageList.length?details.imageList[0]:'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">
                {{OrderDate.detail.Name_CN}}
              </div>
              <div class="text-caption text-grey-6 ellipsis q-mt-sm">
                {{OrderDate.detail.Address_CN}}
              </div>
            </div>
          </div>
          <!-- v-if="details.roomRateDetails" -->
          <div class="q-mt-md text-grey-6" >
            <div class="row">
              <div style="width: 80px">
                入住時間：
              </div>
              <div class="q-ml-md">
                {{msg.CheckInDate}}  {{OrderDate.liveNvm}}  晚
              </div>
            </div>
          </div>
          <q-separator color="grey-2" class="q-my-md"/>
          <div class="text-grey-9">
            <template v-for="(x,i) in parameters.GuestList">
                <div class="row justify-between q-mb-sm">
                  <span>房間{{ x.RoomNum }}</span>
                  <span>1間 * {{ OrderDate.liveNvm }}晚 * {{DanWei}}{{ Price }}</span>
                </div>
                <template v-for="y in x.GuestInfo">
                  <div class="row q-mb-sm" v-if="y.LastName!=''||y.FirstName!=''">
                      <div class="col">{{y.LastName}} {{ y.FirstName }}</div>
                      <div>
                        <span>1成人</span>
                        <span v-if="y.numberOfChildren">1兒童 </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">
                {{ DanWei }} {{ 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"
              >
                {{ DanWei }} - {{ 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">
                {{ DanWei }} {{ moneyFormat(parameters.TotalPrice, 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:{
        sort: 1,
        displayFrom: 1,
        CheckInDate: "",
        CheckOutDate: "",
        searchroomGroup: [],
        ratePlanID: "",
        imgUrl: "",
        RoomCount: 1,
        ChildCount: 0,
        AdultCount: 1,
        OccupancyDetails: [],
        hotelId: 0
      },
      JapanIncrease: null,
      numberOfAdults: 0,
      numberOfChildren: 0,
      roomRateDetails: [],
      CheckInDateH: '',
      CheckInDateQ: '',
      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: {
        EmployeeIdStr: "",
        CheckInDate: "",
        RatePlanID: "",
        CheckOutDate: "",
        RoomCount: "",
        guestLastName: "",
        guestFirstName: "",
        guestAddress: "",
        guestPhoneNumber: "",
        guestEmail: "",
        BookingID: "",
        HotelName: "",
        HotelPic: "",
        GuestList: [],
        TotalPrice: 0,
        CustomerPayMoney: 0,
        DiscountMoney: 0,
        OrderSource: 2,
        OrderForm: 1,
        //备注
        guestRequest: "",
        hotelId: '',
        roomType: 0,
        RoomName:"",//房型名称
      },
      TotalPeople: 0,//总人数
      HotelRoomTypes: [],//道旅床类型
      HotelMealTypes: [],//道旅餐食类型

        DanWei: '',//单位
    };
  },
  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.getdidaBedType()
    this.getdidaMealType()
    this.getUserInfoHandler()
  },
  methods: {
    //获取道旅床类型列表
    getdidaBedType() {
      this.apipost(
        "dmc_post_GetDidaBedTypeBaseInfo",
        this.hotelMsg,
        res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.HotelRoomTypes = res.data.data;
          }
        },
        null
      );
    },
    //获取道旅餐食类型
    getdidaMealType() {
      this.apipost(
        "dmc_post_GetDidaMealType",
        this.hotelMsg,
        res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.HotelMealTypes = res.data.data;
          }
        },
        null
      );
    },
    //获取房型
    getRoomType(roomtypeId) {
      let roomtypeName = "";
      if (roomtypeId > 0) {
        this.HotelRoomTypes.forEach(item => {
          if (item.ID == roomtypeId) {
            roomtypeName = item.Name_CN;
          }
        });
      }
      return roomtypeName;
    },
     //获取餐型
    getMealtype(mealtypeId) {
      let mealtypeName = "";
      if (mealtypeId > 0) {
        this.HotelMealTypes.forEach((item) => {
          if (item.ID == mealtypeId) {
            mealtypeName = item.Name_CN;
          }
        });
      }
      return mealtypeName;
    },
    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();
    },
    //通过日期得到周几
    getWeek() {
      let CheckInDate = new Date(this.params.CheckInDate).getDay();
      let CheckOutDate = new Date(this.params.CheckOutDate).getDay();
      this.checkInWeek = this.WeekList[CheckInDate];
      this.checkOutWeek = this.WeekList[CheckOutDate];
    },
    //通过日期得到周几
    getWeekD(dateTime) {
      let dt = new Date(dateTime);
      let year = dt.getFullYear();
      let month = (dt.getMonth() + 1).toString().padStart(2, "0");
      let date = (dt.getDate()).toString().padStart(2, "0");
      return month + "-" + date + "(" + this.WeekList[dt.getDay()] + ")";
    },
    //日期格式化
    getformatDateStr(value) {
      var dt = new Date(value);
      let year = dt.getFullYear();
      let month = (dt.getMonth() + 1).toString().padStart(2, "0");
      let date = (dt.getDate()).toString().padStart(2, "0");
      return year + "-" + month + "-" + date;
    },
    getPrice(price) {
      return Math.ceil(price);
    },
    // 获取商品详情
    getData() {
      this.$q.loading.show();
      this.apipost(
        "dmc_post_GetDiDaPriceConfirm",
        this.msg,
        (res) => {
          this.$q.loading.hide();
          if (res.data.resultCode == 1) {
              this.dataList = res.data.data.PriceDetails;
              this.roomRateDetails = res.data.data.PriceDetails.HotelList[0];
              this.parameters.BookingID = res.data.data.PriceDetails.ReferenceNo;
              // this.parameters.CheckInDate = res.data.data.PriceDetails.CheckInDate;
              this.parameters.TotalPrice = this.roomRateDetails.TotalPrice;
              this.parameters.RoomCount = this.msg.RoomCount;
              this.DanWei = res.data.data.PriceDetails.HotelList[0].RatePlanList[0].Currency;
              if (
                Object.prototype.toString.call(this.dataList.HotelList) ==
                "[object Object]"
              ) {
                let arr = [];
                arr.push(this.dataList.HotelList);
                this.dataList.HotelList = arr;
              }
              this.TotalChildCount = 0;

              this.details = {
                ...this.OrderDate.roomOptionCd,
                ...res.data.data
              };

              this.sumPrice = 0
              this.roomRateDetails.RatePlanList[0].PriceList.forEach((item) => {
                this.sumPrice+= (this.parameters.GuestList.length*Number(item.Price))
                this.Price = Number(item.Price)
              })
          } else {
            this.$message.error(res.data.message)
            this.CommonJump(`/detailHotalDida/${this.msg.hotelId}/${this.OrderDate.MinPrice}/${encodeURIComponent(this.msg.CheckInDate)}/${encodeURIComponent(this.msg.CheckOutDate)}`, {});
          }
          
        },
        null
      );
    },
    checkParamsHandler() {
      try {
        if (this.$route.params && this.$route.params.id) {
          let key = this.$route.params.id;
          let pickuporderHotal = localStorage.getItem("pickuporderHotalDida");
          
          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.msg,
                ...this.OrderDate.msg
              }
        
              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.parameters.CheckOutDate = this.msg.CheckOutDate
              this.parameters.CheckInDate = this.msg.CheckInDate
              this.parameters.RatePlanID = this.msg.ratePlanID
              this.parameters.HotelName = this.OrderDate.detail.Name_CN
              this.parameters.HotelPic = this.OrderDate.detail.images[0]
              this.parameters.RoomName = this.msg.roomOptionCd.RoomName_CN

              this.parameters.GuestList = []
              this.msg.searchroomGroup.forEach((x,index)=>{
                this.numberOfAdults+=Number(x.numberOfAdults)
                this.numberOfChildren+=Number(x.numberOfChildren)
                var guestInfoList = [];
                let allprople = x.numberOfAdults + x.numberOfChildren
                for (let i = 0; i < allprople; i++) {
                  let obj = {
                    LastName: "",
                    FirstName: "",
                    Age: ""
                  };
                  guestInfoList.push(obj);
                }
                var obj = {
                  RoomNum: index + 1,
                  numberOfAdults: x.numberOfAdults,
                  numberOfChildren: x.numberOfChildren,
                  GuestInfo: guestInfoList
                };
                this.parameters.GuestList.push(obj);
              })
            }
          }
        }
      } catch (error) {
        console.log(error);
      }
      if (this.orderKey == "") {
        setTimeout(() => {

        }, 3000);
      }
      return this.orderKey != "";
    },
    async submit() {
      //判断选择的人数与入住人数
      let Count1=0
      let roomGroup = this.parameters.GuestList
      roomGroup.forEach(x=>{
          Count1+= Number(x.numberOfAdults)+Number(x.numberOfChildren)
      })
      
      let Count2=this.numberOfChildren?this.numberOfChildren:0;
      Count2+= Number(this.numberOfAdults);
      if(Count1!=Count2){
          this.$message.error('入住人數與總入住數不匹配');
          return;
      }
      for (let i = 0; i < roomGroup.length; i++) {
        if(!roomGroup[i].numberOfAdults){
          this.$message.error('一個房間至少入住一人');
          return;
        }
      }
      
      this.parameters.CustomerId = this.userInfo.Id;
      this.parameters.EmployeeIdStr = this.userInfo.Id;//`${this.userInfo.Surname?this.userInfo.Surname:''}${this.userInfo.Name?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.CheckInDate.validate()
      this.parameters.guestEmail = this.userInfo.Mailbox

      for (let i = 0; i < this.parameters.GuestList.length; i++) {
        let GuestList = this.parameters.GuestList[i]
        for (let j = 0; j < GuestList.GuestInfo.length; j++) {
          let GuestInfo = GuestList.GuestInfo[j]
          if(GuestInfo.LastName==''||GuestInfo.FirstName==''){
            this.$message.error('請填寫姓或名');
            return;
          }
          
        }
      }

      

      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_GetDiDaBookingConfirm",
        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.OrderDate.detail.Name_CN,//商品名称
          GoodsPic: this.OrderDate.detail.images[0],//商品图片
          GoodsType: this.productType,
          OrderMake: this.parameters.CheckInDate,//订单摘要（例如出行时间）
          TotalPrice: this.parameters.TotalPrice,//总价格
          PreferentialPrice: this.parameters.DiscountMoney,//	优惠总金额
          ErpOrderId: ErpOrderId,//erp订单id
          Country: this.userInfo.Country,//国家id
          PlatformTax: 0,//平台税金默认0
          Income: 0,//已收默认0
          Refund: 0,//退款金额默认0
          DOrderType: 1,//1直客订单
        },
        (r) => {
          if (r.data.resultCode == 1) {
            this.step = 3
            this.$message.success("訂單創建成功")
            this.goPayHandler(r.data.data)
          }else{
            this.CommonJump("/order?type=1", {});
            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) {

    },
    //获取餐
    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>
