<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: 999;
      "
      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">起</span>
        </span>
        <q-btn
          color="primary"
          unelevated
          class="q-px-xl"
          label="選擇方案"
          @click="goScrollHandler(priceListHeight)"
        />
      </div>
    </div>
    <div
      v-if="dataList"
      style="max-width: 1200px; margin-left: auto; margin-right: auto"
      :class="{ 'q-px-md': $q.screen.width < 1220 }"
    >
      <div class="row items-center q-mt-md q-mb-lg">
        <q-breadcrumbs
          class="col f12 no-wrap q-mr-md"
          v-if="dataList"
          style="font-size: 13px"
        >
          <q-breadcrumbs-el
            icon="home"
            label="首頁"
            class="cursor-pointer"
            @click="CommonJump('/index', {})"
          />
          <q-breadcrumbs-el label="日本" class="cursor-pointer" />
          <q-breadcrumbs-el>
            <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>
          </q-breadcrumbs-el>
          <q-breadcrumbs-el
            v-if="$q.platform.is.desktop"
            :label="dataList.title"
            class="text-grey-6 ellipsis"
          />
        </q-breadcrumbs>
        <div class="text-grey-6 f12">Product No. # {{ dataList.id }}</div>
      </div>
      <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"
        >
          <slider
            ref="slider"
            :options="options"
            @slide="slideHandler"
            style="height: 100%"
          >
            <slideritem
              v-if="dataList.videoStr"
              style="width: 80%"
              class="q-mx-sm"
              key="video"
            >
              <vue-core-video-players
                ref="video"
                :src="dataList.videoStr"
                :title="dataList.title"
                :muted="true"
                :autoplay="false"
                @play="playHandler"
                @pause="pauseHandler"
                @seeked="seekedChangeHandler"
                @timeupdate="timeChangeHandler"
                logo="../statics/img/transparent_logo.png"
                :loop="false"
                id="trip_video"
              />
            </slideritem>
            <slideritem
              v-for="(item, index) in dataList.imgCover"
              :key="index"
              style="width: 80%"
              class="q-mx-sm"
            >
              <q-img :src="item.Url" spinner-color="grey" spinner-size="20px" />
            </slideritem>
            <div slot="loading">loading...</div>
          </slider>
        </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=" 印象自組團"
            />
            <q-chip
              class="transparent q-mr-xl no-padding"
              square
              icon="iconfont icontime"
              :label="` 行程時間 ${dataList.dayList.length} 天`"
            />
            <q-chip
              class="transparent q-mr-xl no-padding"
              square
              icon="iconfont iconnetwork-fill"
              label="日本語/中文 導覽"
            />
            <q-chip
              class="transparent q-mr-xl no-padding"
              square
              icon="iconfont iconcancel"
              label="15天前可免費取消"
            />
          </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">起</span>
          </div>
          <div v-else class="text-subtitle1 text-grey-6">暫無報價</div>
          <q-btn
            color="primary"
            label="選擇方案"
            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
    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"
      class="q-pa-lg bg-grey-3 q-mt-lg text-grey-9"
      ref="pricelist"
    >
      <div style="max-width: 1200px; margin-left: auto; margin-right: auto">
        <div class="text-h6">選擇方案</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="選擇日期、選項" 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="calendar"
                ></calendar>
            </q-popup-proxy>
          </q-field>
          <order-preview class="q-pa-md"
            :price="currentPrice"
            @reset="resetHandler"
          ></order-preview>
        </div>
        
        <div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">所選方案詳情</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">行程標準出行方案</span>
                <q-chip
                  square
                  color="orange"
                  size="sm"
                  text-color="grey-2"
                  class="text-light"
                  label="15天前可免費取消"
                />
              </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 ? '取消選擇' : '選擇'"
                  @click="showOrderPreview = !showOrderPreview"
                  class="q-px-lg"
                />
              </div>
              <div class="text-info q-mt-md text-right">
                最早可預訂日期：{{ 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">
                關於此方案
              </div>
              <q-chip
                class="transparent q-mr-xl no-padding"
                square
                icon="iconfont iconcancel"
                label="15天前可免費取消"
              />
              <q-chip
                class="transparent q-mr-xl no-padding"
                square
                icon="iconfont iconroundcheck"
                label="6個工作日內（不含例休假）確認"
              />
            </div>
            <div class="q-mt-lg row" v-if="$q.platform.is.desktop">
              <div class="col" >
                <calendar
                  :priceList="dataList.priceList"
                  @change="changeChosenDateHandler"
                  ref="calendar"
                ></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="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 + 450)"
          :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" ref="feature" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">
          行程特色
        </div>
        <div
          class="q-mt-md trip-text q-pb-xl"
          v-html="dataList.feature.featureContent"
          v-if="dataList.feature.featureContent != ''"
        ></div>
        <div
          class="q-mt-md q-pb-xl"
          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" ref="product" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">
          行程介紹
        </div>
        <div class="q-pb-xl" >
          <smaple :trip="dataList" :class="{'q-px-md': $q.screen.width < 1220&&$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" ref="price" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">
          費用說明
        </div>
        <div class="text-subtitle1 text-weight-bold q-my-md" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">費用包含</div>
        <div
          class="q-mt-md trip-text"
          v-html="dataList.feature.feeInclude"
          :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}"
        ></div>
        <div class="text-subtitle1 text-weight-bold q-my-md" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">費用不含</div>
        <div
          class="q-mt-md trip-text q-pb-xl"
          v-html="dataList.feature.feeNonInclude"
          :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}"
        ></div>
        <div class="text-h5 text-weight-bold text-left q-mt-xl" ref="warning" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">
          購買須知
        </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?dataList.feature.importantTip:'暂无购买须知'"
          :class="{'q-mx-md': $q.screen.width < 1220&&$q.platform.is.mobile}"
        ></div>
        <div class="text-h5 text-weight-bold text-left q-mt-xl" ref="tips" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">
          溫馨提示
        </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?dataList.feature.warmTip:'暂无溫馨提示'"
          :class="{'q-mx-md': $q.screen.width < 1220&&$q.platform.is.mobile}"
        ></div>
        <div
          class="text-h5 text-weight-bold text-left q-mt-xl"
          ref="cancelTips"
          :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}"
        >
          取消政策
        </div>
        <div class="q-mt-lg trip-text q-mb-xl" :class="{'q-mx-md': $q.screen.width < 1220&&$q.platform.is.mobile}">
          <ul class="no-padding text-grey-9 q-ml-md">
            <li>所选日期 15 天（含）之前取消，收取手续费 0%</li>
            <li class="q-mt-sm">所选日期 8 ~ 14 天之间取消，收取手续费 30%</li>
            <li class="q-mt-sm">所选日期 4 ~ 7 天之间取消，收取手续费 50%</li>
            <li class="q-mt-sm">所选日期 1 ~ 3 天之间取消，收取手续费 80%</li>
            <li class="q-mt-sm">所选日期 0 ~ 0 天之间取消，收取手续费 100%</li>
          </ul>
          <div class="q-mt-lg f12 text-grey-6">
            <q-icon name="iconfont icontishi" class="q-mr-sm" />
            <span
              >注意：由于站内商品来自全球各地，订单取消时间将依该供应商所在时区判定。供应商需
              2-5
              个工作天进行取消流程，依照您购买的商品取消政策收取手续费，并于取消流程完成后14
              个工作天内退款。</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>
