<template>
  <div style="min-height: 80vh">
    <div
      class=""
      style="margin: auto; position: relative"
      :style="{ 'max-width': $q.platform.is.desktop ? '1200px' : '100%' }"
    >
      <div
        style="
          position: fixed;
          left: 0;
          right: 0;
          top: 0;
          border-top: 1px solid #eee;
          box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
          z-index: 9999999;
        "
        class="bg-white"
        v-if="
          (currentHeight > navs[0].top + 100 && $q.platform.is.desktop) ||
          (currentHeight > priceListHeight &&
            currentHeight < navs[0].top &&
            $q.platform.is.mobile)
        "
        :style="{ transform: stickyHeight }"
      >
        <div
          style="max-width: 1200px; margin-left: auto; margin-right: auto"
          :class="{ 'q-px-md': $q.screen.width < 1220 }"
          class="q-py-sm row items-center"
        >
          <span
            class="col product-price text-subtitle1 text-weight-bold"
            style="text-align: left"
            v-if="dataList.priceList.length > 0"
          >
            <span>{{domain==`id.oytour`?'IDR':'CNY'}} {{ dataList.priceList[0].originalB2BPrice }}</span>
            <span class="q-ml-sm f12 text-grey-7">{{
              $t("v103.scheduledTripDetails.since")
            }}</span>
          </span>
          <q-btn
            color="primary"
            unelevated
            class="q-px-xl"
            :label="$t('v103.scheduledTripDetails.selectionscheme')"
            @click="goScrollHandler(priceListHeight)"
          />
        </div>
      </div>
      <div
        class="bg-white"
        style="
          position: fixed;
          left: 0;
          right: 0;
          top: -1px;
          border-top: 1px solid #eee;
          box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
          z-index: 999;
        "
        v-if="currentHeight > priceListHeight + 800 && $q.platform.is.mobile"
        :style="{ transform: stickyHeight }"
      >
        <q-tabs
          v-model="tab"
          dense
          class="text-grey"
          active-color="primary"
          indicator-color="primary"
          align="left"
          narrow-indicator
        >
          <q-tab
            v-for="(x, i) in navs"
            :key="i"
            @click="goScrollHandler(x.top + 20)"
            :name="x.display"
            :label="x.display"
          ></q-tab>
        </q-tabs>
      </div>
      <div
        v-if="dataList"
        style="margin-left: auto; margin-right: auto"
        :style="{ width: $q.platform.is.desktop ? '1200px' : '100%' }"
        class="q-mt-md q-mb-lg"
        :class="{ 'q-px-md': $q.screen.width < 1220 }"
      >
        <div style="padding-bottom: calc((100% - 0px) / 3); position: relative">
          <div
            style="position: absolute; left: 0; top: 0; right: 0; bottom: 0"
            class="overflow-hidden rounded-borders"
          >
            <q-carousel
              swipeable
              animated
              v-model="slide"
              navigation
              height="400px"
              infinite
              autoplay
              transition-prev="slide-right"
              transition-next="slide-left"
            >
              <q-carousel-slide
                v-for="(item, i) in dataList.imgCover"
                :name="i"
                :key="i"
                :img-src="
                  item.Url
                    ? item.Url
                    : 'http://imgfile.oytour.com/Upload/DMC/yEiRE8pRWE5ZF8cPNRnAiQST8WbyaGQc.jpg'
                "
              />
            </q-carousel>
          </div>
        </div>
        <div
          class="q-py-lg"
          :class="{ row: $q.platform.is.desktop, column: $q.platform.is.mobile }"
          style="border-bottom: 1px solid #eee"
        >
          <div class="col q-mr-lg">
            <div class="text-h6 ellipsis-2-lines">{{ dataList.title }}</div>
            <div class="q-mt-md f12 text-grey-6" v-if="domain!=`id.oytour`">
              <q-icon name="iconfont icondingweixiao" size="16px" class="q-mr-sm" />
              <span
                >{{ dataList.aimPlaceName }} -

                <span v-for="(x, i) in citys" :key="i">
                  <span class="cursor-pointer">{{ x }} </span>
                  <span v-if="i + 1 != citys.length" class="q-mr-sm">,</span>
                </span>
              </span>
            </div>
            <div class="q-mt-md row">
              <q-chip
                class="transparent q-mr-xl no-padding"
                square
                icon="iconfont iconOwner-1"
                :label="$t('v103.scheduledTripDetails.headerlabel.d1')"
              />
              <q-chip
                class="transparent q-mr-xl no-padding"
                square
                icon="iconfont icontime"
                :label="` ${$t('v103.scheduledTripDetails.headerlabel.d2')} ${
                  dataList.dayNum
                } ${$t('v103.scheduledTripDetails.headerlabel.d21')}`"
              />
              <!-- <q-chip
                class="transparent q-mr-xl no-padding"
                square
                icon="iconfont iconnetwork-fill"
                :label="$t('v103.scheduledTripDetails.headerlabel.d3')"
              /> -->
              <q-chip
                class="transparent q-mr-xl no-padding"
                square
                icon="iconfont iconcancel"
                :label="$t('v103.scheduledTripDetails.headerlabel.d4')"
              />
            </div>
          </div>
          <div
            :style="{ width: $q.platform.is.mobile ? '100%' : '293px' }"
            class="bg-grey-3 rounded-borders q-px-md"
            :class="{
              'q-py-lg': $q.platform.is.desktop,
              'row justify-between items-center q-mt-sm q-py-sm': $q.platform.is.mobile,
            }"
          >
            <div class="product-price text-h6" v-if="dataList.priceList.length > 0">
              {{domain==`id.oytour`?'IDR':'CNY'}}：{{ dataList.priceList[0].originalB2BPrice }}
              <span class="f12 text-grey-6">{{
                $t("v103.scheduledTripDetails.since")
              }}</span>
            </div>
            <div v-else class="text-subtitle1 text-grey-6">
              {{ $t("v103.scheduledTripDetails.nooffer") }}
            </div>
            <q-btn
              color="primary"
              :label="$t('v103.scheduledTripDetails.selectionscheme')"
              unelevated
              @click="goScrollHandler(priceListHeight)"
              :class="{ 'q-mt-md full-width': $q.platform.is.desktop }"
            />
          </div>
        </div>
        <div class="q-mt-lg" v-if="dataList.productRecommend">
          <div
            class="q-mt-sm"
            v-for="(x, i) in dataList.productRecommend.split('\n')"
            :key="i"
          >
            <q-icon
              name="iconfont iconhongqi"
              color="primary"
              size="16px"
              class="q-mr-md"
            />
            {{ x }}
          </div>
        </div>
      </div>
      <div v-if="dataList" class="q-mt-lg text-grey-9" ref="pricelistref">
        <div
          style="margin-left: auto; margin-right: auto"
          :style="{ 'max-width': $q.platform.is.desktop ? '1200px' : '100%' }"
        >
          <div class="text-h6">{{ $t("v103.scheduledTripDetails.selectionscheme") }}</div>
          <div
            class="rounded-borders bg-white q-pa-md q-mt-md"
            v-if="$q.platform.is.mobile"
          >
            <q-field
              class="q-my-md"
              stack-label
              :label="$t('v103.scheduledTripDetails.selectdate')"
              standout
              dense
            >
              <div class="self-center full-width no-outline" tabindex="0">
                {{ currentPrice.startDate }}
              </div>
              <q-popup-proxy ref="qDateProxy">
                <calendar
                  class="bg-white q-pa-md"
                  :priceList="dataList.priceList"
                  @change="changeChosenDateHandler"
                  ref="calendarRef"
                ></calendar>
              </q-popup-proxy>
            </q-field>
            <template v-if="currentPrice && currentPrice.startDate">
              <order-preview
                class="q-pa-md"
                :msg="msg"
                :price="currentPrice"
                @reset="resetHandler"
              ></order-preview>
            </template>
          </div>
          <div
            class="bg-white rounded-borders q-mt-md"
            v-if="dataList.priceList.length > 0"
          >
            <div class="q-pa-md row">
              <div class="col">
                <div
                  class="text-subtitle1 text-weight-bold row items-center"
                  v-if="$q.platform.is.desktop"
                >
                  <span class="q-mr-md">{{
                    $t("v103.scheduledTripDetails.travelplan")
                  }}</span>
                  <q-chip
                    square
                    color="orange"
                    size="sm"
                    text-color="grey-2"
                    class="text-light"
                    :label="$t('v103.scheduledTripDetails.headerlabel.d4')"
                  />
                </div>
                <div class="text-grey f12">
                  <ul class="q-pl-md no-margin">
                    <li v-for="(x, i) in warnBuy" class="q-mt-md" :key="i">
                      {{ x }}
                    </li>
                  </ul>
                </div>
              </div>
              <div class="" v-if="$q.platform.is.desktop">
                <div class="row items-center">
                  <span
                    class="product-price text-h6 q-mr-md"
                    v-if="dataList.priceList.length > 0"
                    >{{domain==`id.oytour`?'IDR':'CNY'}} {{ dataList.priceList[0].originalB2BPrice }}</span
                  >
                  <q-btn
                    color="primary"
                    outline
                    :label="
                      showOrderPreview
                        ? $t('v103.scheduledTripDetails.deselect')
                        : $t('v103.scheduledTripDetails.choose')
                    "
                    @click="changeShowOrderPreviewHandler"
                    class="q-px-lg"
                  />
                </div>
                <div class="text-info q-mt-md text-right">
                  {{ $t("v103.scheduledTripDetails.earliest") }}：{{
                    dataList.priceList[0].startDate
                  }}
                </div>
              </div>
            </div>
            <div
              class="q-pa-md"
              style="border-top: 1px solid #eee"
              v-if="showOrderPreview"
            >
              <div class="q-pa-md bg-grey-2 row items-center rounded-borders">
                <div class="text-subtitle2 text-weight-bold q-mr-xl">
                  {{ $t("v103.scheduledTripDetails.thisscheme") }}
                </div>
                <q-chip
                  class="transparent q-mr-xl no-padding"
                  square
                  icon="iconfont iconcancel"
                  :label="$t('v103.scheduledTripDetails.headerlabel.d4')"
                />
                <q-chip
                  class="transparent q-mr-xl no-padding"
                  square
                  icon="iconfont iconroundcheck"
                  :label="$t('v103.scheduledTripDetails.confirmationtime')"
                />
              </div>
              <div class="q-mt-lg row" v-if="$q.platform.is.desktop">
                <div class="col">
                  <calendar
                    :priceList="dataList.priceList"
                    @change="changeChosenDateHandler"
                    ref="calendarRef"
                  ></calendar>
                </div>
                <div class="col q-ml-xl">
                  <order-preview
                    :msg="msg"
                    :price="currentPrice"
                    @reset="resetHandler"
                  ></order-preview>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        v-if="dataList"
        style="max-width: 1200px; margin-left: auto; margin-right: auto"
        class="q-mt-xl row"
        :class="{ 'q-px-md': $q.screen.width < 1220 && $q.screen.width > 760 }"
      >
        <!-- col q-ml-xl position-relative -->
        <!-- days.length>0&&dayList.length>3&&currentHeight > days[0].top-60&&currentHeight < navs[2].top&&$q.platform.is.desktop -->
        <div
          class="absolute"
          style="z-index: 999; left: -116px"
          :style="{
            top:
              currentHeight > navs[1].top
                ? currentHeight + 100 + 'px'
                : currentHeight + 300 + 'px',
          }"
          v-if="
            dataList.priceList.length > 0 &&
            $q.platform.is.desktop &&
            currentHeight > navs[1].top - 400 &&
            currentHeight < navs[2].top &&
            dataList.dayList.length > 3
          "
        >
          <!-- position: sticky; top: 100px -->
          <div style="">
            <div
              class="trip-module text-subtitle2 cursor-pointer q-mb-lg"
              v-for="(x, i) in days"
              :key="i"
              @click="goScrollHandler(x.top + 50)"
              :class="{
                'active-trip-moduleDay text-red active':
                  currentHeight >= x.top &&
                  (i == days.length - 1 || currentHeight < days[i + 1].top),
              }"
            >
              {{ x.display }}
            </div>
          </div>
        </div>
        <div
          style="width: 100%"
          :class="{ col: $q.platform.is.desktop, col: $q.platform.is.mobile }"
        >
          <div
            class="text-h5 text-weight-bold text-left q-pb-sm"
            id="feature"
            :class="{ 'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile }"
          >
            {{ $t("v103.scheduledTripDetails.righttitle.d1") }}
          </div>

          <div
            class="q-pb-xl"
            v-if="tripImages && tripImages.length > 0"
            ref="diyContext"
          >
            <div v-for="(x, i) in tripImages" :key="i">
              <img
                v-if="dataList.teamType != 2"
                class="block"
                :src="x.header"
                style="width: 100%"
              />
              <img class="block" :src="x.page" style="width: 100%" />
              <div v-if="dataList.teamType != 2" class="tripImages-footer">
                <img class="block" :src="x.footer" style="width: 100%" />
              </div>
            </div>
          </div>
          <div
            class="q-mt-md trip-text q-pb-xl"
            v-html="dataList.feature.featureContent"
            v-else-if="dataList.feature.featureContent != ''"
            :class="{ 'q-px-md': $q.platform.is.mobile }"
          ></div>
          <div
            class="q-mt-md q-pb-xl"
            id="setZoom"
            ref="diyContext"
            :style="{ zoom: zoomDiyContext }"
            v-html="dataList.feature.featureHtml"
            v-else-if="dataList.feature.featureHtml != ''"
          ></div>
          <div
            class="text-h5 text-weight-bold text-left q-mt-xl"
            id="product"
            :class="{ 'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile }"
          >
            {{ $t("v103.scheduledTripDetails.righttitle.d2") }}
          </div>
          <div class="q-pb-xl">
            <smaple
              :trip="dataList"
              class="q-pb-xl"
              :class="{ 'q-px-md': $q.platform.is.mobile }"
            ></smaple>
            <div
              v-if="detailsImageList && detailsImageList.length > 3"
              v-for="(x, i) in detailsImageList"
              :key="i"
              :id="`days_${i}`"
            >
              <div class="tripImages-footer" style="padding: 20px 0"></div>
              <!-- <img v-if="dataList.tripColor" class="block" :src="x.header" style="width: 100%;"> -->
              <img class="block" :src="x.page" style="width: 100%" />
              <div class="tripImages-footer">
                <img
                  v-if="dataList.tripColor"
                  class="block"
                  :src="x.footer"
                  style="width: 100%"
                />
              </div>
            </div>
            <template
              v-if="
                dataList.dayList.length <= 3 &&
                detailsImageList &&
                detailsImageList.length == 0
              "
            >
              <trip :trip="dataList" @change="changeTripShowHandler"></trip>
            </template>
            <template
              v-if="
                dataList.dayList.length > 3 &&
                !detailsImageList &&
                detailsImageList.length == 0
              "
            >
              <block
                :currentHeightDay="currentHeight"
                :days="days"
                :tripList="dayList"
                :isDirect="isDirect"
                :clickDate="clickDate"
              ></block>
            </template>
          </div>
          <div
            class="text-h5 text-weight-bold text-left q-mt-xl"
            id="price"
            :class="{ 'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile }"
          >
            {{ $t("v103.scheduledTripDetails.righttitle.d3") }}
          </div>
          <div
            class="text-subtitle1 text-weight-bold q-my-md"
            :class="{ 'q-px-md': $q.platform.is.mobile }"
          >
            {{ $t("v103.scheduledTripDetails.righttitle.d31") }}
          </div>
          <div
            class="q-mt-md trip-text"
            v-html="dataList.feature.feeInclude"
            :class="{ 'q-px-md': $q.platform.is.mobile }"
          ></div>
          <div
            class="text-subtitle1 text-weight-bold q-my-md"
            :class="{ 'q-px-md': $q.platform.is.mobile }"
          >
            {{ $t("v103.scheduledTripDetails.righttitle.d32") }}
          </div>
          <div
            class="q-mt-md trip-text q-pb-xl"
            v-html="dataList.feature.feeNonInclude"
            :class="{ 'q-px-md': $q.platform.is.mobile }"
          ></div>
          <div
            class="text-h5 text-weight-bold text-left q-mt-xl"
            id="warning"
            :class="{ 'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile }"
          >
            {{ $t("v103.scheduledTripDetails.righttitle.d4") }}
          </div>
          <div
            class="q-mt-lg trip-text bg-orange-1 q-pa-md rounded-borders q-mb-xl"
            style="border: 1px dashed var(--q-color-warning)"
            v-html="dataList.feature.importantTip"
            :class="{ 'q-mx-md': $q.platform.is.mobile }"
          ></div>
          <div
            class="text-h5 text-weight-bold text-left q-mt-xl"
            id="tips"
            :class="{ 'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile }"
          >
            {{ $t("v103.scheduledTripDetails.righttitle.d5") }}
          </div>
          <div
            class="q-mt-lg trip-text bg-white q-pa-md rounded-borders q-mb-xl"
            style="border: 1px dashed var(--q-color-info)"
            v-html="dataList.feature.warmTip"
            :class="{ 'q-px-md': $q.platform.is.mobile }"
          ></div>
          <div
            class="text-h5 text-weight-bold text-left q-mt-xl"
            id="cancelTips"
            :class="{ 'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile }"
          >
            {{ $t("v103.scheduledTripDetails.righttitle.d6") }}
          </div>
          <div
            class="q-mt-lg trip-text q-mb-xl"
            :class="{ 'q-px-md': $q.platform.is.mobile }"
          >
            <ul class="no-padding text-grey-9 q-ml-md">
              <li v-for="(x, index) in 5" :class="{ 'q-mt-sm': index != 0 }">
                {{ $t(`v103.scheduledTripDetails.righttitle.d${index + 7}`) }}
              </li>
            </ul>
            <div class="q-mt-lg f12 text-grey-6">
              <q-icon name="iconfont icontishi" class="q-mr-sm" />
              <span>{{ $t("v103.scheduledTripDetails.righttitle.d12") }}</span>
            </div>
          </div>
        </div>
        <template v-if="$q.platform.is.desktop && currentHeight > 130">
          <!-- <div class="col-1"></div> -->
          <!-- col q-ml-xl position-relative -->
          <!-- <div
            class="absolute"
            style="z-index: 999; right: -150px"
            :style="{ top: currentHeight < 1000 ? '1000px' : currentHeight + 100 + 'px' }"
          >
             
            <div style="">
              <div
                class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md"
                v-for="(x, i) in navs"
                :key="i"
                @click="goScrollHandler(x.top + 20)"
                :class="{
                  'active-trip-module':
                    currentHeight >= x.top &&
                    (i == navs.length - 1 || currentHeight < navs[i + 1].top),
                }"
              >
                {{ x.display }}
              </div>
            </div>
          </div> -->
        </template>
      </div>
    </div>

    <div
      class="goBackTop bg-primary"
      :class="{ showGoback: isShowTop }"
      @click="hangleGoUp"
    >
      <i class="iconfont iconarrow-top"></i>
    </div>
  </div>
</template>

<script lang="ts">
import { date, useQuasar } from "quasar";
import {
  inject,
  reactive,
  toRefs,
  defineComponent,
  ref,
  watch,
  getCurrentInstance,
  nextTick,
} from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { DirtionmaryHelper } from "src/config/dictionary";
import useMetaModule from "../../module/meta/metaModule";
import scheduledTripService from "src/api/scheduledTrip";
import { ApiResult } from "src/@types/enumHelper";
import message from "src/utils/message";
import { currentRouter } from "src/router";
import calendar from "src/components/trip/calendar.vue";
import OrderPreview from "src/components/trip/orderPreview.vue";
import smaple from "src/components/trip/smaple.vue";
import Trip from "src/components/trip/trip.vue";
import block from "src/components/trip/block/index.vue";
import { formatDate, moneyFormat } from "src/utils/tools";
import request from "../../api/requestPublic";
import { HttpResponse } from "../../@types";
import Axios, { AxiosResponse, AxiosRequestConfig, AxiosError } from "axios";
export default defineComponent({
  components: {
    calendar,
    OrderPreview,
    smaple,
    Trip,
    block,
  },
  props: [],
  setup(props) {
    const domain =inject(DirtionmaryHelper.DOMAIN_NAME)
    const $router = useRouter();
    const { t } = useI18n();
    const $q = useQuasar();
    const qDateProxy = ref(null);
    const calendarRef = ref(null);
    const navstext = ref([]);
    const getDivDom = (el) => {
      navstext.value.push(el);
    };
    const diyContext = ref(null) as any;
    const pricelistref = ref(null) as any;
    let { ctx: that, proxy } = getCurrentInstance();
    let { setTitle } = useMetaModule();
    const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any;
    pageTitle.value = t("v103.scheduledTripDetails.pageTitle");
    setTitle(pageTitle.value);

    const data = reactive({
      tab: t("v103.scheduledTripDetails.righttitle.d1"),
      searchDate: "",
      clickDate: "",
      scrollareaobj: null,
      isShowTop: false,
      slide: 1,
      msg: {
        configId: "",
        cityId: 0,
        preview: 0,
        tcid: 0,
        teamType: 0,
        isGetPriceFlight: true,
      },
      currentPrice: {},
      isShow: false,
      dataList: null,
      dayList: [],
      isDirect: 1,
      TripConfig: {},
      isShowNav: false,
      clickIndex: 1,
      isLoading: false,
      isShowDialog: false,
      citys: [],
      //Slider configuration [obj]
      options: {
        currentPage: 0,
        speed: 300,
        itemAnimation: true,
        centeredSlides: true,
        thresholdDistance: 100,
        thresholdTime: 300,
        loopedSlides: 2,
        slidesToScroll: 1,
        loop: true,
      },
      warnBuy: [
        t("v103.scheduledTripDetails.warnbuytext.d1"),
        t("v103.scheduledTripDetails.warnbuytext.d2"),
        t("v103.scheduledTripDetails.warnbuytext.d3"),
        t("v103.scheduledTripDetails.warnbuytext.d4"),
      ],
      showOrderPreview: false,
      videoPosition: 0,
      currentHeight: 0,
      isPictureInPicture: false,
      days: [],
      navs: [
        {
          val: "feature",
          top: 0,
          isActive: false,
          display: t("v103.scheduledTripDetails.righttitle.d1"),
        },
        {
          val: "product",
          top: 0,
          isActive: false,
          display: t("v103.scheduledTripDetails.righttitle.d2"),
        },
        {
          val: "price",
          top: 0,
          isActive: false,
          display: t("v103.scheduledTripDetails.righttitle.d3"),
        },
        {
          val: "warning",
          top: 0,
          isActive: false,
          display: t("v103.scheduledTripDetails.righttitle.d4"),
        },
        {
          val: "tips",
          top: 0,
          isActive: false,
          display: t("v103.scheduledTripDetails.righttitle.d5"),
        },
        {
          val: "cancelTips",
          top: 0,
          isActive: false,
          display: t("v103.scheduledTripDetails.righttitle.d6"),
        },
      ],
      priceListHeight: 0,
      stickyHeight: 0,
      zoomDiyContext: 1,
      detailsImageList: [],
      tripImages: [],
    });
    data.scrollareaobj = inject(DirtionmaryHelper.SCROLL_AREA_OBJ) as any;
    data.msg.configId = decodeURIComponent(currentRouter.currentRoute.value.params.id);
    data.msg.tcid = currentRouter.currentRoute.value.params.tcid;
    if (localStorage.baseifo) {
      data.TripConfig = JSON.parse(window.localStorage.getItem("baseifo"));
    }

    const methods = {
      changeShowOrderPreviewHandler() {
        data.showOrderPreview = !data.showOrderPreview;
        if (!data.showOrderPreview) {
          if (data.currentPrice) {
            data.currentPrice.isSupportChildren = null;
            data.currentPrice.unionCityList = null;
            data.currentPrice.singleRoomPrice = 0;
            data.currentPrice.originalB2BPrice = 0;
          }
        }
      },
      getTopNum(x) {
        data.days = JSON.parse(x);
      },
      //点击回到顶部
      hangleGoUp() {
        document.querySelector("#scrollId .q-scrollarea__container").scrollTop = 0;
      },
      changeTripShowHandler() {
        nextTick(() => {
          data.navs.forEach((x, index) => {
            const el = navstext.value[index];
            if (el) {
              x.top = el.getBoundingClientRect().top + data.currentHeight - 60;
            }
          });
        });
      },
      handleScroll(e) {
        let temp = document.querySelector("#scrollId .q-scrollarea__container").scrollTop;
        data.stickyHeight = document.querySelector(".q-header--hidden")
          ? "translateY(0px)"
          : "translateY(0px)";
        data.currentHeight = temp;
        if (
          data.videoPosition > 0 &&
          data.videoPosition < data.currentHeight &&
          data.options.currentPage == 0 &&
          !data.isPictureInPicture
        ) {
          data.isPictureInPicture = true;
          let t = document.querySelectorAll("video")[0];
          try {
            t.requestPictureInPicture();
          } catch (error) {}
        } else if (
          data.videoPosition > 0 &&
          data.videoPosition > data.currentHeight &&
          data.options.currentPage == 0 &&
          data.isPictureInPicture
        ) {
          data.isPictureInPicture = false;
          document.exitPictureInPicture();
        }
        let h = document.location.href;
        if (h.indexOf("scheduledTrip/details") == -1) {
          document
            .querySelector("#scrollId .q-scrollarea__container")
            .removeEventListener("scroll", methods.handleScroll);
        }
        let nowTop = document.querySelector("#scrollId .q-scrollarea__container")
          .scrollTop;
        data.scrollareaobj.pagesTop = nowTop;
        if (nowTop > 200) {
          data.isShowTop = true;
        } else {
          data.isShowTop = false;
        }
      },
      // 导航定位
      goScrollHandler(top) {
        data.scrollareaobj.pagesTop = top;
      },
      playHandler(e) {},
      pauseHandler(e) {},
      timeChangeHandler(e) {},
      //
      seekedChangeHandler(e) {},
      resetHandler() {
        if ($q.platform.is.mobile) {
          data.currentPrice.startDate = "";
        } else {
          calendarRef.value.reset();
        }
      },
      changeChosenDateHandler(val) {
        val.price.version = new Date().getTime();
        data.currentPrice = JSON.parse(JSON.stringify(val.price));
        if (qDateProxy.value) qDateProxy.value.hide();
      },
      showDialog() {
        data.isShowDialog = true;
      },
      //关闭弹窗
      closeDialog() {
        data.isShowDialog = false;
      },
      getData() {
        $q.loading.show();
        let param = Object.assign(data.msg);
        scheduledTripService
          .GetB2BTravelInfoV1(param)
          .then((r) => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              if (r.data.data) {
                data.tripImages = [];
                data.detailsImageList = [];
                let header = r.data.data.feature.headerImage;
                let footer = r.data.data.feature.footerImage;
                if (r.data.data.feature.tripImageList.length > 0) {
                  let OtherFile = r.data.data.feature.tripImageList;
                  OtherFile.forEach((x, i) => {
                    let obj = {
                      header: header,
                      page: x,
                      footer: footer,
                    };
                    data.tripImages.push(obj);
                  });
                }
                if (r.data.data.feature.detailsImageList.length > 0) {
                  let OtherFile = r.data.data.feature.detailsImageList;
                  OtherFile.forEach((x, i) => {
                    let obj = {
                      header: header,
                      page: x,
                      footer: footer,
                    };
                    data.detailsImageList.push(obj);
                  });
                }
                data.dataList = r.data.data;
                if (
                  data.dataList &&
                  data.dataList.dayList &&
                  data.dataList.dayList.length > 0
                ) {
                  data.dataList.dayList.forEach((item) => {
                    item.slide = 0;
                  });
                  if (r.data.data.scenicList) {
                    r.data.data.scenicList.forEach((x) => {
                      if (x.cityName) {
                        data.citys.push(x.cityName);
                      }
                    });
                  }
                }
                data.dataList.imgCover = JSON.parse(data.dataList.imgCover);
                data.dayList = data.dataList.dayList;
                data.isShow = true;
                data.isDirect = data.dataList.isDirect;
                if (data.dataList.videoStr && data.dataList.videoStr != "") {
                  data.options.loop = false;
                  data.options.currentPage = 1;
                  nextTick(() => {
                    setTimeout(() => {
                      let t = document.querySelectorAll(".slider-wrapper");
                      if (t.length > 0) {
                        let d = t[0].getBoundingClientRect();
                        data.videoPosition = d.top + d.height;
                      }
                    }, 1000);
                  });
                }
                nextTick(() => {
                  try {
                    document
                      .querySelector("#scrollId .q-scrollarea__container")
                      .addEventListener("scroll", methods.handleScroll);
                  } catch (error) {}
                  if (data.dataList.feature.featureHtml != "") {
                    let tw = $q.platform.is.desktop
                      ? parseFloat(diyContext.value.getBoundingClientRect().width) /
                        1000.0
                      : parseFloat(diyContext.value.getBoundingClientRect().width) /
                        1123.0;

                    let divArr = document.querySelectorAll("#setZoom>div");
                    for (let i = 0; i < divArr.length; i++) {
                      let div = divArr[i];
                      if ($q.platform.is.mobile) {
                        div.style.zoom =
                          div.offsetWidth > 1000
                            ? 0.999
                            : document.documentElement.clientWidth / 1123.0;
                      } else {
                        div.style.zoom = 1;
                      }
                    }

                    data.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);
                  }
                  setTimeout(() => {
                    data.navs.forEach((x, index) => {
                      const el = document.querySelector(`#${x.val}`);
                      x.top = el.offsetTop - 80;
                    });
                    data.priceListHeight =
                      pricelistref.value.getBoundingClientRect().top +
                      data.currentHeight -
                      60;
                    data.days = [];
                    data.dayList.forEach((x) => {
                      let dayListObj = {
                        val: "day" + x.dayNum,
                        top: 0,
                        isActive: false,
                        display: x.dayNum > 9 ? x.dayNum : "0" + x.dayNum,
                      };
                      data.days.push(dayListObj);
                    });
                  }, 1000);
                });
              }
            } else {
              message.errorMsg(r.data.message);
            }
          })
          .catch((e) => {
            message.errorMsg(e.message);
          });
        $q.loading.hide();
      },
      menu() {
        data.scroll = document.documentElement.scrollTop || document.body.scrollTop;
        if (data.scroll > 300) {
          data.isShowNav = true;
        } else {
          data.isShowNav = false;
        }
      },
      goNavList(val) {
        let newval = "#" + val;
        document.querySelector(newval).scrollIntoView(true);
      },
    };
    watch(
      () => data.days,
      (n, o) => {
        data.days = n;
        try {
          data.days.forEach((x, i) => {
            var object = document.getElementById(`days_${i}`);
            x.top = object.getBoundingClientRect().top + 60;
          });
        } catch (error) {}
      },
      { immediate: true, deep: true }
    );
    watch(
      () => data.currentHeight,
      (n, o) => {
        data.navs.forEach((x, i) => {
          if (
            x.top &&
            data.currentHeight >= x.top &&
            (i == data.navs.length - 1 || data.currentHeight < data.navs[i + 1].top)
          ) {
            if (data.tab != x.display) {
              data.tab = x.display;
              return;
            } else {
              return;
            }
          }
        });
      },
      { immediate: true, deep: false }
    );

    methods.getData();
    return {
      ...toRefs(data),
      ...methods,
      moneyFormat,
      domain,
      calendarRef,
      qDateProxy,
      getDivDom,
      navstext,
      diyContext,
      pricelistref,
    };
  },
});
</script>

