<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>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">
              <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"
            >
              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">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'}">
          <!-- position: sticky; top: 100px -->
            <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 service from "../../api/axiosPublic"
import { HttpResponse } from "../../@types";
import Axios, { AxiosResponse, AxiosRequestConfig, AxiosError } from 'axios'
export default defineComponent({
  components: {
    calendar,
    OrderPreview,
    smaple,
    Trip,
    block
  },
  props: [],
  setup(props) {
    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) {
        //console.log(e)
      },
      //
      seekedChangeHandler(e) {
        //console.log(e)
      },
      resetHandler() {
        if($q.platform.is.mobile){
          data.currentPrice.startDate = ''
          // qDateProxy.value.show()
          // setTimeout(()=>{
          //   calendarRef.value.reset()
          // })
        }else{
          calendarRef.value.reset()
        }
        //that.$forceUpdate()
      },
      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)
                })
              }
              console.log(data.tripImages,'-----')
              //  tripImageList detailsImageList headerImage footerImage
                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) {
                    // console.log(document.querySelector('#scrollId .q-scrollarea__container'))
                    // console.log('异常信息', 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) {
        console.log('----异常')
      }
      // methods.getTopNum(JSON.stringify(data.days))
    },{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,
      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 .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>
