<template>
  <div class="" style="min-height: 80vh;overflow: hidden;">
    <div v-if="dataList && !$q.loading.isActive"
    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.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>
            <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
                >{{ 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 iconnetwork-fill"
                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.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
              :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>
      <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-mt-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="calendarMobile"
                ></calendar>
              </q-popup-proxy>
            </q-field>
            <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">
                <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"
                    :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 }"
      >
        <!-- col q-ml-xl position-relative -->
        <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
          "
        >
        <!--  style="position: sticky; top: 100px" -->
          <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 v-if="dataList.teamType!=2" class="block" :src="x.header" width="100%"> -->
                <img class="block" :src="x.page" style="width: 100%">
                <div class="tripImages-footer">
                  <!-- <img v-if="dataList.tripColor" class="block" :src="x.footer" style="width: 100%"> -->
                </div>
              </div>
              </template>
            <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>
            <!--
              <template
                v-if="
                  (dataList.priceList.length > 0 &&
                    dataList.priceList &&
                    dataList.priceList[0].teamType == 2) ||
                  (dataList.currentPrice && dataList.currentPrice.teamType == 2)
                "
              >
                <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 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="col-1"></div> -->
          <!-- col q-ml-xl position-relative -->
          <div
          class="absolute" style="z-index: 999;right: -150px;"
          :style="{'top':currentHeight<1000?'1000px':(currentHeight+100)+'px'}">
            <!--  style="position: sticky; top: 100px" -->
            <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/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";
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: {
        configId: "",
        cityId: 0,
        preview: 0,
        tcid: 0,
        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,
    };
  },
  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('----异常')
            }
            // setTimeout(()=>{
            //   that.getTopNum(JSON.stringify(that.days))
            // },1000)
        })
      },
      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.id) {
      this.msg.configId = decodeURIComponent(this.$route.params.id);
    }
    if (this.$route.params.tcid) {
      this.msg.tcid = decodeURIComponent(this.$route.params.tcid);
    }
    if (this.$route.params.newConfigId) {
      this.msg.newConfigId = decodeURIComponent(this.$route.params.newConfigId);
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    if (localStorage.baseifo) {
      this.TripConfig = JSON.parse(window.localStorage.getItem("baseifo"));
    }
    this.getData();
    window.addEventListener("scroll", this.menu);
    // this.getCarData();
  },
  methods: {
    getTripFeatureImageHandler(configId){
      this.$axios.get("http://upload.oytour.com/Home/GetTripImage?configId="+configId).then(r=>{
        console.log(r.data,'r.data.data.id')
        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) {
        // this.currentPrice=null
        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;
      // if(temp-this.currentHeight>0){
      //   this.scrollDirection='down'
      // }else{
      //   this.scrollDirection='up'
      // }
      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("#/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=null;
      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));
      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
      console.log(this.$q.loading)
      this.apipost(
        "b2b_get_GetB2BTravelInfoV1",
        this.msg,
        (r) => {
          try {
            if (r.data.resultCode == 1 && r.data.data.id>0) {
              console.log(r.data.data,'shopRemark----------')
              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)
                })
              }
              // tripImageList detailsImageList headerImage footerImage
              // this.getTripFeatureImageHandler(r.data.data.id)
              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.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.currentHeight -
                    //   60;
                    x.top = this.$refs[x.val].getBoundingClientRect().top
                  });
                  // this.priceListHeight =
                  //   this.$refs.pricelist.getBoundingClientRect().top +
                  //   this.currentHeight -
                  //   60;
                  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) {
                  // console.log(document.querySelector('#scrollId .q-page-container'))
                  // console.log('异常信息', error)
                }
              });
            }
          } catch (error) {}
          this.$q.loading.hide();
        },
        e=>{
          this.$q.loading.hide();
        }
      );
    },
    changeCityHandler(unionCity) {
      this.currentPrice.originalB2CPrice = this.currentPrice.RealPrice;
      if (unionCity.cityId != this.dataList.startCityId) {
        if (unionCity.backFlight && unionCity.backFlight.addPrice) {
          this.currentPrice.originalB2CPrice += unionCity.backFlight.addPrice;
        }
        if (unionCity.goFlight && unionCity.goFlight.addPrice) {
          this.currentPrice.originalB2CPrice += unionCity.goFlight.addPrice;
        }
      }
      console.log(this.$refs);
      if (this.$q.platform.is.desktop)
        this.$refs.calendar.changePriceHandler(
          this.currentPrice.startDate,
          this.currentPrice.originalB2CPrice
        );
      this.$forceUpdate();
    },
    //  获取车的详情
    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) {
                // 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>
.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>
