<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 v-if="detailsObj.CarType!=3" :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,msg.OrderId)" v-for="x in AirportTypes">
                      <span>{{ x.AirportName }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="msg.OrderType!=1" :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.sjc.c25') }}{{ $t('v102.CharteredBus.d') }}：</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,2)" v-for="x in PlaceTypes">
                      <span class="q-mr-sm q-pr-sm" :style="{'border-right': x.checked?'1px solid #ffffff':'1px solid gray'}">{{ x.Address }}</span>
                      <span>{{ x.Range }} m{{ $t('v102.CharteredBus.fw') }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="msg.OrderType!=2" :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.sjc.c26') }}{{ $t('v102.CharteredBus.d') }}：</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,4)" v-for="x in PlaceTypes2">
                      <span class="q-mr-sm q-pr-sm" :style="{'border-right': x.checked?'1px solid #ffffff':'1px solid gray'}">{{ x.Address }}</span>
                      <span>{{ x.Range }} m{{ $t('v102.CharteredBus.fw') }}</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.baochetype3')}}
                  </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" v-if="msg.OrderType!=1">{{ $t('v102.CharteredBus.sjc.c5') }}</div>
                <div class="col q-mr-md" v-if="msg.OrderType!=2">{{ $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 v-if="msg.OrderType!=1" 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">
                  <template #prepend>
                    <q-icon class="text-red q-mr-xs" name="place" size="xs" @click="openMap(1,GetOnTheBusObj.Address,GetOnTheBusObj.Lng,GetOnTheBusObj.Lat)"></q-icon>
                  </template>
                </q-input>
                <q-input v-if="msg.OrderType!=2" 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">
                  <template #append>
                    <q-icon class="text-red q-mr-xs" name="place" size="xs" @click="openMap(2,GetOffTheBusIdObj.Address,GetOffTheBusIdObj.Lng,GetOffTheBusIdObj.Lat)"></q-icon>
                  </template>
                </q-input>
                <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" v-if="msg.OrderType!=3">{{ $t('v102.CharteredBus.sjc.c17') }}</div>
                <div class="col" v-if="msg.OrderType!=3">{{ $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 v-if="msg.OrderType!=3" 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 v-if="msg.OrderType!=3" 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.CharteredBus.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="`${!msg.OrderId?$t('v102.ticket.sb'):$t('v102.CharteredBus.bianji')}`" @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>
  <q-dialog v-model="showGoogleMap">
    <div class="fix-height-subpage column no-wrap">
      <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}">
          <q-card class="bg-white q-py-lg column" style="max-width: 1366px; min-width: 375px; width: 70%; height: 80vh">
            <div class="q-px-lg q-mb-lg" :class="{ 'row justify-between': $q.platform.is.desktop }">
              <div :class="{ 'row items-center': $q.platform.is.desktop, '': $q.platform.is.mobile }">
                <div class="mobile-only row items-center">
                  <!-- <div class="bg-info text-grey-100 rounded-borders q-mr-sm q-px-md"></div> -->
                  <div class="text-weight-bold fz20 ellipsis" style="width: 280px"><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></div>
                  <q-icon class="text-grey-13 cursor-pointer text-right q-ml-sm" name="close" size="md" v-close-popup></q-icon>
                </div>
                <div class="text-weight-bold fz20 ellipsis desktop-only">
                  <span class="inline-block"><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>
                  </span>
                </div>
                <div :class="{'q-ml-md':$q.platform.is.desktop}">
                  <!-- <q-rating v-model="h.Star" size="1.5em" color="orange" :max="h.Star" readonly /> -->
                </div>
              </div>
              <q-icon class="text-grey-13 cursor-pointer desktop-only" name="close" size="md" v-close-popup></q-icon>
            </div>
            <div class="q-px-lg q-pb-sm text-red-14">
              <q-select style="min-width: 190px;" unelevated v-model="keyword" dense :options="surroundingPois" emit-value option-label="title" option-value="title" map-options :label="msg.OrderType!=1?$t('v102.CharteredBus.sjc.c5'):$t('v102.CharteredBus.sjc.c6')" standout  @update:model-value="changeKeyword" />
            </div>
            <div class="col rounded-borders bg-blue-1 q-mx-lg" id="baiduCharteredBusMapBaoChe" style="height: 800px;">
              <GoogleMap class="q-pa-lg" api-key="AIzaSyCvRZN9lGl3y3EsM0A0sWPf1pZ2olGsyNg" style="width: 100%; height: 100%" :center="center" :zoom="15">
                <Marker :options="{ position: center }" />
                <LocalSearch></LocalSearch>
                <Circle></Circle>
              </GoogleMap>
            </div>
            <div class="row justify-end q-px-lg q-pt-sm">
              <q-btn flat dense color="dark" :label="$t('close')" class="q-mr-sm" v-close-popup/>
              <q-btn color="primary" unelevated :label="$t('v102.vehicle.add5')" @click="showGoogleMap=false"/>
            </div>
          </q-card>
        </div>
      </div>
    
  </q-dialog>
</template>

<script lang="ts">
import { GoogleMap, Marker, Circle,LocalSearch,Geocoder } from 'vue3-google-map'
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,nextTick, } 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,GoogleMap },
  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({
      Address:'' as String,
      surroundingPois: [] as any,
      keyword:'' as String,
      GetOnTheBusObj: {} as any,
      GetOffTheBusIdObj: {} as any,
      center:{} as any,
      radius: 0,
      typeMap: 1,
      showGoogleMap: false,
      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: null,//成人数
        ChildNum: null,//儿童数
        BabyNum: null,//婴儿数
        HandLuggageNum: null,//手提行李数量
        RegisteredLuggageNum: null,//托运行李数量
        ContactWay: '',//联络方式 WeChat
        Mobile:'',//电话
        ProductId: '',
        CarId: '',//产品类型ID
      },
      types: [] as any,
      AirportTypes: [] as any,
      PlaceTypes: [] as any,
      PlaceTypes2: [] as any,
      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
    if(currentRouter.currentRoute){
      if(currentRouter.currentRoute.value.params.Time){
        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 
      if(currentRouter.currentRoute.value.params.orderId){
        data.msg.OrderId = currentRouter.currentRoute.value.params.orderId
        
      }
    }
    
    const menu = inject(DirtionmaryHelper.MENU_KEYS) as any
    menu.value = 5
    const methods = {
      changeKeyword(val: String) {
        if(data.typeMap==1){
          data.msg.GetonAddress = data.Address+val
        }if(data.typeMap==2){
          data.msg.GetoffAddress = data.Address+val
        }
      },
      openMap(type: Number,Address: String,lat: any, lng: any){
        data.typeMap = type
        // data.keyword = Address
        data.showGoogleMap = true
        nextTick(() => {
            methods.initMap(Address,lat,lng)
        })
      },
      initMap(Address: String,lat: any, lng: any) {
        let country=localStorage.getItem(DirtionmaryHelper.USER_IN_COUNTRY) ?? 'GW'
        if(country!='CN'){
          data.center = { lat: parseFloat(lng), lng: parseFloat(lat) }
        }
        let Bmap = window.BMapGL
          let mPoint = new Bmap.Point(lat, lng)
          var b = new Bmap.Map('baiduCharteredBusMapBaoChe')
          b.centerAndZoom(mPoint, 15)
          b.enableScrollWheelZoom(true)
          var opts = {
            position: mPoint, // 指定文本标注所在的地理位置
            offset: new Bmap.Size(-40, 10), // 设置文本偏移量
            styles:{
              position: 'absolute',
              display: 'inline',
              cursor: 'inherit',
              whiteSpace: 'nowrap',
              backgroundColor: '#FFFFFF',
              color: 'red',
              border: 0,
              left: '167px',
              top: '104px',
              padding: '1px 5px',
              borderRadius: '3px',
            },
          };
          // 创建文本标注对象
          var label = new Bmap.Label(`${t('v102.CharteredBus.jiesongdianfw')}`, opts);
	        var circle = new Bmap.Circle(mPoint,data.radius,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
          b.addOverlay(new Bmap.Marker(new Bmap.Point(lat, lng)))
          b.addOverlay(label)
          b.addOverlay(circle)
          
          var geoc = new Bmap.Geocoder();
          b.addEventListener('click', (e) =>{
            geoc.getLocation(e.latlng,(t)=>{
              data.surroundingPois = t.surroundingPois
              data.keyword = data.surroundingPois[0].title
              let newAddress = t.addressComponents.city+t.addressComponents.district+t.addressComponents.province+t.addressComponents.street+t.addressComponents.streetNumber
              data.Address = newAddress
              if(data.typeMap==1){
                data.msg.GetonAddress = data.Address+data.keyword
              }if(data.typeMap==2){
                data.msg.GetoffAddress = data.Address+data.keyword
              }
            })
          }) 
      },
      // 获取订单详情
      getOrderInfo(){
        CharteredBusService.GetTYMyCarOrderInfo(data.msg.OrderId)
          .then(r => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              data.msg = {
                OrderId: r.data.data.OrderId,
                OrderType: String(r.data.data.OrderType),
                OrderDate:r.data.data.OrderDate,//预定日期
                Unit_Price: r.data.data.Unit_Price,//单价
                Num: r.data.data.Num,//数量
                Money: r.data.data.Money,
                Sex: String(r.data.data.Sex),//1男2女
                SurName: r.data.data.SurName,//姓
                Name: r.data.data.Name,//名
                Remark: r.data.data.Remark,
                AirportId: r.data.data.AirportId,
                AirportTerminal: r.data.data.AirportTerminal,//航厦
                AirLine: r.data.data.AirLine,//航空公司名称
                FlightNumber: r.data.data.FlightNumber,//航班号
                FlightTime: r.data.data.FlightTime,//航班时间
                GetonAddress: r.data.data.GetonAddress,//上车点
                GetoffAddress: r.data.data.GetoffAddress,//下车点
                ManNum: String(r.data.data.ManNum),//成人数
                ChildNum: String(r.data.data.ChildNum),//儿童数
                BabyNum: String(r.data.data.BabyNum),//婴儿数
                HandLuggageNum: String(r.data.data.HandLuggageNum),//手提行李数量
                RegisteredLuggageNum: String(r.data.data.RegisteredLuggageNum),//托运行李数量
                ContactWay: r.data.data.ContactWay,//联络方式 WeChat
                Mobile: r.data.data.Mobile,//电话
                ProductId: r.data.data.ProductId,
                CarId: r.data.data.CarId,//产品类型ID
              }
              data.AirportTypes.forEach(x=>{
                if(x.AirportId==r.data.data.AirportId){
                  methods.changeDetailListHandler(x,1)
                }
              })
              
              data.types.forEach(x=>{
                if(x.Id==r.data.data.CarId){
                  methods.changeDetailListHandler(x,3)
                }
              })
            } else {
              message.errorMsg(r.data.message)
            }
          }).catch(e => {
            message.errorMsg(e.message)
            data.isCheck = false
          })
      },
      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&&types[0]&&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
              if(data.AirportTypes.length>0){
                methods.changeDetailListHandler(data.AirportTypes[0],1,data.msg.OrderId)
              }
              data.PlaceTypes = JSON.parse(JSON.stringify(r.data.data.PlaceList))
              data.PlaceTypes2 = JSON.parse(JSON.stringify(r.data.data.PlaceList))
              methods.changeDetailListHandler(data.PlaceTypes[0],2)
              methods.changeDetailListHandler(data.PlaceTypes2[0],4)
              data.types = r.data.data.CarTypeList
              if(data.types&&data.types.length==0){
                message.errorMsg(`${t('v102.ticket.nobj')}`)
              }
              if(data.msg.OrderId){
                methods.getOrderInfo()
              }
            } 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()
        }
        
        if(data.detailsObj.CarType!=1){
          guestGetonAddress.value.validate()
        }
        if(data.detailsObj.CarType!=2){
          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.jc')}`)
            return 
          }
          if(data.detailsObj.CarType==1){
            // && !guestGetonAddress.value.hasError
            flag = !guestAirportTerminal.value.hasError && !guestAirLine.value.hasError && !guestFlightNumber.value.hasError && !guestFlightTime.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 = !guestAirportTerminal.value.hasError && !guestAirLine.value.hasError && !guestFlightNumber.value.hasError && !guestFlightTime.value.hasError && !guestGetonAddress.value.hasError && !guestTimeData.value.hasError && !guestManNum.value.hasError && !guestSurName.value.hasError && !guestName.value.hasError && !guestMobile.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.msg.AirportId){
              message.errorMsg(`${t('v102.CharteredBus.jc')}`)
              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/0/${data.detailsObj.CarType}` })
            } 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,OrderId: Number) {
        if(i==1){
          if(!OrderId){
            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
          data.GetOnTheBusObj = e
          data.radius = e.Range
        }
        if(i==4){
          data.PlaceTypes2.forEach(x=>{
            x.checked = false
          })
          e.checked = !e.checked
          data.GetOffTheBusIdObj = e
          data.radius = e.Range
        }
        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
          methods.changePeople()
        }
      },
      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
          }
        })
      }
    }
    if(data.msg.ProductId){
      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>
