<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">
            <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.ImageList[0]:'https://image.kkday.com/v2/image/get/s1.kkday.com/product_138437/20230217083232_t5rcO/jpg'"
              class="rounded-borders"
              spinner-color="grey-3"
              style="width: 80px"
            />
            <div class="q-ml-md col">
              <div class="text-subtitle1 ellipsis">
                {{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>{{OrderDate.startDate}}</span>
            </div>
            <div class="text-grey-9 q-ml-md" v-if="chosenObj.Count > 0&&CarObj">
              <q-icon name="iconfont iconjiaotong" size="20px" class="q-mr-sm" />
              <span class="q-mr-sm"
                >{{CarObj.CarName}} x {{ chosenObj.Count }}辆 </span
              >
              <span class="q-mr-sm"
                >({{CarObj.PeopleNum}}人/辆)</span
              >
              <template v-if="details.TravelHours>0">
                <q-icon name="iconfont icontime" size="20px" class="q-mr-xs q-ml-sm" />
                <span class="q-mr-sm">
                  {{`包車時長：${details.TravelHours} h`}}
                </span>
              </template>
            </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-date
                            mask="YYYY-MM-DD"
                            :title="$t('search_date_begin')"
                            subtitle="選擇"
                            v-model="getBusTimeDate"
                            :options="optionsFn"
                            @input="getTime(3)"
                            />
                          <div class="q-px-sm"></div> -->
                          <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>
        </q-form>
      </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.ImageList[0]:'https://image.kkday.com/v2/image/get/s1.kkday.com/product_138437/20230217083232_t5rcO/jpg'"
              class="rounded-borders"
              spinner-color="grey-3"
              style="width: 80px"
            />
            <div class="q-ml-md col">
              <div class="text-subtitle1 ellipsis">
                {{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="AirportObj&&AirportObj.Name">
              <div style="width: 80px">{{details.CarType==1?'抵達':'起飛'}}時間：</div>
              <div class="q-ml-md ellipsis-2-lines">{{parameters.FlightTime}}</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}}
              </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&&CarObj">
              <div class="col">{{CarObj.CarName}} x {{ chosenObj.Count }}</div>
              <div>{{details.CurrencyCode}} {{ moneyFormat(OrderDate.originalB2CPrice,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">{{details.CurrencyCode}} {{ moneyFormat(OrderDate.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">{{details.CurrencyCode}} {{ moneyFormat(OrderDate.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 {
      order: null,//订单信息
      orderKey: "",
      isShowDialog: false,
      AddressObj: null,
      onCarObj: null,//上车范围
      unCarObj: null,//下车范围
      CarObj: null,//车型
      AirportObj: 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: "",
      },
      chosenObj: {},
      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
          OrderSource: 1,//类型 0 来源B2B 1 来源B2C
      },
      flightTime: null,//航班起飞抵达时间
      getBusTime: null,//预约车时间
      getBusTimeDate: null,//预约日期
      TotalPeople: 0,//总人数
      onoffbus: 1,//1 上车  2下车
    };
  },
  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.getCarData()
    }
    
    this.initGuestHandler();
    this.getUserInfoHandler()
  },
  methods: {
    // 获取商品详情
    getCarData() {
      this.$q.loading.show();
      this.apipost(
        "b2c_get_GetCarSingleProductDetail",
        { ProductId: this.parameters.ProductId },
        (r) => {
          if (r.data.resultCode == 1) {
            this.details = r.data.data;
            this.CarObj = this.details.CarTypeList.find((x) => this.OrderDate.CarId == x.Id);
            this.onCarObj = this.details.PlaceList.find((x) => this.OrderDate.onCarId == x.Id)//上车范围
            this.unCarObj = this.details.PlaceList.find((x) => this.OrderDate.unCarId == x.Id)//下车范围
            if(this.details.CarType!=3){
              this.AirportObj = this.details.AirportList.find((x) => this.OrderDate.AirportId == x.Id);
              this.parameters.AirportId = this.OrderDate.AirportId
              this.parameters.FlightTime = this.OrderDate.startDate
            }
            this.parameters.CarId = this.OrderDate.CarId
            this.parameters.OrderType = this.details.CarType
          } else {
            this.$q.notify({
              type: "negative",
              message: r.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
          this.$q.loading.hide();
        },
        null
      );
    },
    checkParamsHandler() {
      try {
        if (this.$route.params && this.$route.params.id) {
          let key = this.$route.params.id;
          let pickuporderCars = localStorage.getItem("pickuporderCars");
          pickuporderCars = pickuporderCars ? JSON.parse(pickuporderCars) : [];
          if (pickuporderCars.length > 0) {
            this.order = pickuporderCars.find((x) => x.key == key);
            if (this.order) {
              this.orderKey = key;
              this.OrderDate = this.order.order
              this.chosenObj = this.OrderDate.orderInfo;
              this.parameters.ProductId = this.order.order.Id
              this.parameters.OrderDate = this.OrderDate.startDate
              this.getBusTimeDate = this.OrderDate.startDate
              this.parameters.Unit_Price = this.OrderDate.originalB2CPrice
              this.parameters.Num = this.chosenObj.Count
              this.parameters.Money = this.OrderDate.sumPrice
            }
          }
        }
      } catch (error) {
        console.log(error);
      }
      if (this.orderKey == "") {
        setTimeout(() => {

        }, 3000);
      }
      return this.orderKey != "";
    },
    async submit() {
      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()
        }else{
          this.$refs.GetoffAddress.validate()
        }
      }else{
        this.$refs.GetonAddress.validate()
        this.$refs.GetoffAddress.validate()
      }
      let flag = true
      flag = await this.formValidateHandler('baseUserInfo')
      if(!flag){
        let errorObj = this.$refs.baseUserInfo.getValidationComponents().find(x=>x.innerError)
        window.scrollTo(0,errorObj.$el.offsetTop)
      }else{
        this.SetCarOrder()
      }
    },
    async formValidateHandler(formName){
      let temp=this.$refs[formName]
      let formObj = temp instanceof Array ? temp[0] : temp
      return formObj.validate()
    },
    SetCarOrder(){
      this.loading = true
      this.apipost(
        "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.$message.error(r.data.message)
            this.loading = false
          }
      })
    },
    AddOrderInfo(ErpOrderId){
      let GoodsType = null
      //13接机 14送机 12包车
      if(this.parameters.OrderType==1){
        GoodsType = 13
      }else if(this.parameters.OrderType==2){
        GoodsType = 14
      }else if(this.parameters.OrderType==3){
        GoodsType = 12
      }
      this.apipost(
        "AddOrderInfo_post",
        {
          SurName: this.parameters.SurName,
          Name: this.parameters.Name,
          ContactNumber: this.parameters.Mobile,//	联系电话
          Mailbox: this.userInfo.Mailbox,//邮箱
          GoodsId: this.parameters.ProductId,//商品id
          GoodsName: this.details.Name,//商品名称
          GoodsPic: this.details.ImageList[0],//商品图片
          GoodsType: GoodsType,//商品类型（见枚举） 12包车 13 接机 14送机
          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
        },
        (r) => {
          if (r.data.resultCode == 1) {
            this.step = 3
            this.$message.success("訂單創建成功")
            this.goPayHandler(r.data.data)
          }else{
            this.$message.error(r.data.message)
          }
          this.loading = false
      })
    },
    goPayHandler(pay){
      let 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 pickuporderCars = localStorage.getItem('pickuporderCars')
      pickuporderCars = pickuporderCars?JSON.parse(pickuporderCars):[]
      let i = pickuporderCars.findIndex(x=>x.key==this.orderKey)
      if(i>=0){
        pickuporderCars.splice(i,1)
        localStorage.setItem("pickuporderCars",JSON.stringify(pickuporderCars))
      }
      this.CommonJump('/pay/'+key, {});
    },
    // 航班起飞抵达时间
    getTime(type){
      // 1航班时间 2预约时间
      this.onoffbus = type
      if(type==1){
        this.parameters.FlightTime = this.OrderDate.startDate+' '+this.flightTime
        this.$refs.qDateProxy1.hide()
      }else if(type==2){
        this.parameters.OrderDate = this.OrderDate.startDate+' '+this.getBusTime
        this.$refs.qDateProxy2.hide()
      }else if(type==3){
        this.parameters.OrderDate = this.OrderDate.startDate+' '+this.getBusTime
      }
      
    },
    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() {
     
    },
    // 获取当前用户信息
    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.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>
