<template>
  <div style="min-height: 80vh">
    <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">
          <span>CNY {{ moneyFormat(dataList.priceList[0].originalB2CPrice, 0) }}</span>
          <span class="q-ml-sm f12 text-grey-7">{{$t('v103.details.since')}}</span>
        </span>
        <q-btn color="primary" unelevated class="q-px-xl" :label="$t('v103.details.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="max-width: 1200px; margin-left: auto; margin-right: auto" 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" />
          </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
              >日本 -

              <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.details.headerlabel.d1')"
            />
            <q-chip
              class="transparent q-mr-xl no-padding"
              square
              icon="iconfont icontime"
              :label="` ${$t('v103.details.headerlabel.d2')} ${dataList.dayList.length} ${$t('v103.details.headerlabel.d21')}`"
            />
            <q-chip
              class="transparent q-mr-xl no-padding"
              square
              icon="iconfont iconnetwork-fill"
              :label="$t('v103.details.headerlabel.d3')"
            />
            <q-chip
              class="transparent q-mr-xl no-padding"
              square
              icon="iconfont iconcancel"
              :label="$t('v103.details.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. }} -->
            CNY：{{ moneyFormat(dataList.priceList[0].originalB2CPrice, 0) }}
            <span class="f12 text-grey-6">{{$t('v103.details.since')}}</span>
          </div>
          <div v-else class="text-subtitle1 text-grey-6">{{$t('v103.details.nooffer')}}</div>
          <q-btn
            color="primary"
            :label="$t('v103.details.selectionscheme')"
            unelevated
            @click="goScrollHandler(priceListHeight)"
            :class="{'q-mt-md full-width':$q.platform.is.desktop}"
          />
        </div>
      </div>
      <div class="q-mt-lg">
        <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-pa-lg q-mt-lg text-grey-9" ref="pricelistref">
      <div style="max-width: 1200px; margin-left: auto; margin-right: auto">
        <div class="text-h6">{{$t('v103.details.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.details.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"
              :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.details.travelplan')}}</span>
                <q-chip square color="orange" size="sm" text-color="grey-2" class="text-light" :label="$t('v103.details.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">CNY {{ moneyFormat(dataList.priceList[0].originalB2CPrice, 0) }}</span>
                <q-btn color="primary" outline :label="showOrderPreview ? $t('v103.details.deselect') : $t('v103.details.choose')" @click="showOrderPreview = !showOrderPreview" class="q-px-lg" />
              </div>
              <div class="text-info q-mt-md text-right">{{$t('v103.details.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.details.thisscheme')}}</div>
              <q-chip class="transparent q-mr-xl no-padding" square icon="iconfont iconcancel" :label="$t('v103.details.headerlabel.d4')" />
              <q-chip class="transparent q-mr-xl no-padding" square icon="iconfont iconroundcheck" :label="$t('v103.details.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 :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, }"
    >
      <div class="col q-ml-xl position-relative"
      v-if="days.length>0&&dayList.length>3&&currentHeight > days[0].top-60&&currentHeight < navs[2].top&&$q.platform.is.desktop">
        <div style="position: sticky; top: 100px">
          <div
            class="trip-module text-subtitle2 cursor-pointer q-mb-lg"
            v-for="(x, i) in days"
            :key="i"
            @click="goScrollHandler(x.top + 400)"
            :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 :class="{'col-8':$q.platform.is.desktop,'col':$q.platform.is.mobile}">
        <div class="text-h5 text-weight-bold text-left" id="feature" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.details.righttitle.d1')}}</div>
        <div class="q-mt-md trip-text q-pb-xl" v-html="dataList.feature.featureContent" v-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-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.details.righttitle.d2')}}</div>
        <div class="q-pb-xl">
          <smaple :trip="dataList" :class="{'q-px-md':$q.platform.is.mobile}"></smaple>
          <template v-if="dataList.dayList.length<=3">
            <trip :trip="dataList" @change="changeTripShowHandler"></trip>
          </template>
          <template v-else>
            <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.details.righttitle.d3')}}</div>
        <div class="text-subtitle1 text-weight-bold q-my-md" :class="{'q-px-md':$q.platform.is.mobile}">{{$t('v103.details.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.details.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.details.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.details.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.details.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.details.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.details.righttitle.d12')}}</span>
          </div>
        </div>
      </div>
      <template v-if="$q.platform.is.desktop">
        <div class="col-1"></div>
        <div class="col q-ml-xl position-relative">
          <div style="position: sticky; top: 100px">
            <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 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 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'
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()
    
    const data = reactive({
      tab: t('v103.details.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.details.warnbuytext.d1'), 
        t('v103.details.warnbuytext.d2'), 
        t('v103.details.warnbuytext.d3'), 
        t('v103.details.warnbuytext.d4')],
      showOrderPreview: false,
      videoPosition: 0,
      currentHeight: 0,
      isPictureInPicture: false,
      days: [],
      navs: [
        {
          val: 'feature',
          top: 0,
          isActive: false,
          display: t('v103.details.righttitle.d1')
        },
        {
          val: 'product',
          top: 0,
          isActive: false,
          display: t('v103.details.righttitle.d2')
        },
        {
          val: 'price',
          top: 0,
          isActive: false,
          display: t('v103.details.righttitle.d3')
        },
        {
          val: 'warning',
          top: 0,
          isActive: false,
          display: t('v103.details.righttitle.d4')
        },
        {
          val: 'tips',
          top: 0,
          isActive: false,
          display: t('v103.details.righttitle.d5')
        },
        {
          val: 'cancelTips',
          top: 0,
          isActive: false,
          display: t('v103.details.righttitle.d6')
        }
      ],
      priceListHeight: 0,
      stickyHeight: 0,
      zoomDiyContext: 1
    })
    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'))
    }

    watch(()=>data.days,(n, o) => {
      data.days =  n
    },{immediate: true,deep: true})
    const methods = {
      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) {
        // console.log(document.querySelector('#scrollId .q-scrollarea__container').scrollTop, '...............')
        let temp =  document.querySelector('#scrollId .q-scrollarea__container').scrollTop
        // if(temp-data.currentHeight>0){
        //   data.scrollDirection='down'
        // }else{
        //   data.scrollDirection='up'
        // }
        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
        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 => {
            $q.loading.hide()
            if (r.data.resultCode == ApiResult.SUCCESS) {
              if (r.data.data) {
                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 => {
            $q.loading.hide()
            message.errorMsg(e.message)
          })
      },
      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)
      }
    }

    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)
}
</style>