</template>

<script>
import { slider, slideritem } from "vue-concise-slider";
import calendar from "../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 headStyle4 from "../components/trip/style4";
import headStyle5 from "../components/trip/style5";
import block from 'src/components/trip/block/index'
export default {
  props: [],
  data() {
    return {
      tab: '',
      searchDate:'',
      clickDate: '',
      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: [
        "未满 2 岁幼儿不占位可免费参加（不含座位，餐点，门票，床位），请先于下订时在「备注栏」告知。",
        "如需要單人房，請購買單房",
        "不占床2-11(包含)岁幼童可购买儿童价，如需占床請購買成人價",
        "12歲以上皆視同成人售價",
      ],
      showOrderPreview: false,
      videoPosition: 0,
      currentHeight: 0,
      isPictureInPicture: false,
      days: [
      {
          val: '',
          top: 0,
          isActive: false,
          display: '',
        },
      ],
      navs: [
        {
          val: "feature",
          top: 0,
          isActive: false,
          display: "行程特色",
        },
        {
          val: "product",
          top: 0,
          isActive: false,
          display: "產品介紹",
        },
        {
          val: "price",
          top: 0,
          isActive: false,
          display: "費用說明",
        },
        {
          val: "warning",
          top: 0,
          isActive: false,
          display: "購買須知",
        },
        {
          val: "tips",
          top: 0,
          isActive: false,
          display: "溫馨提示",
        },
        {
          val: "cancelTips",
          top: 0,
          isActive: false,
          display: "取消政策",
        },
      ],
      priceListHeight: 0,
      stickyHeight: 0,
      zoomDiyContext: 1,
    };
  },
  components: {
    slider,
    slideritem,
    calendar,
    OrderPreview,
    smaple,
    Trip,
    block
  },
  watch: {
    days: {
      handler: function (val, oldval) {
       this.days =  val
      },
      immediate: true,
      deep: true
    },
    currentHeight: {
      handler: function (val, oldval) {
       this.navs.forEach((x,i)=>{
        if(x.top&&(this.currentHeight >= x.top&&(i==(this.navs.length - 1)||this.currentHeight < this.navs[i+1].top))){
          if(this.tab!=x.display){
            this.tab=x.display
            return
          }else{
            return
          }
        }
       })
      },
      immediate: false,
      deep: true
    },
  },
  created() {
    try {
      window.addEventListener("scroll", this.handleScroll);
    } catch (error) {}
    if (this.$route.params.id) {
      this.msg.configId = decodeURIComponent(this.$route.params.id);
    }
    if (this.$route.params.tcid) {
      this.msg.tcid = decodeURIComponent(this.$route.params.tcid);
    }
  },
  mounted() {
    if (localStorage.baseifo) {
      this.TripConfig = JSON.parse(window.localStorage.getItem("baseifo"));
    }
    this.getData();
    window.addEventListener("scroll", this.menu);
  },
  methods: {
    getTopNum(x){
      this.days = JSON.parse(x)
    },
    changeTripShowHandler() {
      this.$nextTick(() => {
        this.navs.forEach((x) => {
          x.top =
            this.$refs[x.val].getBoundingClientRect().top +
            this.currentHeight -
            60;
          console.log(x.top);
        });
      });
    },
    handleScroll(e) {
      let temp = this.getScroll().top;
      // if(temp-this.currentHeight>0){
      //   this.scrollDirection='down'
      // }else{
      //   this.scrollDirection='up'
      // }
      this.stickyHeight = document.querySelector(".q-header--hidden")
        ? "translateY(0px)"
        : "translateY(85px)";
      this.currentHeight = temp;
      if (
        this.videoPosition > 0 &&
        this.videoPosition < this.currentHeight &&
        this.options.currentPage == 0 &&
        !this.isPictureInPicture
      ) {
        this.isPictureInPicture = true;
        let t = document.querySelectorAll("video")[0];
        try {
          t.requestPictureInPicture();
        } catch (error) {}
      } else if (
        this.videoPosition > 0 &&
        this.videoPosition > this.currentHeight &&
        this.options.currentPage == 0 &&
        this.isPictureInPicture
      ) {
        this.isPictureInPicture = false;
        document.exitPictureInPicture();
      }
      let h = document.location.hash;
      if (h.indexOf("#/detail/") == -1) {
        window.removeEventListener("scroll", this.handleScroll);
      }
    },
    getScroll() {
      return {
        left:
          window.pageXOffset ||
          document.documentElement.scrollLeft ||
          document.body.scrollLeft ||
          0,
        top:
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop ||
          0,
      };
    },
    
    goScrollHandlerDay(top) {
      window.scrollTo(0, top);
    },
    goScrollHandler(top) {
      window.scrollTo(0, top);
    },
    slideHandler(e) {
      this.options.currentPage = e.currentPage;
      if (e.currentPage != 0 && this.$refs.video && this.$refs.video.isPlaying) {
        this.$refs.video.pause();
      }
    },
    playHandler(e) {},
    pauseHandler(e) {},
    timeChangeHandler(e) {
      //console.log(e)
    },
    //
    seekedChangeHandler(e) {
      //console.log(e)
    },
    resetHandler() {
      this.currentPrice.startDate = ''
      this.$refs.calendar.reset();
    },
    changeChosenDateHandler(val) {
      val.price.version = new Date().getTime();
      this.currentPrice = JSON.parse(JSON.stringify(val.price));
      this.$refs.qDateProxy.hide()
    },
    showDialog() {
      this.isShowDialog = true;
    },
    //关闭弹窗
    closeDialog() {
      this.isShowDialog = false;
    },
    getData() {
      this.$q.loading.show();
      this.apipost(
        "b2b_get_GetB2BTravelInfoV1",
        this.msg,
        (r) => {
          if (r.data.resultCode == 1) {
            this.dataList = r.data.data;
            if (this.dataList.dayList && this.dataList.dayList.length > 0) {
              this.dataList.dayList.forEach((item) => {
                item.slide = 0;
              });
              if (r.data.data.scenicList) {
                r.data.data.scenicList.forEach((x) => {
                  if (x.cityName) {
                    this.citys.push(x.cityName);
                  }
                });
              }
            }
            this.dataList.imgCover = JSON.parse(this.dataList.imgCover);
            this.dayList = this.dataList.dayList;
            

            this.isShow = true;
            this.isDirect = this.dataList.isDirect;
            if (this.dataList.videoStr && this.dataList.videoStr != "") {
              this.options.loop = false;
              this.options.currentPage = 1;
              this.$nextTick(() => {
                setTimeout(() => {
                  let t = document.querySelectorAll(".slider-wrapper");
                  if (t.length > 0) {
                    let d = t[0].getBoundingClientRect();
                    this.videoPosition = d.top + d.height;
                  }
                }, 1000);
              });
            }
            this.$nextTick(() => {
              if(this.dataList.feature.featureHtml!=''){
                let tw = parseFloat(
                    this.$refs.diyContext.getBoundingClientRect().width
                  ) / 1123.0
                if(this.$q.platform.is.mobile){
                    let zoombox = document.querySelector("#setZoom");
                    let div = zoombox.getElementsByTagName("div")[0]
                    div.style.zoom = document.documentElement.clientWidth/980.0
                }
                this.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);

              }
              setTimeout(() => {
                this.navs.forEach((x) => {
                x.top =
                  this.$refs[x.val].getBoundingClientRect().top +
                  this.currentHeight -
                  60;
                  
              });
              this.priceListHeight =
                this.$refs.pricelist.getBoundingClientRect().top +
                this.currentHeight -
                60;
                this.days = []
              this.dayList.forEach(x=>{
                let dayListObj = {
                  val: 'day'+x.dayNum,
                  top: 0,
                  isActive: false,
                  display: x.dayNum>9?x.dayNum:'0'+x.dayNum,
                }
                this.days.push(dayListObj)
              })
                
              }, 1000);

              try {
                document.querySelector('#scrollId .q-page-container').addEventListener('scroll', this.handleScrollDay)
              } catch (error) {
                // console.log(document.querySelector('#scrollId .q-page-container'))
                // console.log('异常信息', error)
              }
              
            });
          } else {
            this.$message.error(r.data.message);
          }
          this.$q.loading.hide();
        },
        null
      );
    },
    menu() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (this.scroll > 300) {
        this.isShowNav = true;
      } else {
        this.isShowNav = false;
      }
    },
    goNavList(val) {
      let newval = "#" + val;
      document.querySelector(newval).scrollIntoView(true);
    },
  },
};
</script>

<style>
.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-color-primary);
  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-color-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;
}
</style>
