<template>
  <div class="" style="min-height: 80vh; overflow: hidden">
    <div v-if="dataList && (!$q.loading.isActive || loadCount>0)" class="relative" style="margin: auto"
      :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: 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"
            v-if="dataList.VisaB2CPrice > 0">
            <span>CNY {{ moneyFormat(dataList.VisaB2CPrice, 0) }}</span>
          </span>
          <q-btn color="primary" unelevated class="q-px-xl" label="立即訂購" @click="goOrderHandler" />
        </div>
      </div>
      <div v-if="dataList" style="margin-left: auto; margin-right: auto"
        :style="{ 'max-width': $q.platform.is.desktop ? '1200px' : '100%' }"
        :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="dataList.VisaCountryName" class="cursor-pointer" />
            <q-breadcrumbs-el v-if="$q.platform.is.desktop" :label="dataList.Name" class="text-grey-6 ellipsis" />
          </q-breadcrumbs>
          <div class="text-grey-6 f12">Product No. # {{ dataList.Id }}</div>
        </div>
        <div class="row">
          <div class="col-6" 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.CoverImage" :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="col-6">
            <div class="row">
              <div class="text-weight-bold text-h6 ellipsis-2-lines">{{ dataList.Name }}</div>
              <q-chip
                  v-if="dataList.VisaType"
                  style="background: #26a69a1a"
                  size="sm"
                  class="f12 rounded-borders text-secondary"
                  :label="dataList.VisaType==1?'个签':dataList.VisaType==2?'团签':''"
                />
            </div>
            <div class="q-py-lg">
              <div class="row" v-if="dataList.TypeTagList">
                <span class="col-2 text-dark">签证类型</span>
                <span class="col text-grey-7" v-for="(x,index) in dataList.TypeTagList">
                  {{ x.TagTame }}
                  <template v-if="dataList.TypeTagList.length-1!=index">; </template>
                </span>
              </div>
              <div class="row q-pt-xs" v-if="dataList.ManageDuration">
                <span class="col-2 text-dark">办理时长</span>
                <span class="col text-grey-7">
                  收齐资料后需{{ dataList.ManageDuration }}个工作日
                </span>
              </div>
              <div class="row q-pt-xs" v-if="dataList.EntryType">
                <span class="col-2 text-dark">入境次数</span>
                <span class="col text-grey-7">
                  {{ dataList.EntryType==1?'单次':dataList.EntryType==2?'多次':'' }}
                </span>
              </div>
              <div class="row q-pt-xs" v-if="dataList.StayDays">
                <span class="col-2 text-dark">可停留天数</span>
                <span class="col text-grey-7">
                  {{ dataList.StayDays }}
                </span>
              </div>
              <div class="row q-pt-xs" v-if="dataList.VisaValidity">
                <span class="col-2 text-dark">签证有效期</span>
                <span class="col text-grey-7">
                  {{ dataList.VisaValidity }}
                </span>
              </div>
              <div class="row q-pt-lg" v-if="dataList.VisaProductInfo&&dataList.VisaProductInfo.AcceptRange">
                <span class="col-2 text-dark">受理范围</span>
                <div class="col text-grey-7">
                  <span class="col">
                    {{ dataList.VisaProductInfo.AcceptRange }}
                  </span>
                </div>
              </div>
            </div>
          </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.Name }}</div> -->
            <div class="q-mt-md f12 text-grey-6">
              <span v-if="dataList.SendCityName" class="q-pr-md">
                <span class="text-grey-9">送签地：</span>
                <span>{{ dataList.SendCityName }}</span>
              </span>
              <template v-if="dataList.ProductTagList&&dataList.ProductTagList.length>0">
                  <template v-for="item in dataList.ProductTagList">
                    <q-chip v-if="item.TagTame!=''"
                      style="background: #26a69a1a"
                      size="sm"
                      class="f12 rounded-borders text-secondary"
                      :label="item.TagTame"
                    />
                  </template>
                </template>
                <template v-if="dataList.FeatureTagList&&dataList.FeatureTagList.length>0">
                  <template v-for="item in dataList.FeatureTagList">
                    <q-chip v-if="item.TagTame!=''"
                      style="background: #26a69a1a"
                      size="sm"
                      class="f12 rounded-borders text-secondary"
                      :label="item.TagTame"
                    />
                  </template>
                </template>
            </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 iconcancel" label="取消需二次確認" />
            </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.VisaB2CPrice > 0">
              CNY：{{ moneyFormat(dataList.VisaB2CPrice, 0) }}
            </div>
            <div v-else class="text-subtitle1 text-grey-6">無報價</div>
            <q-btn color="primary" label="立即訂購" unelevated :disable="dataList.VisaB2CPrice > 0 ? false : true"
              @click="goOrderHandler" :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 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-xl row"
        :class="{ 'q-px-md': $q.screen.width < 1220 && $q.screen.width > 760 }">
        <div class="absolute" style="z-index: 999; left: -150px" :style="{
            top:
              currentHeight > navs[1].top
                ? currentHeight + 100 + 'px'
                : currentHeight + 200 + 'px',
          }" v-if="
            $q.platform.is.desktop &&
            currentHeight > navs[1].top - 400 &&
            currentHeight < navs[2].top &&
            dataList.dayList.length > 3
          ">
          <div v-if="true">
            <div v-for="(x, i) in days" :key="i">
              <div v-if="moreDays == 2 && i == 0" style="text-align: center; margin-bottom: 21px; cursor: pointer"
                @click="goScrollHandler(x.top + 50), (moreDays = 1)">
                ...
              </div>
              <div v-if="((moreDays && moreDays == 1) || !moreDays) && i < 8"
                class="trip-module text-subtitle2 cursor-pointer q-mb-lg" @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 v-if="moreDays && moreDays == 2 && i >= 8" class="trip-module text-subtitle2 cursor-pointer q-mb-lg"
                @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 v-if="(!moreDays || moreDays == 1) && days.length > 8 && i == 8"
                style="text-align: center; cursor: pointer" @click="goScrollHandler(x.top + 50), (moreDays = 2)">
                ...
              </div>
            </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" 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.VisaProductInfo.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" v-html="dataList.VisaProductInfo.FeeNonInclude" :class="{
              'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
            }"></div>
          <div class="text-h5 text-weight-bold text-left q-pt-lg q-pb-sm" ref="visa" :class="{
              'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
            }">
            签证材料
          </div>
          <div class="q-mt-md trip-text" v-html="dataList.VisaProductInfo.VisaMaterials" :class="{
              'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
            }"></div>
          <div v-if="dataList.DownloadName" class="q-mt-md trip-text row justify-end" :class="{
              'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
            }">
              <span class="text-red-6">{{ dataList.DownloadName }}</span>
                <q-chip
                      style="background: #26a69a1a"
                      size="sm"
                      class="f12 rounded-borders text-secondary q-ml-lg cursor-pointer"
                      label="下载" @click="downloadHandler"
                    />  
          </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.VisaProductInfo.WarmTip ? dataList.VisaProductInfo.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" :class="{
              'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
            }">
            预订流程
          </div>
          <div>{{ dataList.VisaProductInfo.ReservationProcess }}</div> -->
          <div class="q-mt-lg f12 text-grey-6" ref="journeyLookOut">
            <q-icon name="iconfont icontishi" class="q-mr-sm" />
            <span>注意：由于站内商品来自全球各地，订单取消时间将依该供应商所在时区判定。供应商需
              2-5
              个工作天进行取消流程，依照您购买的商品取消政策收取手续费，并于取消流程完成后14
              个工作天内退款。</span>
          </div>
        </div>
        <template v-if="
            $q.platform.is.desktop &&
            currentHeight > 130 &&
            $refs.journeyLookOut.getBoundingClientRect().top + currentHeight - 280 >
              currentHeight
          ">
          <div class="absolute" style="z-index: 999; right: -150px"
            :style="{ top: currentHeight < 1000 ? '1000px' : currentHeight + 100 + 'px' }">
            <div>
              <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 v-if="!dataList && !$q.loading.isActive" class="text-center q-my-xl">
      <none-data iconType="order" title="沒有找到您想要的商品哦" subtitle="趕緊去挑選心儀的旅遊產品吧"></none-data>
    </div>
  </div>
