<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="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">
                  {{ $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-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 >0) || ' ']"
                  ref="guestMobile"
                />
                <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="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 }"></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);
      }
      if (currentRouter.currentRoute.value.params.ProductId) {
        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.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>