<style>
.goBackTop {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  /* background-color: #027be3; */
  position: fixed;
  right: 20px;
  bottom: 20px;
  color: #fff;
  text-align: center;
  line-height: 56px;
  z-index: 9999999;
  opacity: 0;
  transition: opacity 2s linear;
}

.showGoback {
  opacity: 100;
}
.slider-item {
  transform: scale(1);
  transition-timing-function: ease;
  transition-duration: 300ms;
}
.slider-item.slider-active {
  transform: scale(1);
  z-index: 999;
}
.trip-text img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
.trip-text {
  line-height: 1.6;
}
.slider-item.slider-active-copy {
  transform: scale(1);
  z-index: 999;
}
.active-trip-module {
  color: var(--q-primary) !important;
  font-weight: 800;
  position: relative;
}
.active-trip-module::before {
  position: absolute;
  content: " ";
  top: 0;
  bottom: 0;
  left: -25px;
  width: 5px;
  border-radius: 5px;
  background: var(--q-primary);
}
.trip-module {
  color: #9e9e9e;
  transition: all 0.3s;
  font-weight: 100;
  text-align: center;
  line-height: 38px;
  font-size: 18px;
  width: 38px;
  height: 38px;
  border: 1px solid #ccc;
  border-radius: 50%;
  font-family: lettergothicstd;
}
.active-trip-moduleDay {
  position: relative;
  border: 0;
  left: -15px;
  font-size: 51px;
}
.active-trip-moduleDay.active::before {
  opacity: 1;
}
.active-trip-moduleDay::before {
  display: inline-block;
  position: absolute;
  top: 0px;
  left: -50px;
  content: "DAY";
  font-size: 13px;
  font-family: fangsong;
  line-height: 58px;
  opacity: 0;
}
#setZoom > div {
  zoom: calc(100 / 1000);
}
.tripImages-footer {
  background: url("../../assets/img/trip/otherBjThree.jpg") repeat;
  padding: 115px 0 32px 0;
}
</style>
