<template>
  <div class="fix-height-subpage column no-wrap" v-if="detailsObj">
    <div class="row q-pa-md" style="min-width: 375px; margin: 0 auto" :style="{ width: $q.screen.lt.xl ? '100%' : '1320px' }" :class="{'row':$q.screen.width>=1200 && $q.platform.is.desktop,'column':$q.screen.width<1200 || $q.platform.is.mobile}">
      <div class="col">
        <q-card class="q-pa-md" flat>
          <div class="text-h6 q-mb-md">
            <template v-if="detailsObj.CarType<3">{{ detailsObj.CarType==1?$t('v102.CharteredBus.baochetype1'):$t('v102.CharteredBus.baochetype2') }}</template>
            <template v-else>
                {{ $t('v102.CharteredBus.baochetype3') }}
            </template>{{ $t('v102.CharteredBus.baochexinxi') }}</div>
          <div class="row q-pb-md q-mb-md" style="border-bottom: 1px solid #f1f1f1">
            <div class="q-mr-md">
              <q-img v-if="detailsObj.ImageList&&detailsObj.ImageList.length>0" :src="detailsObj.ImageList[0]" :ratio="16 / 9" spinner-color="grey" spinner-size="50px" width="100px" fit="cover" class="rounded-borders">
                <template v-slot:error>
                  <div class="absolute-full flex flex-center bg-blue-1 text-dark fz12">
                    {{$t('v102.ticket.load')}}
                  </div>
                </template>
              </q-img>
            </div>
            <div class="col">
              <div class="text-subtitle1 text-weight-bolder cursor-pointer" @click="showCardHandler">{{detailsObj.Name}}</div>
              <div class="fz14 text-grey-600">
                {{ $t('v102.CharteredBus.ordertip') }}
              </div>
            </div>
          </div>
          <div>
            <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
              <div class="q-mt-lg" :class="{'column q-mb-md':($q.screen.width<1200 || $q.platform.is.mobile),'row items-center':!($q.screen.width<1200 || $q.platform.is.mobile)}">
                <div class="f12 text-dark" :class="{ 'col-2': $q.platform.is.desktop, 'col-3': $q.platform.is.mobile,'q-mb-md':($q.screen.width<1200 || $q.platform.is.mobile) }">
                  <template v-if="detailsObj.CarType<3">{{ detailsObj.CarType==1?$t('v102.CharteredBus.baochetype1'):$t('v102.CharteredBus.baochetype2') }}</template>
                <template v-else>
                {{ $t('v102.CharteredBus.baochetype3') }}
                </template>{{ $t('v102.CharteredBus.pt') }}：</div>
                <div class="text-subtitle2 text-weight-bolder row">
                  <q-field standout :model-value="SetOutTime" class="text-dark cursor-pointer">
                    <template v-slot:control>
                      <div class="self-center full-width no-outline" tabindex="0">{{ SetOutTime }}</div>
                    </template>
                    <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
                      <q-date v-model="SetOutTime" :options="optionsFn" mask="YYYY-MM-DD" @update:model-value="dateRangeHandler3"></q-date>
                    </q-popup-proxy>
                  </q-field>
                  
                </div>
              </div>
            </div>
            <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
              <div :class="{'column':($q.screen.width<1200 || $q.platform.is.mobile),'row items-center':!($q.screen.width<1200 || $q.platform.is.mobile)}">
                <div class="f12 text-dark" :class="{ 'col-2': $q.platform.is.desktop, 'col-3': $q.platform.is.mobile }">{{ $t('v102.CharteredBus.jc') }}：</div>
                <div class="row items-center col wrap q-mt-md">
                  <div class="q-pa-sm rounded-borders q-mr-md cursor-pointer row items-center" :class="{ 'bg-grey-2': !x.checked, 'bg-primary text-white': x.checked }" @click="changeDetailListHandler(x,1)" v-for="x in AirportTypes">
                      <span>{{ x.AirportName }}</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
              <div :class="{'column':($q.screen.width<1200 || $q.platform.is.mobile),'row items-center':!($q.screen.width<1200 || $q.platform.is.mobile)}">
                <div class="f12 text-dark" :class="{ 'col-2': $q.platform.is.desktop, 'col-3': $q.platform.is.mobile }">{{ $t('v102.CharteredBus.sc') }}：</div>
                <div class="row items-center col wrap q-mt-md">
                  <div class="q-pa-sm rounded-borders q-mr-md q-mb-md cursor-pointer row items-center" :class="{ 'bg-grey-2': !x.checked, 'bg-primary text-white': x.checked }" @click="changeDetailListHandler(x,2)" v-for="x in PlaceTypes">
                      <span>{{ x.Address }}</span>
                  </div>
                </div>
              </div>
            </div> -->
            <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
              <div :class="{'column':($q.screen.width<1200 || $q.platform.is.mobile),'row items-center':!($q.screen.width<1200 || $q.platform.is.mobile)}">
                <div class="f12 text-dark" :class="{ 'col-2': $q.platform.is.desktop, 'col-3': $q.platform.is.mobile }">{{ $t('v102.CharteredBus.tt') }}：</div>
                <div class="row items-center col wrap q-mt-md">
                  <div class="q-pa-sm rounded-borders q-mr-md q-mb-md cursor-pointer row items-center" :class="{ 'bg-grey-2': !x.checked, 'bg-primary text-white': x.checked }" @click="changeDetailListHandler(x,3)" v-for="x in types">
                      <span :style="{'border-right': x.B2BPrice>0?'1px solid #eee':''}" :class="{'q-mr-sm q-pr-sm':x.B2BPrice>0}">{{ x.CarName }}</span>
                      <span v-if="x.B2BPrice>0">{{ x.B2BPrice.toFixed(2) }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
              <div class="row">
                <div class="f12 text-grey-900" :class="{ 'col-2': $q.platform.is.desktop, 'col-3': $q.platform.is.mobile }">{{ $t('v102.CharteredBus.bc') }}：</div>
                <div v-if="isCheck">
                  <template v-for="x in types">
                    <q-input style="width: 100%" v-if="x.checked" class="q-mb-md" @update:model-value="changePeople" v-model="x.num" mask="#" reverse-fill-mask dense standout>
                      <template v-slot:prepend>
                        <q-btn color="primary" size="sm" class="q-px-none" flat icon="remove" @click="addPeople(x, 0)" />
                      </template>
                      <template v-slot:append>
                        <div class="q-mr-sm f12">{{ $t('v102.CharteredBus.unit') }} {{ x.CarName }}</div>
                        <q-btn color="primary" size="sm" class="q-px-none" flat icon="add" @click="addPeople(x, 1)" />
                      </template>
                    </q-input>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </q-card>

        <q-card class="q-pa-md q-mt-lg" flat>
          <div>
            <div class="text-h6 q-mb-md">{{ $t('v102.CharteredBus.gi') }}</div>
            <div class="row items-center">
              <span class="f12 text-grey-900 text-subtitle2 text-weight-bold" :class="{ 'col-2': $q.platform.is.desktop, 'col-3': $q.platform.is.mobile }">{{ $t('v102.CharteredBus.gi') }}：</span>
              <span class="col f12">
                <q-radio v-if="msg.OrderType==1" v-model="msg.OrderType" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="1" :label="$t('v102.CharteredBus.baochetype1')" />
                <q-radio v-if="msg.OrderType==2" v-model="msg.OrderType" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="2" :label="$t('v102.CharteredBus.baochetype2')" />
                <q-radio v-if="msg.OrderType==3" v-model="msg.OrderType" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="3" :label="$t('v102.CharteredBus.baochetype3')" />
              </span>
            </div>
            <div class="bg-light-blue-1 q-pa-md fz14 rounded-borders q-mt-md">
              <div class="text-weight-bold">{{ $t('v102.CharteredBus.detail') }}</div>
              <div class="text-grey-900 q-mt-sm f12">
                {{ detailsObj.Description }}
              </div>
            </div>
            <!-- 航班信息 -->
            <div v-if="detailsObj.CarType!=3">
              <div class="q-mt-md">
                <span class="f12 text-grey-900 text-subtitle2 text-weight-bold">
                  {{$t('v102.CharteredBus.hangban')}}{{detailsObj.CarType==1?$t('v102.CharteredBus.dida'):$t('v102.CharteredBus.chufa')}}{{$t('v102.CharteredBus.xunxi')}}
                </span>
              </div>
              <div class="row items-center q-mt-md text-grey-600 q-mb-md" v-if="$q.platform.is.desktop">
                <div class="col q-mr-md">{{ $t('v102.CharteredBus.sjc.c9') }}</div>
                <div class="col q-mr-md">{{ $t('v102.CharteredBus.sjc.c10') }}</div>
                <div class="col q-mr-md">{{ $t('v102.CharteredBus.sjc.c11') }}</div>
                <div class="col">{{ detailsObj.CarType==1?$t('v102.CharteredBus.sjc.c12'):$t('v102.CharteredBus.sjc.c13') }}</div>
              </div>
              <div style="border-top: 1px dashed #eee" :class="{'row items-center':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
                <q-input dense standout v-model="msg.AirportTerminal" class="col q-mt-md col" :class="{'q-mr-md':$q.platform.is.desktop}" :placeholder="$t('v102.CharteredBus.sjcp.c7')"  :rules="[ val => val && val.length > 0 || ' ']" ref="guestAirportTerminal"/>
                <q-input dense standout v-model="msg.AirLine" class="col q-mt-md" :class="{'q-mr-md':$q.platform.is.desktop}"  :placeholder="$t('v102.CharteredBus.sjcp.c8')" :rules="[ val => val && val.length > 0 || ' ']" ref="guestAirLine"/>
                <q-input dense standout v-model="msg.FlightNumber" class="col q-mt-md" :class="{'q-mr-md':$q.platform.is.desktop}"  :placeholder="$t('v102.CharteredBus.sjcp.c9')" :rules="[ val => val && val.length > 0 || ' ']" ref="guestFlightNumber"/>
                <div class="col">
                  <q-field standout :model-value="msg.FlightTime" class="height text-dark cursor-pointer" ref="guestFlightTime">
                    <template v-slot:control>
                      <div class="self-center full-width no-outline" tabindex="0">
                        <template v-if="msg.FlightTime">{{msg.FlightTime}}</template>
                        <span v-else class="text-grey-6">{{$t('v102.CharteredBus.sjcp.c10') }}</span>
                      </div>
                    </template>
                    <!-- <q-popup-proxy :offset="[0, 10]" ref="qDateProxy2">
                      <q-date v-model="SetOutTime2" :options="optionsFn" mask="YYYY-MM-DD" @update:model-value="dateRangeHandler"></q-date>
                    </q-popup-proxy> -->
                    <q-popup-proxy :offset="[0, 10]" ref="qTimeProxy2">
                      <q-time v-model="timeData2" format24h @update:model-value="dateRangeHandler2"></q-time>
                    </q-popup-proxy>
                  </q-field>
                </div>
                
              </div>
            </div>
            <!-- 接送讯息 -->
            <div>
              <div class="q-mt-md">
                <span class="f12 text-grey-900 text-subtitle2 text-weight-bold">
                  <template v-if="msg.OrderType==1">
                    {{$t('v102.CharteredBus.baochetype1')}}
                  </template>
                  <template v-if="msg.OrderType==2">
                    {{$t('v102.CharteredBus.baochetype2')}}
                  </template>
                  <template v-if="msg.OrderType==3">
                    {{$t('v102.CharteredBus.baochetype2')}}
                  </template>{{$t('v102.CharteredBus.xunxi')}}
                </span>
              </div>
              <div class="row items-center q-mt-md text-grey-600 q-mb-md" v-if="$q.platform.is.desktop">
                <div class="col q-mr-md">{{ $t('v102.CharteredBus.sjc.c5') }}</div>
                <div class="col q-mr-md">{{ $t('v102.CharteredBus.sjc.c6') }}</div>
                <div class="col">{{ $t('v102.CharteredBus.sjc.c8') }}</div>
              </div>
              <div style="border-top: 1px dashed #eee" :class="{'row items-center':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
                <q-input dense standout v-model="msg.GetonAddress" class="col q-mt-md col" :class="{'q-mr-md':$q.platform.is.desktop}" :placeholder="$t('v102.CharteredBus.sjcp.c5')"  :rules="[ val => val && val.length > 0 || ' ']" ref="guestGetonAddress"/>
                <q-input dense standout v-model="msg.GetoffAddress" class="col q-mt-md" :class="{'q-mr-md':$q.platform.is.desktop}"  :placeholder="$t('v102.CharteredBus.sjcp.c6')" :rules="[ val => val && val.length > 0 || ' ']" ref="guestGetoffAddress"/>
                <q-field standout :model-value="msg.OrderDate" class="col text-dark cursor-pointer height" ref="guestTimeData">
                  <template v-slot:control>
                    <div class="self-center full-width no-outline" tabindex="0">
                      <template v-if="msg.OrderDate">{{msg.OrderDate}}</template>
                      <span v-else class="text-grey-6">{{$t('v102.CharteredBus.sjc.c8') }}</span>
                    </div>
                  </template>
                  <q-popup-proxy :offset="[0, 10]" ref="qTimeProxy">
                    <q-time v-model="timeData" format24h @update:model-value="dateRangeHandler"></q-time>
                  </q-popup-proxy>
                </q-field>
              </div>
            </div>
            <!-- 乘客资料 -->
            <div>
              <div class="q-mt-md">
                <span class="f12 text-grey-900 text-subtitle2 text-weight-bold">
                  {{$t('v102.CharteredBus.chengke')}}{{$t('v102.CharteredBus.xunxi')}}
                </span>
              </div>
              <div class="row items-center q-mt-md text-grey-600 q-mb-md" v-if="$q.platform.is.desktop">
                <div class="col q-mr-md">{{ $t('v102.CharteredBus.sjc.c14') }}</div>
                <div class="col q-mr-md">{{ $t('v102.CharteredBus.sjc.c15') }}</div>
                <div class="col q-mr-md">{{ $t('v102.CharteredBus.sjc.c16') }}</div>
                <div class="col q-mr-md">{{ $t('v102.CharteredBus.sjc.c17') }}</div>
                <div class="col">{{ $t('v102.CharteredBus.sjc.c18') }}</div>
              </div>
              <div style="border-top: 1px dashed #eee" :class="{'row items-center':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
                <q-input dense standout v-model="msg.ManNum" mask="#" class="col q-mt-md col" :class="{'q-mr-md':$q.platform.is.desktop}" :placeholder="$t('v102.CharteredBus.sjcp.c11')"  :rules="[ val => val && val.length > 0 || ' ']" ref="guestManNum"/>
                <q-input dense standout v-model="msg.ChildNum"  mask="#"  class="col q-mt-md" :class="{'q-mr-md':$q.platform.is.desktop}"  :placeholder="$t('v102.CharteredBus.sjcp.c12')" :rules="[ val => val && val.length > 0 || ' ']" ref="guestChildNum"/>
                <q-input dense standout v-model="msg.BabyNum"  mask="#" class="col q-mt-md" :class="{'q-mr-md':$q.platform.is.desktop}"  :placeholder="$t('v102.CharteredBus.sjcp.c13')" :rules="[ val => val && val.length > 0 || ' ']" ref="guestBabyNum"/>
                <q-input dense standout v-model="msg.HandLuggageNum" mask="#" class="col q-mt-md" :class="{'q-mr-md':$q.platform.is.desktop}"  :placeholder="$t('v102.CharteredBus.sjcp.c14')" :rules="[ val => val && val.length > 0 || ' ']" ref="guestHandLuggageNum"/>
                <q-input dense standout v-model="msg.RegisteredLuggageNum"  mask="#" class="col q-mt-md" :class="{'q-mr-md':$q.platform.is.desktop}"  :placeholder="$t('v102.CharteredBus.sjcp.c15')" :rules="[ val => val && val.length > 0 || ' ']" ref="guestRegisteredLuggageNum"/>
                
              </div>
            </div>
            <!-- 联络讯息 -->
            <div>
              <div class="q-mt-md">
                <span class="f12 text-grey-900 text-subtitle2 text-weight-bold">
                  <!-- <template v-if="msg.OrderType==1">
                    {{$t('v102.CharteredBus.baochetype1')}}
                  </template>
                  <template v-if="msg.OrderType==2">
                    {{$t('v102.CharteredBus.baochetype2')}}
                  </template>
                  <template v-if="msg.OrderType==3">
                    {{$t('v102.CharteredBus.baochetype2')}}
                  </template> -->
                  {{$t('v102.CharteredBus.lianluo')+$t('v102.CharteredBus.xunxi')}}
                </span>
              </div>
              <div class="row items-center q-mt-md text-grey-600 q-mb-md" v-if="$q.platform.is.desktop">
                <div class="col-7 q-mr-md">{{ $t('v102.CharteredBus.sjc.c1') }}</div>
                <div class="col q-mr-md">{{ $t('v102.CharteredBus.sjc.c2') }}</div>
                <!-- <div class="col q-mr-md">{{ $t('v102.CharteredBus.sjc.c4') }}</div> -->
                <div class="col-2">{{ $t('v102.CharteredBus.sjc.c3') }}</div>
              </div>
              <div style="border-top: 1px dashed #eee" :class="{'row items-center':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
                <div class="col-7 row">
                  <q-input dense standout v-model="msg.SurName" class="col q-mt-md col" :class="{'q-mr-md':$q.platform.is.desktop}" :placeholder="$t('v102.CharteredBus.sjcp.c1')"  :rules="[ val => val && val.length > 0 || ' ']" ref="guestSurName"/>
                  <q-input dense standout v-model="msg.Name" class="col q-mt-md col" :class="{'q-mr-md':$q.platform.is.desktop}" :placeholder="$t('v102.CharteredBus.sjcp.c1m')"  :rules="[ val => val && val.length > 0 || ' ']" ref="guestName"/>
                </div>
                <q-input dense standout v-model="msg.Mobile" class="col q-mt-md" :class="{'q-mr-md':$q.platform.is.desktop}"  :placeholder="$t('v102.CharteredBus.sjcp.c2')" :rules="[ val => val && val.length == 11 || ' ']" ref="guestMobile"/>
                <!-- <q-input dense standout v-model="msg.ContactWay" class="col q-mt-md" :class="{'q-mr-md':$q.platform.is.desktop}"  :placeholder="$t('v102.CharteredBus.sjcp.c4')" :rules="[ val => val && val.length >0 || ' ']" ref="guestContactWay"/> -->
                <div class="col-2 q-mr-md">
                  <q-radio v-model="msg.Sex" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="1" :label="$t('v102.ticket.sex.man')" />
                  <q-radio v-model="msg.Sex" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="2" :label="$t('v102.ticket.sex.women')" />
                </div>
              </div>
            </div>
            <div class="q-mt-md">
              <q-input v-model="msg.Remark" standout autogrow :label="$t('v102.ticket.or') " />
            </div>
          </div>
        </q-card>

        <div class="q-mt-lg" v-if="!($q.screen.width<1200 || $q.platform.is.mobile)">
          <div class="bg-orange-1 q-pa-md rounded-borders fz14" style="border: 1px dashed orange">
            <div class="text-weight-bold">{{ $t('v102.ticket.d5') }}</div>
            <div class="text-grey-700 q-mt-sm">
              {{detailsObj.BuyNotes}}
            </div>
          </div>
        </div>
      </div>

      <div class="" :class="{'q-ml-lg':!($q.screen.width<1200 || $q.platform.is.mobile),'q-mt-lg':($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)?'100%':'300px'}">
          <div class="text-h6 text-grey-900">{{ $t('v102.ticket.st') }}</div>
          <div class="q-mt-md q-mb-lg">
            <div class="bg-red-1 q-pa-sm rounded-borders fz14" style="border: 1px dashed var(--q-negative)">
              <div class="text-grey-900 text-subtitle2 text-weight-bold">{{ $t('v102.CharteredBus.rtt') }}</div>
              <div class="text-grey-700 q-mt-sm f12">
                {{ detailsObj.CancelPolicy }}
              </div>
            </div>
          </div>
          <div class="q-pt-md q-mb-lg" style="border-top: 1px dashed #eee">
            <div class="text-grey-900 text-subtitle2 text-weight-bold">{{ $t('v102.ticket.ms') }}</div>
            <div v-if="isCheck">
              <template v-for="x in types">
                <div class="row items-center q-mt-md" v-if="x.checked">
                  <q-badge color="grey-3" style="padding: 5px 8px" text-color="info" :label="x.CarName" />
                  <div class="col f12 text-right">
                    {{x.B2BPrice.toFixed(2)}} x {{x.num}}{{ $t('v102.ticket.unit') }}
                  </div>
                </div>
              </template>
            </div>
            <div v-else class="text-center text-grey-600 q-py-lg">{{ $t('v102.CharteredBus.nt') }}</div>
          </div>
          <div class="q-pt-md q-mb-lg text-right" style="border-top: 1px dashed #eee">
            <span class="f12 text-dark q-mr-md">
              {{ $t('v102.ticket.ds') }}：
            </span>
            <span class="text-h6 text-negative">
              {{ msg.Money.toFixed(2) }}
            </span>
          </div>
          <div class="text-right">
            <q-btn color="primary" unelevated class="q-px-lg" :disable="!isCheck" :label="$t('v102.ticket.sb')" @click="submit"/>
          </div>
        </div>
      </div>

      <div class="q-mt-lg" v-if="($q.screen.width<1200 || $q.platform.is.mobile)">
          <div class="bg-orange-1 q-pa-md rounded-borders fz14" style="border: 1px dashed orange">
            <div class="text-weight-bold">{{ $t('v102.ticket.d5') }}</div>
            <div class="text-grey-700 q-mt-sm">
              {{detailsObj.BookingInfo}}
            </div>
          </div>
        </div>
    </div>
  </div>
  <q-dialog v-model="showDetails">
    <CharteredBusCard :ProductId="ProductId"></CharteredBusCard>
  </q-dialog>
</template>

<script lang="ts">
import { useRouter } from 'vue-router'
import { ApiResult } from 'src/@types/enumHelper'
import TicketService from '../../api/CharteredBus'
import message from '../../utils/message'
import { currentRouter } from 'src/router'
import { ref, inject, provide, reactive, toRefs, defineComponent, watch } from 'vue'
import useMetaModule from '../../module/meta/metaModule'
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from '../../config/dictionary'
import CharteredBusCard from '../../components/CharteredBus/CharteredBusCard.vue'
import CharteredBusService from '../../api/CharteredBus'
import { date } from 'quasar'
export default defineComponent({
  components: { CharteredBusCard },
  setup(props) {
    const $router = useRouter()
    let { setTitle } = useMetaModule()
    const { t } = useI18n()
    const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
    pageTitle.value = t('v102.ticket.preview.pageTitle')
    setTitle(pageTitle.value)

    const data = reactive({
      SetOutTime2: '',
      timeData2: ref('19:42'),
      timeData: ref('19:42'),
      showDetails: false,
      loading: false,
      msg: {
        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: '',//成人数
        ChildNum: '',//儿童数
        BabyNum: '',//婴儿数
        HandLuggageNum: '',//手提行李数量
        RegisteredLuggageNum: '',//托运行李数量
        ContactWay: '',//联络方式 WeChat
        Mobile:'',//电话
        ProductId: '',
        CarId: '',//产品类型ID



        MailingState: '1',//邮寄状态 1自取 2邮寄
        MailingAddress: '',//MailingState =2 填写邮寄
        
        Name:'',
        EName:'',
        
        Birthday: '',
        
        CouponsId:'',//景点id
        DetailList:[] as any,
      },
      types: [],
      AirportTypes: [],
      PlaceTypes: [],
      isCheck: false,
      SetOutTime: '',
      detailsObj: {} as any,
    })
    const qDateProxy = ref(null) as any
    const qDateProxy2 = ref(null) as any
    const qTimeProxy = ref(null) as any
    const qTimeProxy2 = ref(null) as any
    // 上下车
    const guestGetonAddress = ref(null) as any
    const guestGetoffAddress = ref(null) as any
    const guestTimeData = ref(null) as any
    // 航班信息
    const guestAirportTerminal = ref(null) as any
    const guestAirLine = ref(null) as any
    const guestFlightNumber = ref(null) as any
    const guestFlightTime = ref(null) as any
    // 验证乘客数
    const guestManNum = ref(null) as any
    const guestChildNum = ref(null) as any
    const guestBabyNum = ref(null) as any
    // 行李数
    const guestHandLuggageNum = ref(null) as any
    const guestRegisteredLuggageNum = ref(null) as any
    // 联络信息
    const guestSurName = ref(null) as any
    const guestName = ref(null) as any
    const guestMobile = ref(null) as any
    const guestContactWay = ref(null) as any
    let time = currentRouter.currentRoute.value.params.Time
    data.SetOutTime = time.substring(0,4)+'-'+time.substring(4,6)+'-'+time.substring(6,8)
    
    data.msg.ProductId = currentRouter.currentRoute.value.params.ProductId
    data.ProductId = data.msg.ProductId 
    const menu = inject(DirtionmaryHelper.MENU_KEYS) as any
    menu.value = 8
    const methods = {
      dateRangeHandler(e: any){
        data.msg.OrderDate = data.SetOutTime+' '+data.timeData
        if (qTimeProxy.value) qTimeProxy.value.hide()
      },
      dateRangeHandler2(e: any){
        data.msg.FlightTime = data.SetOutTime+' '+data.timeData2
        if (qTimeProxy2.value) qTimeProxy2.value.hide()
      },
      dateRangeHandler3(e: any) {
        if (qDateProxy.value) qDateProxy.value.hide()
        if(data.types.findIndex(x => x.checked)>-1) methods.getQuotation()
      },
      // 获取报价
      getQuotation(){
        let param = {
          AirportId: data.msg.AirportId,
          CarTypeId: data.msg.CarId,
          Month: data.SetOutTime,
          ProductId:data.msg.ProductId,
        }
        CharteredBusService.GetTYCarSingleProductMonthPrice(param)
          .then(r => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              let newData = r.data.data.filter(x=>x.Date==data.SetOutTime)
              let types = data.types.filter(x => x.checked)
              data.types.forEach((item:any,index:Number) => {
                if(types[0].Id==item.Id&&newData[0].Price>0){
                  item.B2BPrice = newData[0].Price
                  data.msg.Unit_Price = newData[0].Price
                }
              });
              if(data.isCheck){
                methods.calcMoneyHandler()
              }else{
                data.msg.Money=0.0
              }
            } else {
              message.errorMsg(r.data.message)
            }
          }).catch(e => {
            message.errorMsg(e.message)
            data.isCheck = false
          })
      },
      getInfo(value:String, reason:any, details:any){
        let param = {
          ProductId:data.msg.ProductId,
        }
        CharteredBusService.GetTYCarSingleProductInfo(param)
          .then(r => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              data.detailsObj = r.data.data
              data.msg.OrderType = String(data.detailsObj.CarType)
              let addList = function (arr) {
                  arr.forEach(item => {
                    item.checked = false
                    item.num = 1
                    item.B2BPrice = 0
                  });
              };
              addList(r.data.data.AirportList);
              addList(r.data.data.PlaceList);
              addList(r.data.data.CarTypeList);
              data.AirportTypes = r.data.data.AirportList
              data.PlaceTypes = r.data.data.PlaceList
              data.types = r.data.data.CarTypeList
              if(data.types&&data.types.length==0){
                message.errorMsg(`${t('v102.ticket.nobj')}`)
              }
            } else {
              message.errorMsg(r.data.message)
            }
          }).catch(e => {
            message.errorMsg(e.message)
            data.isCheck = false
          })
      },
      submit(){
        methods.getNum()
        let flag = false
        if(data.detailsObj.CarType!=3){
          guestAirportTerminal.value.validate()
          guestAirLine.value.validate()
          guestFlightNumber.value.validate()
          guestFlightTime.value.validate()
        }

        guestGetonAddress.value.validate()
        guestGetoffAddress.value.validate()
        guestTimeData.value.validate()
        
        guestManNum.value.validate()
        guestSurName.value.validate()
        guestName.value.validate()
        guestMobile.value.validate()
        if(data.detailsObj.CarType!=3){
          if(!data.msg.AirportId){
            message.errorMsg(`${t('v102.CharteredBus.sjc.jc')}`)
            return 
          }
          flag = !guestAirportTerminal.value.hasError && !guestAirLine.value.hasError && !guestFlightNumber.value.hasError && !guestFlightTime.value.hasError && !guestGetonAddress.value.hasError && !guestGetoffAddress.value.hasError && !guestTimeData.value.hasError && !guestManNum.value.hasError && !guestSurName.value.hasError && !guestName.value.hasError && !guestMobile.value.hasError 
          // && !guestContactWay.value.hasError
          
        }else{
          flag = !guestGetonAddress.value.hasError && !guestGetoffAddress.value.hasError && !guestTimeData.value.hasError && !guestManNum.value.hasError && !guestSurName.value.hasError && !guestName.value.hasError && !guestMobile.value.hasError
        }
          if(!flag) return
          if(!data.msg.OrderDate){
            message.errorMsg(`${t('v102.CharteredBus.sjc.c8')}`)
            return 
          }
          if(!data.msg.CarId){
            message.errorMsg(`${t('v102.CharteredBus.sjc.tt')}`)
            return 
          }
          if(data.detailsObj.CarType!=3){
            if(!data.msg.FlightTime){
              message.errorMsg(`${data.detailsObj.CarType==1?t('v102.CharteredBus.sjc.c12'):t('v102.CharteredBus.sjc.c13')}`)
              return 
            }
          }
          if(!data.isCheck) return
          if(data.loading) return
          data.loading = true
          data.types.forEach(x=>{
            if(x.checked){
              data.msg.Unit_Price = x.B2BPrice
              data.msg.Num = x.num
            }
          })
        let param = Object.assign(data.msg)
        CharteredBusService.SetTYCarOrder(param)
          .then(r => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              message.successMsg(`${t('success')}`)
              $router.push({ path:'/vehicle/order' })
            } else {
              message.errorMsg(r.data.message)
            }
            methods.getInfo()
            data.loading = false
          }).catch(e => {
            data.loading = false
            message.errorMsg(e.message)
          })
      },
      showCardHandler() {
        data.showDetails = true
      },
      optionsFn(cd: any) {
        return cd >= date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY/MM/DD')
      },
      changeDetailListHandler(e: any,i: Number) {
        if(i==1){
          data.AirportTypes.forEach(x=>{
            x.checked = false
          })
          e.checked = !e.checked
          let AirportTypes = data.AirportTypes.filter(x => x.checked)
          if(AirportTypes&&AirportTypes[0]){
            data.msg.AirportId = AirportTypes[0].AirportId
          }
          if(data.types.findIndex(x => x.checked) > -1) methods.getQuotation()
        }
        if(i==2){
          data.PlaceTypes.forEach(x=>{
            x.checked = false
          })
          e.checked = !e.checked
        }
        if(i==3){
          data.types.forEach(x=>{
            x.checked = false
          })
          if (e.checked) {
            e.num = 1
          }
          e.checked = !e.checked
          let types = data.types.filter(x => x.checked)
          if(types&&types[0]){
            data.msg.CarId = types[0].Id
          }
          methods.getQuotation()
          data.isCheck = data.types.findIndex(x => x.checked) > -1
        }
      },
      addPeople(item: any, type: any) {
        if (type == 1) {
          item.num++
        } else if (type == 0 && item.num > 1) {
          item.num--
        }
        item.num = item.num != '' ? item.num : '1'
        methods.calcMoneyHandler()
      },
      changePeople(val: string) {
        methods.getNum()
      },
      getNum(){
        data.types.forEach(x=>{
            if(x.num>10){
              x.num = 10
            }
        })
        setTimeout(()=>{
          methods.calcMoneyHandler()
        },50)
      },
      calcMoneyHandler(){
        data.msg.Money=0.0
        data.types.forEach(x=>{
          if(x.checked){
            data.msg.Money+=x.B2BPrice*x.num
          }
        })
      }
    }
    methods.getInfo()

    return {
      ...toRefs(data),
      ...methods,
      qDateProxy,
      qDateProxy2,
      qTimeProxy,
      qTimeProxy2,
      guestGetonAddress,
      guestGetoffAddress,
      guestTimeData,
      guestAirportTerminal,
      guestAirLine,
      guestFlightNumber,
      guestFlightTime,

      guestManNum,
      guestChildNum,
      guestBabyNum,
      guestHandLuggageNum,
      guestRegisteredLuggageNum,

      guestSurName,
      guestName,
      guestMobile,
      guestContactWay
    }
  }
})
</script>

<style scoped>
  :deep(.height.q-field--auto-height .q-field__control){
    min-height: 40px !important;
  }
  :deep(.height.q-field--auto-height .q-field__native){
    min-height: 40px !important;
  }
</style>
