<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,
      }"
      v-if="orderKey && orderKey != '' && trip && price"
    >
      <div class="col">
        <q-card flat class="q-pa-md">
          <div
            class="text-subtitle1 text-weight-bolder"
            ref="baseUserInfoTitle"
          >
            訂購人資訊
          </div>
          <q-separator color="grey-2" class="q-my-md" />
          <q-form ref="baseUserInfo">
            <div class="row q-col-gutter-md">
              <div :class="filedWidth">
                <q-input
                  standout
                  v-model="userInfo.Name"
                  label="名字"
                  ref="name"
                  :rules="[(val) => !!val || '請輸入名字']"
                />
              </div>
              <div :class="filedWidth">
                <q-input
                  standout
                  v-model="userInfo.Surname"
                  ref="surname"
                  label="姓氏"
                  :rules="[(val) => !!val || '請輸入姓氏']"
                />
              </div>
              <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.Moblie"
                  label="電話"
                  mask="#"
                  reverse-fill-mask
                  ref="mobile"
                  :rules="[(val) => !!val || '請輸入行動電話']"
                >
                  <template v-slot:prepend>
                    <div class="text-subtitle2">
                      {{ userInfo.PhoneCountryStr }}
                    </div>
                  </template>
                </q-input>
              </div>
              <div :class="filedWidth">
                <q-input
                  standout
                  v-model="userInfo.Mailbox"
                  label="郵箱地址"
                  ref="mailbox"
                  :rules="[
                    (val) =>
                      /^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/.test(
                        val
                      ) || '請輸入正確的郵箱地址',
                  ]"
                />
              </div>
              <div :class="filedWidth">
                <q-toggle v-model="isUpdateUserInfo" label="同步更新會員資料" />
              </div>
            </div>
          </q-form>
        </q-card>

        <q-card flat class="q-pa-md q-mt-lg">
          <div class="text-subtitle1 text-weight-bolder q-mb-md">旅客資料</div>

          <div class="row">
            <q-img
              :src="trip.imgCover[0].Url"
              class="rounded-borders"
              spinner-color="grey-3"
              style="width: 80px"
            />
            <div class="q-ml-md col">
              <div class="text-subtitle1 ellipsis">
                {{ trip.title }}
              </div>
              <div class="text-caption text-grey-6 ellipsis q-mt-sm">
                {{ trip.ltName }}
              </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>{{ price.startDate }}</span>
            </div>
            <div class="text-grey-9 q-ml-md">
              <q-icon name="iconfont iconpeople" size="20px" class="q-mr-sm" />
              <span class="q-mr-sm" v-if="chosenObj.crCount > 0"
                >成人 x {{ chosenObj.crCount }}</span
              >
              <span class="q-mr-sm" v-if="chosenObj.etzcCount"
                >兒童占床 x {{ chosenObj.etzcCount }}</span
              >
              <span class="q-mr-sm" v-if="chosenObj.etbzcCount"
                >兒童不占床 x {{ chosenObj.etbzcCount }}</span
              >
              <span class="q-mr-sm" v-if="chosenObj.yeCount"
                >婴儿 x {{ chosenObj.yeCount }}</span
              >
              <span class="q-mr-sm" v-if="chosenObj.df"
                >单房间 x {{ chosenObj.df }}</span
              >
            </div>
          </div>
          <div class="text-right">
            <q-toggle v-model="isCreateGuest" label="是否預填旅客信息" />
          </div>
          <q-separator color="grey-2" class="q-mt-md" />
          <template v-if="isCreateGuest">
            <div
              class="bg-grey-1 rounded-borders q-pa-md q-mt-md guest-item"
              v-for="(x, i) in guests"
              :key="i"
              :ref="`guest${i}Title`"
            >
              <div class="text-subtitle1 q-pb-md text-weight-bold">
                {{ x.FormatTypeName }}
              </div>
              <q-form :ref="`guest${i}`">
                <div class="row q-col-gutter-md">
                  <div :class="filedGuestWidth">
                    <q-input
                      standout
                      v-model="x.SurName"
                      label="本國姓"
                      placeholder="例：張"
                      :rules="[(val) => !!val || '請輸本國姓']"
                    />
                  </div>
                  <div :class="filedGuestWidth">
                    <q-input
                      standout
                      v-model="x.Name"
                      label="本國名"
                      placeholder="例：三"
                      :rules="[(val) => !!val || '請輸本國名']"
                    />
                  </div>
                  <div :class="filedGuestWidth">
                    <div class="row items-center q-mt-md">
                      <span>選擇性別：</span>
                      <q-radio
                        v-model="x.Sex"
                        dense
                        :val="1"
                        label="男"
                        class="q-mr-lg"
                      />
                      <q-radio v-model="x.Sex" dense :val="2" label="女" />
                    </div>
                  </div>
                  <div :class="filedGuestWidth">
                    <q-input
                      standout
                      v-model="x.ESurName"
                      label="護照英文姓"
                      placeholder="例：ZHANG"
                      mask="A"
                      reverse-fill-mask
                      :rules="[(val) => !!val || '請輸護照英文姓']"
                    />
                  </div>
                  <div :class="filedGuestWidth">
                    <q-input
                      standout
                      v-model="x.EName"
                      label="護照英文名"
                      placeholder="例：SAN"
                      mask="A"
                      reverse-fill-mask
                      :rules="[(val) => !!val || '請輸護照英文名']"
                    />
                  </div>
                  <div :class="filedGuestWidth">
                    <q-input
                      standout
                      v-model="x.PassportNo"
                      label="護照號"
                      mask="X"
                      reverse-fill-mask
                      :rules="[(val) => !!val || '請輸護照號']"
                    />
                  </div>
                  <div :class="filedGuestWidth">
                    <q-input
                      standout
                      v-model="x.PassportExpiry"
                      label="護照有效期"
                      readonly
                      :rules="[(val) => !!val || '請選擇護照有效期']"
                    >
                      <template v-slot:append>
                        <q-icon name="event" class="cursor-pointer"></q-icon>
                      </template>
                      <q-popup-proxy :offset="[0, 0]" ref="qDateProxy7">
                        <q-date
                          mask="YYYY-MM-DD"
                          :title="$t('search_date_begin')"
                          subtitle="選擇"
                          v-model="x.PassportExpiry"
                        />
                      </q-popup-proxy>
                    </q-input>
                  </div>
                  <div :class="filedGuestWidth">
                    <q-input
                      standout
                      v-model="x.Birthday"
                      label="出生日期"
                      readonly
                      :rules="[(val) => !!val || '請選擇旅客出生日期']"
                    >
                      <template v-slot:append>
                        <q-icon name="event" class="cursor-pointer"></q-icon>
                      </template>
                      <q-popup-proxy :offset="[0, 0]" ref="qDateProxy8">
                        <q-date
                          mask="YYYY-MM-DD"
                          :title="$t('search_date_begin')"
                          subtitle="選擇"
                          v-model="x.Birthday"
                        />
                      </q-popup-proxy>
                    </q-input>
                  </div>
                  <div :class="filedGuestWidth" v-if="x.GuestType == 1">
                    <q-input
                      standout
                      v-model="x.MobilePhone"
                      label="聯絡電話"
                      mask=""
                      reverse-fill-mask
                      placeholder="格式：國家區號+號碼，例如：+81 25xxxx"
                    />
                  </div>

                  <div :class="filedGuestWidth" v-if="x.EnableSignRoom">
                    <q-toggle
                      v-model="x.IsSignRoom"
                      :disable="disableSign && !x.IsSignRoom"
                      @input="changeRoomHandler"
                      label="入住單房"
                    />
                  </div>
                </div>
              </q-form>
            </div>
          </template>
          <div class="text-subtitle1 q-my-md text-weight-bold">
            特殊需求備註：
          </div>
          <q-input
            standout
            v-model="chosenObj.remark"
            input-style="height:170px;"
            type="textarea"
            placeholder="此欄位僅限資料備註。不在商品規範內的個人需求，不保證提供"
            maxlength="200"
            counter
          />
        </q-card>

        <coupon
          v-if="price && price.tcid"
          :product-type="productType"
          :current-price="sumPrice"
          @change="changeDiscountHandler"
        ></coupon>
      </div>
      <div
        class="relative-position"
        :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="trip.imgCover[0].Url"
              class="rounded-borders"
              spinner-color="grey-3"
              style="width: 80px"
            />
            <div class="q-ml-md col">
              <div class="text-subtitle1 ellipsis">
                {{ trip.title }}
              </div>
              <div class="text-caption text-grey-6 ellipsis q-mt-sm">
                {{ trip.ltName }}
              </div>
            </div>
          </div>
          <div class="q-mt-md text-grey-6">
            <div class="row" v-if="(unionCity&&unionCity.cityName)||(trip&&trip.startCityName)">
              <div style="width: 80px">出發城市：</div>
              <div class="q-ml-md">
                {{ unionCity ? unionCity.cityName : trip.startCityName }}起止
              </div>
            </div>
            <div class="row">
              <div style="width: 80px">出發日期：</div>
              <div class="q-ml-md">
                {{
                  unionCity && unionCity.goFlight
                    ? unionCity.goFlight.startDate
                    : price.startDate
                }}
              </div>
            </div>
          </div>
          <q-separator color="grey-2" class="q-my-md" />
          <div class="text-grey-9">
            <div class="row q-mb-sm" v-if="chosenObj.crCount > 0">
              <div class="col">成人佔床 x {{ chosenObj.crCount }}</div>
              <div>CNY {{ moneyFormat(price.originalB2CPrice, 2) }}</div>
            </div>
            <div class="row q-mb-sm" v-if="chosenObj.etzcCount > 0">
              <div class="col">兒童佔床 x {{ chosenObj.etzcCount }}</div>
              <div>
                CNY
                {{
                  moneyFormat(price.originalB2CPrice + price.childNeedPrice, 2)
                }}
              </div>
            </div>
            <div class="row q-mb-sm" v-if="chosenObj.etbzcCount > 0">
              <div class="col">兒童不佔床 x {{ chosenObj.etbzcCount }}</div>
              <div>
                CNY
                {{
                  moneyFormat(
                    price.originalB2CPrice - price.childNoNeedPrice,
                    2
                  )
                }}
              </div>
            </div>
            <div class="row q-mb-sm" v-if="chosenObj.yeCount > 0">
              <div class="col">嬰兒不佔床 x {{ chosenObj.yeCount }}</div>
              <div>CNY {{ moneyFormat(price.babyPrice, 2) }}</div>
            </div>
            <div v-if="price.safeMoney > 0">
              <hr
                style="border: none; border-top: 1px dashed #eee !important"
                class="bg-transparent q-mb-sm"
              />
              <div class="row q-mb-sm" v-if="price.safeMoney > 0">
                <div class="col">保險費 x {{ price.safeMoney }}/人</div>
                <div>
                  CNY
                  {{
                    moneyFormat(
                      price.safeMoney *
                        (chosenObj.crCount +
                          chosenObj.etCount +
                          chosenObj.yeCount),
                      2
                    )
                  }}
                </div>
              </div>
            </div>
            <div v-if="price.visaPrice > 0 || price.otherPrice > 0">
              <hr
                style="border: none; border-top: 1px dashed #eee !important"
                class="bg-transparent q-mb-sm"
              />
              <div class="row q-mb-sm" v-if="price.visaPrice > 0">
                <div class="col">簽證費 x {{ price.visaPrice }}/人</div>
                <div>
                  CNY
                  {{
                    moneyFormat(
                      price.visaPrice *
                        (chosenObj.crCount +
                          chosenObj.etCount +
                          chosenObj.yeCount),
                      2
                    )
                  }}
                </div>
              </div>
              <div class="row q-mb-sm" v-if="price.otherPrice > 0">
                <div class="col">雜費 x {{ price.otherPrice }}/人</div>
                <div>
                  CNY
                  {{
                    moneyFormat(
                      price.otherPrice *
                        (chosenObj.crCount +
                          chosenObj.etCount +
                          chosenObj.yeCount),
                      2
                    )
                  }}
                </div>
              </div>
            </div>
            <hr
              style="border: none; border-top: 1px dashed #eee !important"
              class="bg-transparent q-mb-sm"
            />
            <div class="row q-mb-sm" v-if="chosenObj.etCount > 0">
              <div class="col">兒童附加費 x {{ chosenObj.etCount }}</div>
              <div>CNY {{ moneyFormat(price.babyChargePrice, 2) }}</div>
            </div>
            <div class="row q-mb-sm" v-if="chosenObj.df > 0">
              <div class="col">單房差價 x {{ chosenObj.df }}</div>
              <div>CNY {{ moneyFormat(price.singleRoomPrice, 2) }}</div>
            </div>
            <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">
              <div class="col">優惠金額</div>
              <div
                class="text-subtitle2 text-weight-bolder text-teal"
                v-if="price.discountPrice > 0"
              >
                CNY - {{ moneyFormat(price.discountPrice, 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(sumPrice - price.discountPrice, 2) }}
              </div>
            </div>
          </div>
          <div class="text-right q-mt-md">
            <q-btn
              unelevated
              color="primary"
              label="立即支付"
              :loading="submiting"
              @click="submitHandler"
            />
          </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 coupon from "../../components/common/coupon.vue";
import NoneData from "src/components/common/noneData.vue";
import auth from "src/components/common/auth.vue";
import { date } from "quasar";
import ProductTypeEnum from "../../utils/producttypeenum";
import EnumHelper from "../../utils/enumhelper";
export default {
  components: {
    coupon,
    NoneData,
    auth,
  },

  data() {
    return {
      step: 1,
      userInfo: {
        lastName: "",
        firstName: "",
        country: 0,
        phone: "",
        areaCode: "",
        mail: "",
      },
      chosenObj: {
        startDate: "",
        crCount: 4,
        etCount: 6,
        yeCount: 0,
        lrCount: 0,
        etbzcCount: 4,
        etzcCount: 2,
        df: 1,
        dcf: 0,
        srf: 0,
        isUnico: false,
        unicoDep: {
          city: null,
          date: null,
          price: 0,
          isSup: -2,
        },
        unicoArr: {
          city: null,
          date: null,
          price: 0,
          isSup: -2,
        },
        remark: "",
      },
      isUpdateUserInfo: false,
      countrys: [],
      areaCodes: [],
      guest: {
        Id: 0,
        TCID: 0,
        OrderId: 0,
        VisaPlanId: 0,
        SurName: "",
        Name: "",
        PassportNo: "",
        ESurName: "",
        EName: "",
        GuestType: 0,
        EnableSignRoom: false,
        PassportExpiry: "",
        FormatTypeName: "",
        MobilePhone: "",
        RoomType: 0,
        IsSignRoom: false,
        Sex: 1,
        IdCard: "",
        PassportIssued: "",
        Purpose: "观光",
        IsBed: 1,
        IsNeedAirticket: 2,
        IsNeedSafe: 1,
        IsVisaFree: 2,
        IssuingAuthority: 2,
        IsCriminalRecord: 2,
        IsDepartureRecord: 2,
        IsHightSchool: 2,
        IsB2B: 1,
        Birthday: "",
      },
      guests: [],
      disableSign: false,
      orderKey: "",
      order: {},
      trip: null,
      price: null,
      unionCity: null,
      sumPrice: 0,
      submiting: false,
      CouponIds: [],
      productType: 0,
      isCreateGuest:false
    };
  },
  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() {
    if (this.checkParamsHandler()) {
      this.initGuestHandler()
      this.getTripData();
      this.getUserInfoHandler();
    }
  },
  mounted() {},
  methods: {
    async submitHandler() {
      this.submiting = true;
      let flag = true;
      flag = await this.formValidateHandler("baseUserInfo");
      if (!flag) {
        this.goScrollToForm("baseUserInfoTitle");
      } else {
        if(this.isCreateGuest){
          for (let i = 0; i < this.guests.length; i++) {
            flag = await this.formValidateHandler("guest" + i);
            if (!flag) {
              this.goScrollToForm(`guest${i}Title`);
              break;
            }
          }
        }
        if (flag) {
          this.submitOrderHandler();
          //this.submitB2COrderHandler(81192)
          return;
        }
      }
      this.submiting = false;
    },
    submitOrderHandler() {
      let msg = {
        OrderId: 0,
        TCID: this.order.order.tcid,
        CustomerType: 4,
        GroupType: 1,
        ContactName: this.userInfo.Surname + this.userInfo.Name,
        ContactMobile:
          this.userInfo.PhoneCountryStr + " " + this.userInfo.Moblie,
        CustomerId: 0,
        DepartureCityId: this.order.order.startCityId,
        IsIntermodal: this.unionCity ? 1 : 2,
        Unit_Price: this.price.realPrice,
        TC_Price: this.price.realPrice,
        ManNum: this.chosenObj.crCount,
        ChirdNum: this.chosenObj.etCount,
        ChirdNeedBedNum: this.chosenObj.etzcCount,
        BabyNum: this.chosenObj.yeCount,
        OldPeopleNum: 0,
        SingleRoomNum: this.chosenObj.df,
        PreferPrice: this.sumPrice,
        DiscountMoney: this.price.discountPrice,
        CouponAllotIds: this.CouponIds.join(","),
        YSeatNum: this.chosenObj.crCount + this.chosenObj.etCount,
        ESeatNum: 0,
        FSeatNum: 0,
        Commission: 0, //todo 提成
        ClientSource: 3,
        BrandId: 0,
        TradeWay: 0,
        PlatformOrder: "",
        GuestNum: this.chosenObj.crCount + this.chosenObj.etCount +this.chosenObj.yeCount,
        IsChildrenTour: this.price.isSupportChildren,
        IsBirdDiscount: 2,
        PredictRoomNum:
          parseFloat(
            this.chosenObj.crCount +
              this.chosenObj.etzcCount -
              this.chosenObj.df
          ) /
            2.0 +
          this.chosenObj.df,
        BigRoomNum: 0,
        TripleRoomNum: 0,
        TradeDate: date.formatDate(new Date(), "YYYY-MM-DD"),
        CostType: 0,
        MinOrderPrice: 0,
        Remarks: this.chosenObj.remark,
        VisaNum:
          this.chosenObj.crCount +
          this.chosenObj.etCount +
          this.chosenObj.yeCount,
        SafeNum:
          this.chosenObj.crCount +
          this.chosenObj.etCount +
          this.chosenObj.yeCount,
        AirticketNum: 0,
        ReturnArriveCityId:
          this.unionCity && this.unionCity.backFlight
            ? this.unionCity.backFlight.arrivalCityId
            : this.trip.returnArriveCityId,
        IsReturnIntermodal: this.unionCity && this.unionCity.backFlight ? 1 : 2,
        GoCityTime:
          this.unionCity && this.unionCity.goFlight
            ? this.unionCity.goFlight.startDate
            : "",
        BackCityTime:
          this.unionCity && this.unionCity.backFlight
            ? this.unionCity.backFlight.startDate
            : "",
        ScenicRefundArr: [],
        CommissionSharePeople: 0,
        CommissionShareMoney: 0,
        OrderSource: 3,
        RedEnvelopeMoney: 0,
      };
      this.apipost(
        "sellorder_post_SetOrderInfoForB2B",
        msg,
        (res) => {
          if (res.data.resultCode == 1) {
            if (this.isUpdateUserInfo) {
              this.setUserInfoHandler();
            }
            if (this.isCreateGuest) {
              this.uploadGuests(0, res.data.data.OrderId);
            } else {
              this.submitB2COrderHandler(res.data.data.OrderId);
            }
          } else {
            this.$message.error(res.data.message);
            this.submiting = false;
          }
        },
        (err) => {
          this.submiting = false;
        }
      );
    },
    uploadGuests(i, orderId) {
      let currentGuest = this.guests[i];
      currentGuest.OrderId = orderId;
      currentGuest.TCID = this.order.order.tcid;
      this.apipost(
        "sellorder_post_SetTravelGuestInfo_V2",
        currentGuest,
        (r) => {
          console.log(r);
          if (i < this.guests.length - 1) {
            i++;
            this.uploadGuests(i, orderId);
          } else {
            this.submitB2COrderHandler(orderId);
          }
        }
      );
    },
    submitB2COrderHandler(orderId) {
      let guestInfo = `成人x${this.chosenObj.crCount}; `;
      if (this.chosenObj.etzcCount > 0) {
        guestInfo += `佔床兒童x${this.chosenObj.etzcCount}; `;
      }
      if (this.chosenObj.etbzcCount > 0) {
        guestInfo += `不佔床兒童x${this.chosenObj.etbzcCount}; `;
      }
      if (this.chosenObj.yeCount > 0) {
        guestInfo += `嬰兒x${this.chosenObj.yeCount}; `;
      }
      if (this.chosenObj.df > 0) {
        guestInfo += `單房x${this.chosenObj.df}; `;
      }
      if (this.chosenObj.visaPrice > 0) {
        guestInfo += `簽證x${
          this.chosenObj.crCount +
          this.chosenObj.etCount +
          this.chosenObj.yeCount
        }; `;
      }
      if (this.chosenObj.safeMoney > 0) {
        guestInfo += `旅行保險x${
          this.chosenObj.crCount +
          this.chosenObj.etCount +
          this.chosenObj.yeCount
        };`;
      }
      let msg = {
        SurName: this.userInfo.Surname,
        Name: this.userInfo.Name,
        ContactNumber:
          this.userInfo.PhoneCountryStr + " " + this.userInfo.Moblie,
        Mailbox: this.userInfo.Mailbox,
        GoodsId: this.order.order.tcid,
        GoodsName: this.trip.title,
        GoodsPic: this.trip.imgCover[0].Url,
        GoodsType: this.productType,
        OrderMake: `${
          this.unionCity && this.unionCity.goFlight
            ? this.unionCity.goFlight.startDate
            : this.price.startDate
        }從${
          this.unionCity ? this.unionCity.cityName : this.trip.startCityName
        }出發 ${guestInfo}`,
        TotalPrice: this.sumPrice,
        PreferentialPrice: this.price.discountPrice,
        ErpOrderId: orderId,
        Country: this.userInfo.Country,
        PlatformTax: 0,
        Income: 0,
        Refund: 0,
      };
      this.apipost("AddOrderInfo_post", msg, (r) => {
        if (r.data.resultCode == 1) {
          this.$message.success("訂單創建成功");
          this.goPayHandler(r.data.data);
        } else {
          this.$message.error(r.data.message);
        }
      });
    },
    getProductTypeHandler() {
      return (
        this.price.teamType == 0
          ? ProductTypeEnum.TEAM_TRIP
          : this.price.teamType == 2
          ? ProductTypeEnum.ONE_DAY
          : ProductTypeEnum.UNIT_TRIP
      ).value;
    },
    goPayHandler(pay) {
      // let key = this.$md5(JSON.stringify(pay));
      // let pays = localStorage.getItem("pays");
      // pays = pays ? JSON.parse(pays) : [];
      // pays.push({
      //   key,
      //   pay,
      // });
      // localStorage.setItem("pays", JSON.stringify(pays));
      let lineCars = localStorage.getItem("lineCars");
      lineCars = lineCars ? JSON.parse(lineCars) : [];
      let i = lineCars.findIndex((x) => x.key == this.orderKey);
      if (i >= 0) {
        lineCars.splice(i, 1);
        localStorage.setItem("lineCars", JSON.stringify(lineCars));
      }
      this.CommonJump("/pay/" + pay.OrderNo, {});
    },
    GUID() {
      return "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
        var r = (Math.random() * 16) | 0,
          v = c == "x" ? r : (r & 0x3) | 0x8;
        return v.toString(16);
      });
    },
    async formValidateHandler(formName) {
      let temp = this.$refs[formName];
      let formObj = temp instanceof Array ? temp[0] : temp;
      return formObj.validate();
    },
    goScrollToForm(formName) {
      let temp = this.$refs[formName];
      let formObj = temp instanceof Array ? temp[0] : temp;
      window.scrollTo(0, formObj.offsetTop);
    },
    checkParamsHandler() {
      try {
        if (this.$route.params && this.$route.params.id) {
          let key = this.$route.params.id;
          let lineCars = localStorage.getItem("lineCars");
          lineCars = lineCars ? JSON.parse(lineCars) : [];
          if (lineCars.length > 0) {
            this.order = lineCars.find((x) => x.key == key);
            console.log(this.order);
            if (this.order) {
              this.chosenObj = this.order.order.orderInfo;
              this.orderKey = key;
            }
          }
        }
      } catch (error) {
        console.log(error);
      }
      if (this.orderKey == "") {
        setTimeout(() => {
          location.href = location.origin;
        }, 3000);
      }
      return this.orderKey != "";
    },
    changeDiscountHandler(coupon) {
      if (coupon) {
        this.price.discountPrice = coupon.discountMoney;
        this.CouponIds = [coupon.couponId];
      } else {
        this.price.discountPrice = 0;
        this.CouponIds = [];
      }
      console.log(this.price);
      this.calcMoney();
      this.$forceUpdate();
    },
    calcMoney() {
      let money = this.price.originalB2CPrice * this.chosenObj.crCount;
      this.price.discountPrice = this.price.discountPrice
        ? this.price.discountPrice
        : 0;
      money +=
        (this.price.originalB2CPrice -
          this.price.childNoNeedPrice +
          this.price.babyChargePrice) *
        this.chosenObj.etbzcCount;
      money +=
        (this.price.originalB2CPrice +
          this.price.childNeedPrice +
          this.price.babyChargePrice) *
        this.chosenObj.etzcCount;
      money += this.price.babyPrice * this.chosenObj.yeCount;
      money += this.price.singleRoomPrice * this.chosenObj.df;

      let sumCount = this.chosenObj.crCount + this.chosenObj.etCount;
      money += this.price.visaPrice * sumCount;
      money += this.price.safeMoney * sumCount;
      money += this.price.otherPrice * sumCount;
      this.sumPrice = money;
    },
    changeRoomHandler() {
      let currentSign = this.guests.filter((x) => x.IsSignRoom);
      this.disableSign = currentSign == this.chosenObj.df;
    },
    initGuestHandler() {
      for (let i = 0; i < this.chosenObj.crCount; i++) {
        let obj = JSON.parse(JSON.stringify(this.guest));
        obj.GuestType = 1;
        obj.FormatTypeName = `成人 ${i + 1}：`;
        if (this.chosenObj.df > 0) {
          obj.EnableSignRoom = true;
        }
        obj.IsBed = 1;
        obj.IdCard = this.GUID();
        this.guests.push(obj);
      }
      for (let i = 0; i < this.chosenObj.etzcCount; i++) {
        let obj = JSON.parse(JSON.stringify(this.guest));
        obj.GuestType = 2;
        obj.FormatTypeName = `儿童占床 ${i + 1}：`;
        if (this.chosenObj.df > 0) {
          obj.EnableSignRoom = true;
        }
        obj.IsBed = 1;
        obj.IdCard = this.GUID();
        this.guests.push(obj);
      }
      for (let i = 0; i < this.chosenObj.etbzcCount; i++) {
        let obj = JSON.parse(JSON.stringify(this.guest));
        obj.GuestType = 3;
        obj.FormatTypeName = `儿童不占床 ${i + 1}：`;
        obj.IsBed = 0;
        obj.IdCard = this.GUID();
        this.guests.push(obj);
      }
      for (let i = 0; i < this.chosenObj.yeCount; i++) {
        let obj = JSON.parse(JSON.stringify(this.guest));
        obj.GuestType = 4;
        obj.FormatTypeName = `婴儿 ${i + 1}：`;
        obj.IsBed = 0;
        obj.IdCard = this.GUID();
        this.guests.push(obj);
      }
    },
    initCountry() {
      this.apipost("GetCountryInfo_post", {}, (r) => {
        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})`;
        });
        this.userInfo.Country =
          this.userInfo.Country == 0
            ? this.countrys[0].ID
            : this.userInfo.Country;
        this.changeCountry(this.userInfo.Country);
      });
    },
    changeCountry(id) {
      this.userInfo.PhoneCountry = this.areaCodes.find(
        (x) => x.ID == id
      ).PhoneCode;
      this.userInfo.PhoneCountryStr = "+" + this.userInfo.PhoneCountry;
    },
    getUserInfoHandler() {
      let u = this.$user.userInfo;
      if (u) {
        this.apipost("GetCustomerInfo_post", { Id: u.id }, (r) => {
          if (r.data.resultCode == 1) {
            console.log(r.data.data);
            this.userInfo = r.data.data;
          } else {
            this.$user.userInfo = null;
          }
          this.initCountry();
        });
      }
    },
    setUserInfoHandler() {
      this.apipost("UpdateUserInfo_post", this.userInfo, (r) => {});
    },
    getTripData() {
      this.$q.loading.show();
      let msg = {
        cityId: this.order.order.startCityId,
        preview: 0,
        tcid: this.order.order.tcid,
        teamType: 0,
        isGetPriceFlight: true,
        pType: 1, //类型 1 来源B2C
        newConfigId: this.order.order.configId, //列表里的configId
      };
      this.apipost(
        "b2b_get_GetB2BTravelInfoV1",
        msg,
        (r) => {
          if (r.data.resultCode == 1) {
            this.trip = r.data.data;
            this.trip.imgCover = JSON.parse(this.trip.imgCover);

            this.price = this.trip.currentPriceInfo;
            this.price.realPrice = this.price.originalB2CPrice;
            if (
              this.order.order.startCityId &&
              this.order.order.startCityId != this.trip.startCityId
            ) {
              this.unionCity = this.price.unionCityList.find(
                (x) => x.cityId == this.order.order.startCityId
              );
              if (
                this.unionCity.backFlight &&
                this.unionCity.backFlight.addPrice
              ) {
                this.price.originalB2CPrice +=
                  this.unionCity.backFlight.addPrice;
              }
              if (this.unionCity.goFlight && this.unionCity.goFlight.addPrice) {
                this.price.originalB2CPrice += this.unionCity.goFlight.addPrice;
              }
            }
            this.calcMoney();
            this.productType = this.getProductTypeHandler();
          } else {
            this.$q.notify({
              type: "negative",
              message: r.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
          this.$q.loading.hide();
        },
        null
      );
    },
  },
};
</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, 0.04) !important;
}
</style>
