<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
            )||$q.platform.is.mobile
        " :style="{ transform: $q.platform.is.mobile?0: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 {{ 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="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.aimPlaceName" class="cursor-pointer" />
            <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>{{ dataList.aimPlaceName }}
                <template v-if="citys.length > 0">
                  <span class="q-mx-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>
                </template>
              </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 v-if="dataList.dayList" 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 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.priceList.length > 0">
              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 :disable="dataList.priceList.length > 0 ? false : true"
              @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>
      <!-- box-shadow: 0 2px 8px rgb(0 0 0 / 20%); -->
      <div class="bg-white" style="
          position: fixed;
          left: 0;
          right: 0;
          top: 50px;
          border-top: 1px solid #eee;
          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">
            <div style="background: rgba(0, 0, 0, 0.05);border-radius: 4px;" 
            class="q-mt-md q-pa-sm relative" 
            @click="showDate = !showDate">
              <div class="fz12 absolute" style="left: 10px;top:5px">選擇日期、選項</div>
              <div class="fz14 self-center full-width no-outline q-pt-md " tabindex="0">
                {{ currentPrice.startDate }}
              </div>
            </div>
            <popup mode="top" v-model="showDate">
              <q-card flat class="rounded-borders">
                <calendar v-loading="calLoading" class="bg-white q-pa-md" :tcid="msg.tcid" :priceList="dataList.priceList" :dataList="dataList"
                  @change="changeChosenDateHandler" ref="calendarMobile"></calendar>
              </q-card>
            </popup>
            <order-preview :travel="dataList" :price="currentPrice" @reset="resetHandler"
              @changeCity="changeCityHandler" v-if="currentPrice && currentPrice.startDate"></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="取消需二次確認" />
                </div>
                <div class="text-grey f12">
                  <ul class="q-pl-md no-margin">
                    <li v-for="(x, i) in warnBuy" :class="{
                        'q-mt-md':
                          $q.platform.is.desktop | (i != 0 && $q.platform.is.mobile),
                      }" :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
                    {{ moneyFormat(dataList.priceList[0].originalB2CPrice, 0) }}</span>
                  <q-btn color="primary" outline :label="showOrderPreview ? '取消選擇' : '選擇'"
                    @click="changeShowOrderPreviewHandler" 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="取消需二次確認" />
                <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" v-loading="calLoading">
                <div class="col">
                  <calendar :priceList="dataList.priceList" :tcid="msg.tcid" :dataList="dataList" @change="changeChosenDateHandler"
                    ref="calendar"></calendar>
                </div>
                <div class="col q-ml-xl">
                  <order-preview :price="currentPrice" @reset="resetHandler" :travel="dataList"
                    @changeCity="changeCityHandler"></order-preview>
                </div>
              </div>
            </div>
          </div>
        </div>
      </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,
          }">
          <flight :price="currentPrice"></flight>
          <div class="text-h5 text-weight-bold text-left q-pb-sm" ref="feature" :class="{
              'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
            }">
            行程特色
          </div>
          <div>
            <div class="q-pb-xl" v-if="tripImages && tripImages.length > 0" ref="diyContext">
              <div v-for="(x, i) in tripImages">
                <img v-if="dataList.teamType != 2" class="block" :src="x.header" 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 line-feature large-feature" ref="diyContext"
              v-html="dataList.feature.featureContent" v-else-if="dataList.feature.featureContent != ''"></div>
            <div class="q-mt-md q-pb-xl line-feature" ref="diyContext" :style="{ zoom: zoomDiyContext }"
              v-html="dataList.feature.featureHtml" v-else-if="
                dataList.feature.featureHtml != '' &&
                (!tripImages || tripImages.length == 0)
              "></div>
          </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 v-if="dataList" :trip="dataList" class="q-pb-xl" :class="{ 'q-px-md': $q.platform.is.mobile }">
            </smaple>
            <template v-if="detailsImageList && detailsImageList.length > 0">
              <div v-for="(x, i) in detailsImageList" :id="`days_${i}`">
                <div class="tripImages-footer" v-if="!dataList.tripColor" style="padding: 20px 0"></div>
                <img class="block" :src="x.page" style="width: 100%" />
                <div class="tripImages-footer"></div>
              </div>
            </template>
            <template v-else>
              <template v-if="dataList.dayList.length <= 3">
                <trip :trip="dataList" @change="changeTripShowHandler"></trip>
              </template>
              <template v-if="dataList.dayList.length > 3">
                <block v-if="false" :currentHeightDay="currentHeight" :days="days" :tripList="dayList"
                  :isDirect="isDirect" :clickDate="clickDate"></block>
              </template>
            </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 q-pa-md rounded-borders q-mb-xl"
            style="border: 1px dashed var(--q-color-warning)" :class="{
              'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
            }">
            <div v-html="
                dataList.feature.shopRemark ? dataList.feature.shopRemark : '暫無購買說明'
              "></div>
            <div class="q-mb-lg text-weight-bold fz18">購物安排</div>
            <q-table :data="dataList.shopList" :columns="columns" bordered class="my-sticky-header-table no-shadow"
              :hide-bottom="true">
              <template v-slot:header>
                <q-tr class="bg-orange-1">
                  <q-th v-for="(item, i) in columns" :key="i" class="text-left">
                    <span class="fz14 text-weight-bold">{{ item.label }}</span>
                  </q-th>
                </q-tr>
              </template>
              <template v-slot:body="props">
                <q-tr :props="props">
                  <q-td key="cityName" :props="props">
                    <span>{{ props.row.cityName }}</span>
                  </q-td>
                  <q-td key="shopName" :props="props">
                    <span>{{ props.row.shopName }}</span>
                  </q-td>
                  <q-td key="visitTime" :props="props">
                    <span>{{ props.row.visitTime }}</span>
                  </q-td>
                </q-tr>
              </template>
            </q-table>
          </div>
          <div class="text-h5 text-weight-bold text-left q-mt-xl" ref="order" :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="visa" :class="{
              'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
            }">
            簽證
          </div>
          <div class="q-mt-lg trip-text q-pa-md rounded-borders q-mb-xl"
            style="border: 1px dashed var(--q-color-warning)" :class="{
              'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
            }">
            <div class="text-weight-bold fz18 q-mb-md">簽證須知</div>
            <div v-html="
                dataList.feature.visaRemark ? dataList.feature.visaRemark : '暫無簽證須知'
              "></div>
          </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 f12 text-grey-6" ref="journeyLookOut">
            <q-icon name="iconfont icontishi" class="q-mr-sm" />
            <span>注意：由于站内商品来自全球各地，订单取消时间将依该供应商所在时区判定。供应商需
              2-5
              个工作天进行取消流程，依照您购买的商品取消政策收取手续费，并于取消流程完成后14
              个工作天内退款。</span>
          </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 &&
            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";
  import popup from "../components/props/index";
  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: {
          configId: 0,
          cityId: 0,
          preview: 0,
          tcid: "",
          teamType: 0,
          isGetPriceFlight: true,
          pType: 1, //类型 1 来源B2C
          newConfigId: 0, //列表里的configId
        },
        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: "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: "order",
            top: 0,
            isActive: false,
            display: "訂單須知",
          },
          {
            val: "visa",
            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,
        detailsImageList: [],
        tripImages: [],
        moreDays: 0,
        calLoading: false,
        loadCount: 0,
        showDate: true,
      };
    },
    components: {
      slider,
      slideritem,
      calendar,
      OrderPreview,
      smaple,
      Trip,
      block,
      Flight,
      NoneData,
      popup
    },
    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.configId) {
        this.msg.configId = decodeURIComponent(this.$route.params.configId);
      }
      if (this.$route.params.id) {
        this.msg.tcid = decodeURIComponent(this.$route.params.id);
      }
      if (this.$route.params.teamType) {
        this.msg.teamType = this.$route.params.teamType;
      }
    },
    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: {
      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(54px)";
        if(this.$q.platform.is.mobile&&temp>54){
          this.stickyHeight = "translateY(0px)";
        }
        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(
          "b2b_get_Get2024B2BTravelInfoV1",
          this.msg,
          (r) => {
            try {
              if (r.data.resultCode == 1 && r.data.data.id > 0) {
                this.tripImages = [];
                this.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,
                    };
                    this.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,
                    };
                    this.detailsImageList.push(obj);
                  });
                }
                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);
                      }
                    });
                    if (this.citys.length > 0) {
                      this.citys = Array.from(new Set(this.citys));
                    }
                  }
                }
                this.dataList.imgCover = JSON.parse(this.dataList.imgCover);
                this.dayList = this.dataList.dayList;

                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(() => {
                  if (that.dataList.feature.featureHtml != "") {
                    let tw = parseFloat(
                      that.$refs.diyContext.getBoundingClientRect().width
                    ); // / 1123.0

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

                    that.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);
                  }
                  setTimeout(() => {
                    this.navs.forEach((x) => {
                      x.top = this.$refs[x.val].getBoundingClientRect().top;
                    });
                    this.priceListHeight = this.$refs.pricelist.getBoundingClientRect().top;
                    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);
                    });

                    if (this.days.length > 8) {
                      this.moreDays = 0;
                    } else {
                      this.moreDays = 1;
                    }
                  }, 1000);

                  try {
                    document
                      .querySelector("#scrollId .q-page-container")
                      .addEventListener("scroll", this.handleScrollDay);
                  } catch (error) {
                    
                  }
                });
              }
              if(this.$q.platform.is.mobile){
                setTimeout(() => {
                  this.showDate = false;
                }, 100);
              }
            } 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.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;

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