</template>

<script>
  import {
    slider,
    slideritem
  } from "vue-concise-slider";
  import calendar from "../components/trip/calendarproduct.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";
  import Flight from "src/components/trip/flight.vue";
  import NoneData from "src/components/common/noneData.vue";
  export default {
    props: [],
    data() {
      return {
        columns: [{
            name: "cityName",
            required: true,
            label: "城市",
            align: "left",
          },
          {
            name: "shopName",
            required: true,
            label: "購物店名稱",
            align: "left",
          },
          {
            name: "visitTime",
            required: true,
            label: "預計停留時間",
            align: "left",
          },
        ],
        tab: "",
        searchDate: "",
        clickDate: "",
        slide: 1,
        msg: {
          Pid: 0,
        },
        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: false,
          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: "price",
            top: 0,
            isActive: false,
            display: "費用說明",
          },
          {
            val: "visa",
            top: 0,
            isActive: false,
            display: "签证材料",
          },
          {
            val: "tips",
            top: 0,
            isActive: false,
            display: "溫馨提示",
          },
        ],
        priceListHeight: 0,
        stickyHeight: 0,
        zoomDiyContext: 1,
        detailsImageList: [],
        tripImages: [],
        moreDays: 0,
        calLoading: false,
        loadCount: 0,
      };
    },
    components: {
      slider,
      slideritem,
      calendar,
      OrderPreview,
      smaple,
      Trip,
      block,
      Flight,
      NoneData,
    },
    watch: {
      days: {
        handler: function (val, oldval) {
          this.days = val;
          let that = this;
          this.$nextTick(() => {
            try {
              that.days.forEach((x, i) => {
                var object = document.getElementById(`days_${i}`);
                x.top = object.getBoundingClientRect().top + 60;
              });
            } catch (error) {
              console.log("watch_days_handler", error);
            }
          });
        },
        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() {
      if (this.$route.params.Pid) {
        this.msg.Pid = decodeURIComponent(this.$route.params.Pid);
      }
    },
    mounted() {
      window.addEventListener("scroll", this.handleScroll);
      if (localStorage.baseifo) {
        this.TripConfig = JSON.parse(window.localStorage.getItem("baseifo"));
      }
      this.getData();
      window.addEventListener("scroll", this.menu);
    },
    methods: {
      goOrderHandler(){
        let order = {
          Pid:this.msg.Pid,
        }
        let key = this.$md5(JSON.stringify(order))
        let lineVisas = localStorage.getItem('lineVisas')
        lineVisas = lineVisas?JSON.parse(lineVisas):[]
        lineVisas.push({
          key,
          order
        })
        localStorage.setItem("lineVisas",JSON.stringify(lineVisas))
        this.CommonJump('/visaOrderPriview/'+key, {});
      },
      downloadHandler(){
        window.open(this.dataList.VisaProductInfo.DownloadMaterials) 
      },
      getTripFeatureImageHandler(configId) {
        this.$axios
          .get("http://upload.oytour.com/Home/GetTripImage?configId=" + configId)
          .then((r) => {
            if (r.data.OtherFile) {
              this.tripImages = [];
              let OtherFile = r.data.OtherFile;
              let length = OtherFile.length;
              let header = OtherFile[length - 1];
              let footer = OtherFile[length - 2];
              if (OtherFile[0].indexOf("footer") != -1) {
                header = OtherFile[1];
                footer = OtherFile[0];
              }
              OtherFile.forEach((x, i) => {
                let obj = {
                  header: header,
                  page: x,
                  footer: footer,
                };
                if (OtherFile[0].indexOf("footer") != -1) {
                  if (i > 1) {
                    this.tripImages.push(obj);
                  }
                } else {
                  if (i < length - 2) {
                    this.tripImages.push(obj);
                  }
                }
              });
              this.$forceUpdate();
            }
          });
      },
      changeShowOrderPreviewHandler() {
        this.showOrderPreview = !this.showOrderPreview;
        if (!this.showOrderPreview) {
          if (this.currentPrice) {
            this.currentPrice.isSupportChildren = null;
            this.currentPrice.unionCityList = null;
            this.currentPrice.singleRoomPrice = 0;
            this.currentPrice.originalB2CPrice = 0;
          }
          this.changeTripShowHandler();
        }
      },
      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;
          });
        });
      },
      handleScroll(e) {
        let temp = this.getScroll().top;
        this.stickyHeight = document.querySelector(".q-header--hidden") ?
          "translateY(0px)" :
          "translateY(45px)";
        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("#/detailsProduct/") == -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) {

      },
      seekedChangeHandler(e) {

      },
      resetHandler() {
        if (this.currentPrice) {
          this.currentPrice.isSupportChildren = null;
          this.currentPrice.unionCityList = null;
          this.currentPrice.singleRoomPrice = 0;
          this.currentPrice.originalB2CPrice = 0;
        }
        if (this.$q.platform.is.mobile) this.$refs.calendarMobile.reset();
        else this.$refs.calendar.reset();
      },
      changeChosenDateHandler(val) {
        val.price.version = new Date().getTime();
        this.currentPrice = JSON.parse(JSON.stringify(val.price));
        if (this.currentPrice.id != this.msg.tcid) {
          this.msg.tcid = this.currentPrice.id;
          this.msg.configId = this.currentPrice.configID;
          this.getData();
        }
        this.currentPrice.unionCityList.splice(0, 0, {
          cityId: this.dataList.startCityId,
          cityName: this.dataList.startCityName,
        });
        this.currentPrice.RealPrice = this.currentPrice.RealPrice ?
          this.currentPrice.RealPrice :
          this.currentPrice.originalB2CPrice;
        this.currentPrice.originalB2CPrice = this.currentPrice.RealPrice;
        if (
          this.currentPrice.unionCityList &&
          this.currentPrice.unionCityList.length > 0 &&
          this.dataList.startCityId != 0
        ) {
          if (
            this.currentPrice.unionCityList.findIndex(
              (x) => x.cityId == this.dataList.startCityId
            ) == -1
          ) {
            this.currentPrice.unionCityList.splice(0, 0, {
              cityId: this.dataList.startCityId,
              cityName: this.dataList.startCityName,
            });
          }
        }
        if (this.$q.platform.is.mobile) {
          this.$refs.qDateProxy.hide();
        }
        this.$forceUpdate();
        this.$nextTick(() => {
          this.changeTripShowHandler();
        });
      },
      showDialog() {
        this.isShowDialog = true;
      },
      //关闭弹窗
      closeDialog() {
        this.isShowDialog = false;
      },
      getData() {
        this.$q.loading.show();
        let that = this;
        this.apipost(
          "b2c_get_GetB2CVisaProductInfo",
          this.msg,
          (r) => {
            try {
              if (r.data.resultCode == 1 && r.data.data.Id > 0) {
                this.tripImages = [];
                this.detailsImageList = [];
                this.dataList = r.data.data;
                let arr = this.dataList.VisaProductInfo.DownloadMaterials.split('/')
                if(arr.length > 0){
                  this.dataList.DownloadName = arr[arr.length - 1]
                }
                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);
                      }
                    });
                    if (this.citys.length > 0) {
                      this.citys = Array.from(new Set(this.citys));
                    }
                  }
                }
                this.dataList.imgCover = JSON.parse(this.dataList.imgCover);

                this.dataList.priceList&&this.dataList.priceList.forEach(x => {
                  x.realOrgainB2CPrice = x.originalB2CPrice
                  x.originalB2CPrice = x.b2CPrice
                })

                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(() => {
                  setTimeout(() => {
                    this.navs.forEach((x) => {
                      x.top = this.$refs[x.val].getBoundingClientRect().top;
                    });
                    this.priceListHeight = this.$refs.pricelist.getBoundingClientRect().top;
                  }, 1000);

                  try {
                    document
                      .querySelector("#scrollId .q-page-container")
                      .addEventListener("scroll", this.handleScrollDay);
                  } catch (error) {
                    
                  }
                });
              }
            } catch (error) {}
            this.$q.loading.hide();
            this.loadCount++
          },
          (e) => {
            this.$q.loading.hide();
            this.loadCount++
          }
        );
      },
      changeCityHandler(unionCity) {
        this.msg.cityId = unionCity.cityId
        this.getData();
      },
      //  获取车的详情
      getCarData() {
        this.$q.loading.show();
        this.apipost(
          "b2c_get_GetCarSingleProductDetail", {
            ProductId: "16"
          },
          (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.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(() => {
                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;
                }, 1000);

                try {
                  document
                    .querySelector("#scrollId .q-page-container")
                    .addEventListener("scroll", this.handleScrollDay);
                } catch (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>
  .line-feature * {
    line-height: normal !important;
  }

  .line-feature .draggable {
    position: absolute;
  }

  .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 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);
  }

  .large-feature img {
    width: 100% !important;
  }

  .tripImages-footer {
    background: url("../assets/img/trip/otherBjThree.jpg") repeat;
    padding: 115px 0 32px 0;
  }

</style>
