<template>
  <div class="" style="min-height: 80vh; overflow: hidden">
    <div
      v-if="dataList && (!$q.loading.isActive || loadCount>0)"
      class="relative"
      style="margin: auto"
      :style="{ 'max-width': $q.platform.is.desktop ? '1200px' : '100%' }"
    >
      <div
        style="
          position: fixed;
          left: 0;
          right: 0;
          top: 0;
          border-top: 1px solid #eee;
          box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
          z-index: 999;
        "
        class="bg-white"
        v-if="
          (currentHeight > navs[0].top + 100 && $q.platform.is.desktop) ||
          (currentHeight > priceListHeight &&
            currentHeight < navs[0].top &&
            $q.platform.is.mobile)
        "
        :style="{ transform: stickyHeight }"
      >
        <div
          style="max-width: 1200px; margin-left: auto; margin-right: auto"
          :class="{ 'q-px-md': $q.screen.width < 1220 }"
          class="q-py-sm row items-center"
        >
          <span
            class="col product-price text-subtitle1 text-weight-bold"
            style="text-align: left"
            v-if="dataList.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>
      <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 v-loading="calLoading"
                  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" v-loading="calLoading">
                <div class="col"> 
                  <calendar 
                    :priceList="dataList.priceList"
                    :tcid="msg.tcid"
                    @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 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: 0,
        cityId: 0,
        preview: 0,
        tcid: "",
        teamType: 0,
        isGetPriceFlight: true,
        pType: 1, //类型 1 来源B2C
        newConfigId: 0, //列表里的configId
        pType: 1,
      },
      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
    };
  },
  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.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.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) {
        if (this.currentPrice) {
          this.currentPrice.isSupportChildren = null;
          this.currentPrice.unionCityList = null;
          this.currentPrice.singleRoomPrice = 0;
          this.currentPrice.originalB2CPrice = 0;
        }
        this.changeTripShowHandler();
      }
    },
    getTopNum(x) {
      this.days = JSON.parse(x);
    },
    changeTripShowHandler() {
      this.$nextTick(() => {
        this.navs.forEach((x) => {
          x.top = this.$refs[x.val].getBoundingClientRect().top + this.currentHeight - 60;
        });
      });
    },
    handleScroll(e) {
      let temp = this.getScroll().top;
      this.stickyHeight = document.querySelector(".q-header--hidden")
        ? "translateY(0px)"
        : "translateY(45px)";
      this.currentHeight = temp;
      if (
        this.videoPosition > 0 &&
        this.videoPosition < this.currentHeight &&
        this.options.currentPage == 0 &&
        !this.isPictureInPicture
      ) {
        this.isPictureInPicture = true;
        let t = document.querySelectorAll("video")[0];
        try {
          t.requestPictureInPicture();
        } catch (error) {}
      } else if (
        this.videoPosition > 0 &&
        this.videoPosition > this.currentHeight &&
        this.options.currentPage == 0 &&
        this.isPictureInPicture
      ) {
        this.isPictureInPicture = false;
        document.exitPictureInPicture();
      }
      let h = document.location.hash;
      if (h.indexOf("#/detailsProduct/") == -1) {
        window.removeEventListener("scroll", this.handleScroll);
      }
    },
    getScroll() {
      return {
        left:
          window.pageXOffset ||
          document.documentElement.scrollLeft ||
          document.body.scrollLeft ||
          0,
        top:
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop ||
          0,
      };
    },

    goScrollHandlerDay(top) {
      window.scrollTo(0, top);
    },
    goScrollHandler(top) {
      window.scrollTo(0, top);
    },
    slideHandler(e) {
      this.options.currentPage = e.currentPage;
      if (e.currentPage != 0 && this.$refs.video && this.$refs.video.isPlaying) {
        this.$refs.video.pause();
      }
    },
    playHandler(e) {},
    pauseHandler(e) {},
    timeChangeHandler(e) {
      //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.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);
                });
              }
              // 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.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.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();
          this.loadCount++
        },
        (e) => {
          this.$q.loading.hide();
          this.loadCount++
        }
      );
    },
    changeCityHandler(unionCity) {
      this.msg.cityId = unionCity.cityId
      this.getData()
      return
      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;
        }
      }
      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>
