<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 v-if="details.imageList&&details.imageList.length"
                :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" spinner-size="20px" style="width: 80px; height: 80px" />
              <q-img v-else src="../../assets/img/errImg.png" class="rounded-borders" spinner-color="grey-3"
                spinner-size="20px" 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.isChild?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.length"
              :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" />
            <q-img v-else src="../../assets/img/errImg.png" class="rounded-borders" spinner-color="grey-3"
              spinner-size="20px" 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: 9, //道旅酒店
        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: 4,
          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.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)}`, {
                  orderKey: this.orderKey
                });
            }

          },
          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: i < x.numberOfAdults ? '' : x.ChildAgeDetails,
                      isChild: i < x.numberOfAdults ? false : true
                    };
                    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.$refs.mail.validate()
        this.$refs.SurName.validate()
        this.$refs.Name.validate()
        this.$refs.Mobile.validate()
        this.$refs.guestAddress.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.AddOrderInfo()
        }
      },
      async formValidateHandler(formName) {
        let temp = this.$refs[formName]
        let formObj = temp instanceof Array ? temp[0] : temp
        return formObj.validate()
      },
      AddOrderInfo() {
        this.loading = true;
        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: 0, //erp订单id
            Country: this.userInfo.Country, //国家id
            PlatformTax: 0, //平台税金默认0
            Income: 0, //已收默认0
            Refund: 0, //退款金额默认0
            DOrderType: 1, //1直客订单
            DiDaHotelParams: this.parameters,
          },
          (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>
