<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-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" />
            <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.mail"
                  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" ref="passengerInformation">旅客資料</div>
  
            <div class="row">
              <vue-core-video-players
                v-if="details.videoStr"
                ref="video"
                :src="details.videoStr"
                :title="details.title"
                :muted="true"
                :autoplay="false"
                @play="playHandler"
                @pause="pauseHandler"
                @seeked="seekedChangeHandler"
                @timeupdate="timeChangeHandler"
                logo="../statics/img/transparent_logo.png"
                :loop="false"
                id="trip_video"
                class="rounded-borders"
                style="width: 80px"
              />
              <q-img
                v-else
                :src="details?details.imgCover[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">
                  {{details.Name}}
                </div>
                <div class="text-caption text-grey-6 ellipsis q-mt-sm">
                  {{details.Description}}
                </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>{{calculationAmount.startDate}}</span>
              </div>
              <div class="text-grey-9 q-ml-md">
                <q-icon name="iconfont iconjiaotong" size="20px" class="q-mr-sm" />
                <span class="q-mr-sm" v-if="chosenObj.Count > 0"
                  >{{CarObj.CarName}} x {{ chosenObj.Count }}辆 </span
                >
                <span class="q-mr-sm"
                  >({{CarObj.PeopleNum}}人/辆)</span
                >
              </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"
            >
              <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.SurName"
                    label="本國姓"
                    placeholder="例：張"
                    :rules="[(val) => !!val || '請輸本國姓']"
                    ref="SurName"
                  />
                </div>
                <div :class="filedGuestWidth">
                  <q-input
                    standout
                    v-model="parameters.Name"
                    label="本國名"
                    placeholder="例：三"
                    :rules="[(val) => !!val || '請輸本國名']"
                    ref="Name"
                  />
                </div>
                <div :class="filedGuestWidth">
                  <q-input
                      standout
                      v-model="parameters.ContactWay"
                      label="联络方式"
                      placeholder="例：WeChat"
                      :rules="[(val) => !!val || '請輸联络方式']"
                      ref="ContactWay"
                      mask="X"
                      reverse-fill-mask
                  >
                  </q-input>
              </div>
                <div :class="filedGuestWidth">
                  <q-input
                      standout
                      v-model="parameters.Mobile"
                      label="電話"
                      :rules="[(val) => !!val && val.length == 11 || '請輸正確電話']"
                      ref="Mobile"
                      mask="#"
                      reverse-fill-mask
                  >
                      <template v-slot:prepend>
                      <div class="text-subtitle2">+{{ userInfo.areaCode }}</div>
                      </template>
                  </q-input>
              </div>
              <div :class="filedGuestWidth">
                  <div class="row items-center q-mt-md">
                    <span>選擇性別：</span>
                    <q-radio
                      v-model="parameters.Sex"
                      dense
                      :val="1"
                      label="男"
                      class="q-mr-lg"
                    />
                    <q-radio v-model="parameters.Sex" dense :val="2" label="女" />
                  </div>
                </div>
              </div>
            </div>
            <template v-if="details.CarType!=3">
              <div class="text-subtitle1 text-weight-bolder q-my-md">{{details.CarType==1?'抵達':'起飛'}} 班机資料</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.AirportTerminal"
                      label="航廈"
                      placeholder="例：航廈"
                      :rules="[(val) => !!val || '請輸航廈']"
                      ref="AirportTerminal"
                      readonly>
                      <q-popup-proxy :offset="[0, 10]" ref="qDateProxy7">
                        <q-input type="textarea" dense standout autofocus 
                        v-model="parameters.AirportTerminal" placeholder="請輸航廈" /> 
                      </q-popup-proxy>
                    </q-input>
                  </div>
                  <div :class="filedGuestWidth">
                    <q-input
                      standout
                      v-model="parameters.AirLine"
                      label="航空公司"
                      placeholder=""
                      :rules="[(val) => !!val || '請輸航空公司名稱']"
                      ref="AirLine"
                      readonly>
                      <q-popup-proxy :offset="[0, 10]" ref="qDateProxy8">
                        <q-input type="textarea" dense standout autofocus 
                        v-model="parameters.AirLine" placeholder="請輸航空公司名稱" /> 
                      </q-popup-proxy>
                    </q-input>
                  </div>
                  <div :class="filedGuestWidth">
                      <q-input
                        standout
                        v-model="parameters.FlightNumber"
                        label="航班編號"
                        placeholder="例：CA123"
                        :rules="[(val) => !!val || '請輸航班編號']"
                        ref="FlightNumber"
                        mask="X"
                        reverse-fill-mask
                      />
                  </div>
                  <div :class="filedGuestWidth">
                      <q-input
                        class="q-pb-md"
                        standout
                        :value="!flightTime?'':parameters.FlightTime"
                        :label="`航班${details.CarType==1?'抵達':'起飛'}時間`"
                        :rules="[(val) => !!val || `請选航班${details.CarType==1?'抵達':'起飛'}時間`]"
                        ref="FlightTime"
                      >
                        <template v-slot:append>
                          <q-icon name="event" class="cursor-pointer"></q-icon>
                        </template>
                        <q-popup-proxy :offset="[0, 0]" ref="qDateProxy1">
                          <div class="row">
                              <!-- <q-date
                              mask="YYYY-MM-DD HH:mm"
                              :title="$t('search_date_begin')"
                              subtitle="選擇"
                              v-model="parameters.FlightTime"
                              :options="optionsFn" 
                              />
                              <div class="q-px-sm"></div> -->
                              <q-time format24h v-model="flightTime" mask="HH:mm" 
                              @input="getTime(1)"/>
                          </div>
                        </q-popup-proxy>
                      </q-input>
                  </div>
                </div>
              </div>
            </template>
            
            <div class="text-subtitle1 text-weight-bolder q-my-md">
              {{details.CarType==1?'接机':details.CarType==2?'送机':'包车'}}資料
            </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="!getBusTime?'':parameters.OrderDate"
                      label="接駁日期"
                      :rules="[(val) => !!val || '請选接駁日期']"
                      ref="OrderDate"
                    >
                      <template v-slot:append>
                        <q-icon name="event" class="cursor-pointer"></q-icon>
                      </template>
                      <q-popup-proxy :offset="[0, 0]" ref="qDateProxy2">
                        <div class="row">
                            <q-time format24h v-model="getBusTime" mask="HH:mm" 
                            @input="getTime(2)"/>
                        </div>
                      </q-popup-proxy>
                    </q-input>
                </div>
                <div :class="filedGuestWidth" v-if="details.CarType!=1">
                    <q-input
                      standout
                      v-model="parameters.GetonAddress"
                      label="上車地點"
                      placeholder=""
                      :rules="[(val) => !!val || '請輸上車地點供司機參考']"
                      ref="GetonAddress"
                      readonly>
                      <template v-slot:append>
                        <!-- <q-icon name="iconfont iconaddress" size="20px" class="q-mr-sm" @click="getAddress(1)"/> -->
                      </template>
                      <q-popup-proxy :offset="[0, 10]" ref="qDateProxy5">
                        <q-input type="textarea" dense standout autofocus 
                        v-model="parameters.GetonAddress" placeholder="請輸上車地點供司機參考" /> 
                      </q-popup-proxy>
                    </q-input>
                </div>
                <div :class="filedGuestWidth" v-if="details.CarType!=2">
                  <q-input
                    standout
                    v-model="parameters.GetoffAddress"
                    label="下車地點"
                    placeholder=""
                    :rules="[(val) => !!val || '請輸下車地點供司機參考']"
                    ref="GetoffAddress"
                    readonly>
                    <template v-slot:append>
                      <!-- <q-icon name="iconfont iconaddress" size="20px" class="q-mr-sm" @click="getAddress(2)"/> -->
                    </template>
                    <q-popup-proxy :offset="[0, 10]" ref="qDateProxy6">
                      <q-input type="textarea" dense standout autofocus 
                      v-model="parameters.GetoffAddress" placeholder="請輸下車地點供司機參考" /> 
                    </q-popup-proxy>
                  </q-input>
                </div>
                
              </div>
            </div>
            <div class="text-subtitle1 text-weight-bolder q-my-md">乘客資料</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.ManNum"
                        label="成人數(18-99岁)"
                        @input="getNum"
                        :rules="[(val) => !!val || '請輸成人數']"
                        ref="ManNum"
                        mask="#"
                        reverse-fill-mask
                    />
                </div>
                <div :class="filedGuestWidth">
                    <q-input
                        standout
                        v-model="parameters.ChildNum"
                        label="兒童數(3-17岁)"
                        @input="getNum"
                        mask="#"
                        reverse-fill-mask
                    />
                </div>
                <div :class="filedGuestWidth">
                    <q-input
                        standout
                        v-model="parameters.BabyNum"
                        label="嬰幼兒數(0-2岁)"
                        @input="getNum"
                        mask="#"
                        reverse-fill-mask
                    />
                </div>
                
                </div>
                <template v-if="details.CarType!=3">
                  <div class="text-subtitle1 q-py-md text-weight-bold">行李数量</div>
                  <div class="row q-col-gutter-md">
                  <div :class="filedGuestWidth">
                      <q-input
                          standout
                          v-model="parameters.HandLuggageNum"
                          label="手提行李"
                          mask="#"
                          reverse-fill-mask
                      />
                  </div>
                  <div :class="filedGuestWidth">
                      <q-input
                          standout
                          v-model="parameters.RegisteredLuggageNum"
                          label="托运行李"
                          mask="#"
                          reverse-fill-mask
                      />
                  </div>
                  
                  </div>
                </template>
            </div>
            <div class="text-subtitle1 q-my-md text-weight-bold">特殊需求備註：</div>
            <q-input standout v-model="parameters.Remark" input-style="height:170px;" type="textarea"  placeholder="此欄位僅限資料備註。不在商品規範內的個人需求，不保證提供" maxlength="200" counter />
          </q-card>
        </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">
              <vue-core-video-players
                v-if="details.videoStr"
                ref="video"
                :src="details.videoStr"
                :title="details.title"
                :muted="true"
                :autoplay="false"
                @play="playHandler"
                @pause="pauseHandler"
                @seeked="seekedChangeHandler"
                @timeupdate="timeChangeHandler"
                logo="../statics/img/transparent_logo.png"
                :loop="false"
                id="trip_video"
                class="rounded-borders"
                style="width: 80px"
              />
              <q-img
                v-else
                :src="details?details.imgCover[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">
                  {{details.Name}}
                </div>
                <div class="text-caption text-grey-6 ellipsis q-mt-sm">
                  {{details.Description}}
                </div>
              </div>
            </div>
            <div class="q-mt-md text-grey-6">
              <div class="row q-pb-xs no-wrap" v-if="AirportObj&&AirportObj.Name">
                <div style="width: 80px">{{details.CarType==1?'接':'送'}}機機場：</div>
                <div class="q-ml-md ellipsis-2-lines">{{AirportObj.Name}}</div>
              </div>
              <div class="row q-pb-xs no-wrap" v-if="parameters.GetonAddress">
                <div style="width: 80px">上車點：</div>
                <div class="q-ml-md ellipsis-2-lines">{{parameters.GetonAddress}}</div>
              </div>
              <div class="row q-pb-xs no-wrap" v-if="parameters.GetoffAddress">
                <div style="width: 80px">下車點：</div>
                <div class="q-ml-md ellipsis-2-lines">{{parameters.GetoffAddress}}</div>
              </div>
              <div class="row">
                <div style="width: 80px">
                  <!-- 出發日期： -->
                  接駁日期：</div>
                <div class="q-ml-md">
                  {{parameters.OrderDate}}
                  <!-- {{calculationAmount.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.Count>0">
                <div class="col">{{CarObj.CarName}} x {{ chosenObj.Count }}</div>
                <div>CNY {{ moneyFormat(sumPrice,2) }}</div>
              </div>
              <!-- <hr style="border:none;border-top:1px dashed #EEE !important;" class="bg-transparent q-mb-sm" />
              <div class="row q-mb-sm items-center" v-if="(chosenObj.Count)>0">
                <div class="col">總金額</div>
                <div class="text-subtitle2 text-weight-bolder text-primary">CNY {{ moneyFormat(sumPrice,2) }}</div>
              </div> -->
              <hr style="border:none;border-top:1px dashed #EEE !important;" class="bg-transparent q-mb-sm" />
              <div class="row q-mb-sm items-center" v-if="chosenObj.Count>0">
                <div class="col">支付金額</div>
                <div class="text-h6 text-weight-bolder text-primary product-price">CNY {{ moneyFormat(sumPrice,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>
      <q-dialog v-model="isShowDialog">
        <q-card class="q-pa-lg" :style="{'width':$q.platform.is.desktop?'100%':'500px'}">
          <div class="text-h6Detail">
            <span>乘客{{onoffbus==1?'上':'下'}}車範圍</span>
            <i class="iconfont iconbaseline-close-px" @click="isShowDialog=false"></i>
          </div>
          <q-separator />
          <div style="max-height: 600px;padding:20px 0" class="scroll">
            <componentsMap :AddressObj="onCarObj"/>
          </div>
        </q-card>
      </q-dialog>
      <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 '../../components/common/coupon.vue'
  import componentsMap from "../../components/car/Map.vue";
  export default {
    components:{
      coupon,
      componentsMap,
      NoneData,
      auth
    },
    data() {
      return {
        orderKey: "",
        isRangeClick: true,
        isShowDialog: false,
        AddressObj: null,
        onCarObj: null,//上车范围
        unCarObj: null,//下车范围
        CarObj: null,//车型
        AirportObj: null,//机场
        calculationAmount: null,//日期
        calculationNum: null,//数量
        sumPrice: 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: {
          lastName: "",
          firstName: "",
          country: 0,
          phone: "",
          areaCode: "",
          mail: "",
        },
        chosenObj: {},
        isUpdateUserInfo: false,
        countrys: [],
        areaCodes: [],
        loading: false,
        parameters: {
            OrderId: 0,
            OrderType: 0,
            OrderDate:'',//预定日期
            Unit_Price: '',//单价
            Num: '',//数量
            Money: 0.0,
            Sex: 1,//1男2女
            SurName: '',//姓
            Name: '',//名
            Remark: '',
            AirportId: '',
            AirportTerminal: '',//航厦
            AirLine: '',//航空公司名称
            FlightNumber: '',//航班号
            FlightTime: '',//航班时间
            GetonAddress: '',//上车点
            GetoffAddress: '',//下车点
            ManNum: null,//成人数
            ChildNum: null,//儿童数
            BabyNum: null,//婴儿数
            HandLuggageNum: null,//手提行李数量
            RegisteredLuggageNum: null,//托运行李数量
            ContactWay: '',//联络方式 WeChat
            Mobile:'',//电话
            ProductId: '',
            CarId: '',//产品类型ID
            pType: 1,//类型 1来源B2C
        },
        flightTime: null,//航班起飞抵达时间
        getBusTime: null,//预约车时间
        TotalPeople: 0,//总人数
        onoffbus: 1,//1 上车  2下车
        ErpOrderId: 0,//erp订单Id
      };
    },
    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() {
      this.checkParamsHandler()
      this.initCountry();
      this.initGuestHandler();
    },
    methods: {
      checkParamsHandler() {
        try {
          if (this.$route.params && this.$route.params.id) {
            let key = this.$route.params.id;
            let pickuporderCars = localStorage.getItem("pickuporderCars");
            let OrderDate = pickuporderCars ? JSON.parse(pickuporderCars) : null;
            if (OrderDate) {
              this.CarObj = OrderDate.CarObj,//车型
              this.AirportObj = OrderDate.AirportObj,//机场
              this.calculationAmount = OrderDate.calculationAmount,//日期
              this.chosenObj = OrderDate.calculationNum,//数量
              this.sumPrice = OrderDate.sumPrice,//总金额
              this.details = OrderDate.details//产品详情
              this.onCarObj = OrderDate.onCarObj//上车范围
              this.unCarObj = OrderDate.unCarObj//下车范围
              this.parameters.ProductId = this.details.Id
              this.parameters.OrderDate = this.calculationAmount.startDate
              if(this.details.CarType!=3){
                this.parameters.AirportId = this.AirportObj.Id
                this.parameters.FlightTime = this.calculationAmount.startDate
              }
              this.parameters.CarId = this.CarObj.Id
              this.parameters.OrderType = this.details.CarType
              this.parameters.Unit_Price = this.calculationAmount.originalB2CPrice
              this.parameters.Num = this.chosenObj.Count
              this.parameters.Money = this.sumPrice
              if (OrderDate) {
                this.orderKey = key;
              }
              this.$q.loading.hide();
            }
          }
        } catch (error) {
          console.log(error);
        }
        if (this.orderKey == "") {
          setTimeout(() => {

          }, 3000);
        }
        return this.orderKey != "";
      },
      
      submit(){
        let flag = false

        this.$refs.mail.validate()

        this.$refs.SurName.validate()
        this.$refs.Name.validate()
        this.$refs.ContactWay.validate()
        this.$refs.Mobile.validate()
        this.$refs.OrderDate.validate()
        this.$refs.ManNum.validate()
        
        if(this.details.CarType!=3){
          this.$refs.AirportTerminal.validate()
          this.$refs.AirLine.validate()
          this.$refs.FlightNumber.validate()
          this.$refs.FlightTime.validate()
          if(this.details.CarType!=1){
            this.$refs.GetonAddress.validate()
            flag = !this.$refs.SurName.hasError&& !this.$refs.Name.hasError&& !this.$refs.ContactWay.hasError
            && !this.$refs.Mobile.hasError&& !this.$refs.OrderDate.hasError&& !this.$refs.ManNum.hasError
            && !this.$refs.AirportTerminal.hasError&& !this.$refs.AirLine.hasError&& !this.$refs.FlightNumber.hasError
            && !this.$refs.FlightTime.hasError&& !this.$refs.GetonAddress.hasError&& !this.$refs.mail.hasError
          }else{
            this.$refs.GetoffAddress.validate()
            flag = !this.$refs.SurName.hasError&& !this.$refs.Name.hasError&& !this.$refs.ContactWay.hasError
            && !this.$refs.Mobile.hasError&& !this.$refs.OrderDate.hasError&& !this.$refs.ManNum.hasError
            && !this.$refs.AirportTerminal.hasError&& !this.$refs.AirLine.hasError&& !this.$refs.FlightNumber.hasError
            && !this.$refs.FlightTime.hasError&& !this.$refs.GetoffAddress.hasError&& !this.$refs.mail.hasError
          }
        }else{
          this.$refs.GetonAddress.validate()
          this.$refs.GetoffAddress.validate()
          flag = !this.$refs.SurName.hasError&& !this.$refs.Name.hasError&& !this.$refs.ContactWay.hasError
            && !this.$refs.Mobile.hasError&& !this.$refs.OrderDate.hasError&& !this.$refs.ManNum.hasError
            && !this.$refs.GetonAddress.hasError&& !this.$refs.GetoffAddress.hasError&& !this.$refs.mail.hasError
        }
        if(!flag) return this.goScrollToForm('baseUserInfoTitle')
        this.SetCarOrder()
      },
      goScrollToForm(formName){
        let temp=this.$refs[formName]
        let formObj = temp instanceof Array ? temp[0] : temp
        window.scrollTo(0,formObj.offsetTop)
      },
      SetCarOrder(){
        this.loading = true
        this.apipost(
          "CarSingle_post_SetTYCarOrder",
          this.parameters,
          (r) => {
            // this.$refs.myform.resetValidation()
            if (r.data.resultCode == 1) {
              this.step = 2
              let ErpOrderId = r.data.data.Id
              this.AddOrderInfo(ErpOrderId)
            }else{
              this.$q.notify({
                type: "negative",
                message: r.data.message,
                position: "top",
                timeout: 2000,
              });
              this.loading = false
            }
        })
      },
      AddOrderInfo(ErpOrderId){
        this.apipost(
          "AddOrderInfo_post",
          {
            SurName: this.parameters.SurName,
            Name: this.parameters.Name,
            ContactNumber: this.parameters.Mobile,//	联系电话
            Mailbox: this.userInfo.mail,//邮箱
            GoodsId: this.parameters.ProductId,//商品id
            GoodsName: this.details.Name,//商品名称
            GoodsPic: this.details.imgCover[0],//商品图片
            GoodsType: this.parameters.OrderType,//商品类型（见枚举）
            OrderMake: this.parameters.OrderDate,//订单摘要（例如出行时间）
            TotalPrice: this.parameters.Money,//总价格
            PreferentialPrice: 0,//	优惠总金额
            ErpOrderId: ErpOrderId,//erp订单id
            Country: this.userInfo.country,//国家id
            PlatformTax: 0,//平台税金默认0
            Income: 0,//已收默认0
            Refund: 0,//退款金额默认0
            OrderSource: this.parameters.pType
          },
          (r) => {
            if (r.data.resultCode == 1) {
              this.step = 3
            }else{
              this.$q.notify({
                type: "negative",
                message: r.data.message,
                position: "top",
                timeout: 2000,
              });
            }
            this.loading = false
        })
      },
      // 航班起飞抵达时间
      getTime(type){
        // 1航班时间 2预约时间
        this.onoffbus = type
        if(type==1){
          this.parameters.FlightTime = this.calculationAmount.startDate+' '+this.flightTime
          this.$refs.qDateProxy1.hide()
        }else if(type==2){
          this.parameters.OrderDate = this.calculationAmount.startDate+' '+this.getBusTime
          this.$refs.qDateProxy2.hide()
        }
        
      },
      optionsFn(cd) {
        return (
          cd >=
          date.formatDate(date.addToDate(new Date(), { days: 0 }), "YYYY/MM/DD")
        );
      },
      // 地图上选址
      getAddress(type){
        if(type==1){
          this.AddressObj = this.onCarObj
        }else{
          this.AddressObj = this.unCarObj
        }
        this.isShowDialog = true
      },
      // 计算人数
      getNum(){
        this.TotalPeople = this.parameters.ManNum+this.parameters.ChildNum+this.parameters.BabyNum
      },
      // 音频
      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) {
        //console.log(e)
      },
      //
      seekedChangeHandler(e) {
        //console.log(e)
      },
      initGuestHandler() {
       
      },
      // 初始化国家
      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>
  