<template>
  <div style="min-height: 80vh">
    
    <div
      style="
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        border-top: 1px solid #eee;
        box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
        z-index: 999;
      "
      class="bg-white"
      v-if="
        (currentHeight > navs[0].top + 100 && $q.platform.is.desktop) ||
        (currentHeight > priceListHeight &&
          currentHeight < navs[0].top &&
          $q.platform.is.mobile)
      "
      :style="{ transform: stickyHeight }"
    >
      <div
        style="max-width: 1200px; margin-left: auto; margin-right: auto"
        :class="{ 'q-px-md': $q.screen.width < 1220 }"
        class="q-py-sm row items-center"
      >
        <span
          class="col product-price text-subtitle1 text-weight-bold"
          style="text-align: left"
        >
          <span v-if="priceList&&priceList.length">CNY {{ moneyFormat(priceList[0].originalB2CPrice, 0) }}</span>
          <span class="q-ml-sm f12 text-grey-7">起</span>
        </span>
        <q-btn
          color="primary"
          unelevated
          class="q-px-xl"
          label="選擇方案"
          @click="goScrollHandler(priceListHeight)"
        />
      </div>
    </div>
    <div
      v-if="dataList"
      style="max-width: 1200px; margin-left: auto; margin-right: auto"
      :class="{ 'q-px-md': $q.screen.width < 1220 }"
    >
      <div class="row items-center q-mt-md q-mb-lg">
        <q-breadcrumbs
          class="col f12 no-wrap q-mr-md"
          v-if="dataList"
          style="font-size: 13px"
        >
          <q-breadcrumbs-el
            icon="home"
            label="首頁"
            class="cursor-pointer"
            @click="CommonJump('/index', {})"
          />
          <q-breadcrumbs-el :label="dataList.CountryName" class="cursor-pointer" />
          <q-breadcrumbs-el
            v-if="$q.platform.is.desktop"
            :label="dataList.Name"
            class="text-grey-6 ellipsis"
          />
        </q-breadcrumbs>
        <div class="text-grey-6 f12">Product No. # {{ dataList.ID }}</div>
      </div>
      <div class="relative">
        <div class="row rounded-borders" :style="{height:$q.platform.is.desktop?'35vh':'20vh'}">
          <div class="col">
            <q-img :src="dataList.imgCover[0]" spinner-color="dark" spinner-size="20px" class="rounded-borders" :height="$q.platform.is.desktop?'35vh':'20vh'"/>
          </div>
          <div class="q-ml-sm column" v-if="dataList.imgCover.length>1 && $q.platform.is.desktop" :style="{width:dataList.imgCover.length<3?'30%':'20%'}">
            <div class="col rounded-borders overflow-hidden">
              <q-img :src="dataList.imgCover[1]" spinner-color="dark" spinner-size="20px" class="rounded-borders"  height="100%" />
            </div>
            <div  v-if="dataList.imgCover.length>=3" class="col q-mt-sm rounded-borders overflow-hidden">
              <q-img :src="dataList.imgCover[2]" spinner-color="dark" spinner-size="20px" class="" height="100%" />
            </div>
          </div>
          <div class="q-ml-sm column" v-if="dataList.imgCover.length>3 && $q.platform.is.desktop" style="width:20%">
            <div class="col rounded-borders overflow-hidden">
              <q-img :src="dataList.imgCover[3]" spinner-color="dark" spinner-size="20px" class="rounded-borders" height="100%" />
            </div>
            <div  v-if="dataList.imgCover.length>=5" class="col q-mt-sm rounded-borders overflow-hidden">
              <q-img :src="dataList.imgCover[4]" spinner-color="dark" spinner-size="20px" class="" height="100%" />
            </div>
          </div>
        </div>
        <div
          class="absolute q-py-sm q-px-md row items-center text-white rounded-borders cursor-pointer light-shadow"
          style="bottom: 20px; right: 20px;background:rgba(0,0,0,.5)"
          @click="showPreview(dataList.imgCover, 0)"
        >
          <q-icon name="iconfont iconimage" size="16px"></q-icon>
          <span class="q-ml-sm">查看照片</span>
        </div>
      </div>
      <div
        class="q-pt-lg"
        :class="{ row: $q.platform.is.desktop, column: $q.platform.is.mobile }"
      >
        <div class="col q-mr-lg">
          <div class="text-h6 ellipsis-2-lines">{{ dataList.Name }}</div>
          <!-- <div class="text-grey-7 fz17 ellipsis-2-lines">{{ dataList.Description }}</div> -->
          <div class="q-mt-md f12 text-grey-6">
            <q-icon
              name="iconfont icondingweixiao"
              size="16px"
              class="q-mr-sm"
            />
            <span
              >{{ dataList.Address }}
            </span>
          </div>
          <div class="q-mt-md row">
            <q-chip
              class="transparent no-padding"
              square
              icon="iconfont iconOwner-1"
              label=" 直營產品"
              :class="{'q-mr-xl':$q.platform.is.desktop,'q-mr-lg':$q.platform.is.mobile}"
            />
            <q-chip 
              class="transparent no-padding" 
              :class="{'q-mr-xl':$q.platform.is.desktop,'q-mr-lg':$q.platform.is.mobile}"
              square
              icon="iconfont icontime" 
              label="行程時間 1 天" />
            <q-chip
              class="transparent no-padding"
              :class="{'q-mr-xl':$q.platform.is.desktop,'q-mr-lg':$q.platform.is.mobile}"
              square
              icon="iconfont iconquxiao"
              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="text-right text-h6" v-if="priceList&&priceList.length>0">
            <!-- CNY：{{ dataList. }} -->
            <span class="text-subtitle2">{{dataList.CurrencyCode?dataList.CurrencyCode:'CNY'}}：</span>
            {{ moneyFormat(priceList[0].originalB2CPrice, 2) }}
            <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="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
        id="scheme"
        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="priceList"
                  @change="changeChosenDateHandler"
                  @getQuotationData="getCarPriceData"
                  ref="calendar"
                ></calendar>
              </q-popup-proxy>
            </q-field>
            <order-preview
              :dataList="dataList"
              :configId="msg.configId"
              :Month="currentYM.str"
              :price="currentPrice"
              @reset="resetHandler"
              @getPriceList="getPriceList"
              ref="orderPreview"
            ></order-preview>
            
          </div>
          <!--方案选择区 -->
          <div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">
            所選方案詳情
          </div>
          <!-- v-if="priceList && priceList.length > 0" -->
          <div
            class="bg-white rounded-borders q-mt-md"
          >
            <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 :class="{'q-mt-md':$q.platform.is.desktop}">门票类产品支持邮寄、自取和电子票三种方式，下单时需注意选择</li>
                    <li class="q-mt-md">自取地址为：{{ dataList.SelffetchAddress }}</li>
                    <li class="q-mt-md">本產品包含以下具體票型：
                      <span v-for="x in dataList.TicketList" :key="x.Id">{{ x.TicketName }}、</span>
                    </li>
                    <li class="q-mt-md">有关开放时间和活动的更多信息，请访问 <a :href="dataList.Url" target="_blank" class="text-primary">官方網站</a></li>
                  </ul>
                </div>
              </div>
              <div class="" v-if="$q.platform.is.desktop">
                <div class="row items-center">
                  <span class=" text-h6 q-mr-md"
                    v-if="priceList.length>0&&priceList[0].originalB2CPrice>0">
                    <span class="text-subtitle2">CNY</span>
                    {{
                      moneyFormat(priceList[0].originalB2CPrice, 2)
                    }}</span
                  >
                  <span class="col"></span>
                  <q-btn
                    color="primary"
                    outline
                    :label="showOrderPreview ? '取消選擇' : '選擇'"
                    @click="changeShowOrderPreviewHandler"
                    class="q-px-lg"
                  />
                </div>
                <div class="text-info q-mt-md text-right" v-if="priceList.length>0">
                  最早可預訂日期：{{ 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 iconquxiao"
                  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="priceList"
                    @change="changeChosenDateHandler"
                    @getQuotationData="getCarPriceData"
                    ref="calendar"
                  ></calendar>
                </div>
                <div class="col q-ml-xl">
                  <order-preview
                    :dataList="dataList"
                    :configId="msg.configId"
                    :Month="currentYM.str"
                    :price="currentPrice"
                    @reset="resetHandler"
                    @getPriceList="getPriceList"
                    ref="orderPreview"
                  ></order-preview>
                </div>
              </div>
            </div>
          </div>
        
      </div>
    </div>

    <div
      v-if="dataList"
      style="max-width: 1200px; margin-left: auto; margin-right: auto"
      class="q-mt-xl row"
      :class="{ 'q-px-md': $q.screen.width < 1220 && $q.screen.width > 760 }"
    >
      <div
        :class="{ 'col-8': $q.platform.is.desktop, col: $q.platform.is.mobile }"
      >
        <div ref="product" class="text-h5 text-weight-bold text-left q-mt-xl" :class="{
          'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
        }">產品介紹</div>
        <div
          class="q-mt-md"
          ref="diyContext"
          v-html="dataList.Feature"
          v-if="dataList.Feature"
        ></div>
        <div
          class="q-mt-md trip-text q-pb-xl"
          :class="{
            'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
          }"
        >
          <div v-if="dataList.OpeningHours" class="row"><span>开放时间</span><div>{{dataList.OpeningHours}} {{dataList.OpeningHours.substring(6,13)}} 停止入场</div></div>
          <div v-if="dataList.GeographicTag||dataList.ScenicSpotTag" class="row"><span>景区特色</span>
          <div>
                <q-chip v-if="dataList.GeographicTag" size="14px" clickable v-for="(s,i) in dataList.GeographicTag.split(',')" :key="i"
                text-color="white" 
                color="primary" square>{{ s }}</q-chip>
                <q-chip v-if="dataList.ScenicSpotTag" size="14px" clickable v-for="(s,i) in dataList.ScenicSpotTag.split(',')" :key="i"
                text-color="dark" 
                color="grey-3" square>{{ s }}</q-chip>
          </div>
          </div>
          <div v-if="dataList.TrafficInfo" class="row"><span>交通说明</span><div>{{dataList.TrafficInfo?dataList.TrafficInfo:'-'}}</div></div>
        </div>
        
        <div
          class="text-h5 text-weight-bold text-left q-mt-xl"
          ref="warning"
          :class="{
            'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
          }"
        >
          購買須知
        </div>
        <div
          class="q-mt-lg trip-text bg-orange-1 q-pa-md rounded-borders q-mb-xl"
          style="border: 1px dashed var(--q-color-warning)"
          v-html="
            dataList.BookingInfo
              ? dataList.BookingInfo || '暂无购买须知'
              : '暂无购买须知'
          "
          :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="assemblypoint"
          :class="{
            'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
          }"
        >
          景區地址
        </div>
        <div
          class="q-mt-lg trip-text 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="q-pa-md" style="border-bottom: 1px dashed var(--q-color-warning)">
            <div class="text-weight-bold text-h6">地點名稱：{{dataList.Name}}</div>
            <div class="text-grey-9">地址：{{`${dataList.Address}`}}</div>
          </div>
          <div class="q-pa-md" :class="{
            'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
          }">
            <!-- <componentsMap v-if="AddressObj.Lng&&AddressObj.Lat" :AddressObj="AddressObj"/> -->
            <!-- <div v-else class="card text-center">经纬度未知</div> -->
          </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.About
              ? dataList.About || '暂无溫馨提示'
              : '暂无溫馨提示'
          "
          :class="{
            'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
          }"
        ></div>
        <div
          class="text-h5 text-weight-bold text-left q-mt-xl"
          ref="cancelTips"
          :class="{
            'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
          }"
        >
          取消政策
        </div>
        <div
          class="q-mt-lg trip-text q-mb-xl"
          :class="{
            'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
          }"
        >
          <ul class="no-padding text-grey-9 q-ml-md">
            <li>所选日期 15 天（含）之前取消，收取手续费 0%</li>
            <li class="q-mt-sm">所选日期 8 ~ 14 天之间取消，收取手续费 30%</li>
            <li class="q-mt-sm">所选日期 4 ~ 7 天之间取消，收取手续费 50%</li>
            <li class="q-mt-sm">所选日期 1 ~ 3 天之间取消，收取手续费 80%</li>
            <li class="q-mt-sm">所选日期 0 ~ 0 天之间取消，收取手续费 100%</li>
          </ul>
          <div class="q-mt-lg f12 text-grey-6">
            <q-icon name="iconfont icontishi" class="q-mr-sm" />
            <span
              >注意：由于站内商品来自全球各地，订单取消时间将依该供应商所在时区判定。供应商需
              2-5
              个工作天进行取消流程，依照您购买的商品取消政策收取手续费，并于取消流程完成后14
              个工作天内退款。</span
            >
          </div>
        </div>
      </div>

      <template v-if="$q.platform.is.desktop">
        
        <div class="col-1"></div>
        <div class="col q-ml-xl position-relative">
          <div style="position: sticky; top: 100px">
            <div
              class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md"
              v-for="(x, i) in navs"
              :key="i"
              @click="goScrollHandler(x.top + 20)"
              :class="{
                'active-trip-module':
                  currentHeight >= x.top &&
                  (i == navs.length - 1 || currentHeight < navs[i + 1].top),
              }"
            >
              {{ x.display }}
            </div>
          </div>
        </div>
      </template>
    </div>
    <!-- <auth></auth> -->
  </div>
</template>

<script>
import auth from "src/components/common/auth.vue";
import { slider, slideritem } from "vue-concise-slider";
import calendar from "src/components/trip/calendar.vue";
import OrderPreview from "src/components/ScenicSpotTicket/orderPreview.vue";
import smaple from "src/components/trip/smaple.vue";
import Trip from "src/components/trip/trip.vue";
import block from "src/components/trip/block/index";
import { date } from "quasar";
import componentsMap from "src/components/car/Map.vue";
import * as dayjs from "dayjs";
export default {
  props: [],
  data() {
    return {
      AddressObj: null,
      priceList: [],
      selectedId: '',
      currentYM: { year: 2023, month: 2, str: "2023-02" }, // 当前年月
      isCurrent: false,
      isLast: false,
      daysList: [],
      tab: "",
      searchDate: "",
      clickDate: "",
      slide: 1,
      msg: {
        configId: "",
        cityId: 0,
        preview: 0,
        tcid: 0,
        teamType: 0,
        isGetPriceFlight: true,
      },
      currentPrice: {},
      isShow: false,
      dataList: null,
      isDirect: 1,
      TripConfig: {},
      isShowNav: false,
      clickIndex: 1,
      isLoading: false,
      isShowDialog: false,
      citys: [],
      //Slider configuration [obj]
      options: {
        currentPage: 0,
        speed: 300,
        itemAnimation: true,
        centeredSlides: true,
        thresholdDistance: 100,
        thresholdTime: 300,
        loopedSlides: 2,
        slidesToScroll: 1,
        loop: true,
      },
      warnBuy: [
        "如一輛車位不夠使用，請購買多輛車",
        "收費公路費、停車費、入園費等請另行繳納",
        "由於交通擁堵，時長可能會略有變化",
        "每增加 30 分鐘，將收取相應的延期費。 （現場支付）",
      ],
      showOrderPreview: false,
      videoPosition: 0,
      currentHeight: 0,
      isPictureInPicture: false,
      days: [
        {
          val: "",
          top: 0,
          isActive: false,
          display: "",
        },
      ],
      navs: [
        {
          val: "product",
          top: 0,
          isActive: false,
          display: "產品介紹",
        },
        {
          val: "warning",
          top: 0,
          isActive: false,
          display: "購買須知",
        },
        {
          val: "assemblypoint",
          top: 0,
          isActive: false,
          display: "景區地址",
        },
        {
          val: "tips",
          top: 0,
          isActive: false,
          display: "溫馨提示",
        },
        {
          val: "cancelTips",
          top: 0,
          isActive: false,
          display: "取消政策",
        },
      ],
      priceListHeight: 0,
      stickyHeight: 0,
      zoomDiyContext: 1,
    };
  },
  components: {
    slider,
    slideritem,
    calendar,
    OrderPreview,
    smaple,
    Trip,
    block,
    componentsMap,
    auth,
  },
  watch: {
    days: {
      handler: function (val, oldval) {
        this.days = val;
      },
      immediate: true,
      deep: true,
    },
    priceList: {
      handler: function (val, oldval) {
        this.priceList = val;
      },
      immediate: true,
      deep: true,
    },
    currentPrice: {
      handler: function (val, oldval) {
        this.currentPrice = val;
      },
      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);
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    const timeStamp = Date.now()
    const formattedString = date.formatDate(timeStamp, 'YYYY-MM')
    this.currentYM = {
      year: date.formatDate(timeStamp, 'YYYY'),
      month: date.formatDate(timeStamp, 'MM'),
      str: formattedString
    }
    if (localStorage.baseifo) {
      this.TripConfig = JSON.parse(window.localStorage.getItem("baseifo"));
    }
    window.addEventListener("scroll", this.menu);
    this.getData();
  },
  methods: {
    changeShowOrderPreviewHandler(){
      this.showOrderPreview=!this.showOrderPreview
      if(!this.showOrderPreview){
        this.changeTripShowHandler()
      }
      this.dataList.TicketList.forEach(x=>{
        x.checked = false
      })
    },
    changeTripShowHandler() {
      this.$nextTick(() => {
        this.navs.forEach((x) => {
          x.top =
            this.$refs[x.val].getBoundingClientRect().top +
            this.currentHeight -
            60;
        });
      });
    },
    getPriceList(Arr,id){
      this.priceList = JSON.parse(Arr)
      if(this.selectedId === id) {
        this.selectedId = ''
      } else {
        this.selectedId = id
      }
    },
    getTopNum(x) {
      this.days = JSON.parse(x);
    },
    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("#/detailsScenicSpotTicket/") == -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,
      };
    },
    goScrollHandler(top) {
      window.scrollTo(0, top);
      // document.querySelector(id).scrollIntoView({ behavior: "smooth" });
    },
    slideHandler(e) {
      this.options.currentPage = e.currentPage;
      if (
        e.currentPage != 0 &&
        this.$refs.video &&
        this.$refs.video.isPlaying
      ) {
        this.$refs.video.pause();
      }
    },
    playHandler(e) {},
    pauseHandler(e) {},
    timeChangeHandler(e) {

    },
    //
    seekedChangeHandler(e) {

    },
    resetHandler() {
      this.currentPrice.startDate = "";
      
      if(!this.$q.platform.is.mobile){
        this.$refs.calendar.reset();
      }
    },
    changeChosenDateHandler(val) {
      val.price.version = new Date().getTime();
      this.currentPrice = JSON.parse(JSON.stringify(val.price));
      if(this.$q.platform.is.mobile){
        this.$refs.qDateProxy.hide();
      }
    },
    showDialog() {
      this.isShowDialog = true;
    },
    //关闭弹窗
    closeDialog() {
      this.isShowDialog = false;
    },
    //  获取商品详情
    getData() {
      this.$q.loading.show();
      this.apipost(
        "b2c_get_GetTicketCouponsDetail",
        { CouponsId: this.msg.configId },
        (r) => {
          if (r.data.resultCode == 1) {
            let addList = function (arr) {
                arr.forEach(item => {
                  item.checked = false
                  item.Count = 1
                });
            };
            addList(r.data.data.TicketList);
            this.dataList = r.data.data;
            this.selectedId = this.dataList.TicketList.find(x=>x.Id)
            this.dataList.imgCover = this.dataList.PicPathList;
            this.AddressObj = this.dataList
            this.AddressObj.Address = `${this.dataList.CountryName?this.dataList.CountryName+'-':''}${this.dataList.CityName?this.dataList.CityName+'-':''}${this.dataList.ProvinceName?this.dataList.ProvinceName+'-':''}${this.dataList.Address}`
            this.isShow = true;
            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(() => {
              this.getCarPriceData()
              setTimeout(() => {
                this.navs.forEach((x) => {
                  x.top =
                    this.$refs[x.val].getBoundingClientRect().top + this.currentHeight - 60;
                });
                this.priceListHeight =
                  this.$refs.pricelist.getBoundingClientRect().top +
                  this.currentHeight -
                  60;
              }, 1000);

              try {
                document
                  .querySelector("#scrollId .q-page-container")
                  .addEventListener("scroll", this.handleScrollDay);
              } catch (error) {
              
              }
            });
            
          } else {
            this.$message.error(r.data.message) 
          }
          this.$q.loading.hide();
        },
        null
      );
    },
    //  获取报价的详情
    getCarPriceData(time) {
      // 日历翻页更新报价
      if(time){
        this.currentYM.str = time
        this.$refs.orderPreview.resetHandler()
      }
      
      this.apipost(
        "b2c_get_GetTicketCouponsMonthPriceAll",
        { 
          CouponsId: this.msg.configId, 
          // TicketId: this.dataList.TicketList[0].Id,
          Month: this.currentYM.str,
         },
        (r) => {
          if (r.data.resultCode == 1) {
            let arr = []
            r.data.data.forEach(x=>{
              x.PriceList = x.PriceList.sort((a,b)=>{return a.Price-b.Price})
              let MailingMoneyList = x.PriceList.sort((a,b)=>{return b.MailingMoney-a.MailingMoney})
              let dataObj = {
                  startDate: x.Date,
                  originalB2CPrice: x.PriceList[0].Price>0?x.PriceList[0].Price:'',
                  remainNum: 1,
                  Count: 1,
                  safeMoney: 0,
                  MailingMoney: MailingMoneyList[0].MailingMoney,
                  PriceList: x.PriceList,
                }
                x.Date = date.formatDate(new Date(x.Date), 'YYYY/MM/DD')
                if(date.formatDate(Date.now(), 'YYYY/MM/DD')!=x.Date&&x.Date>date.formatDate(Date.now(), 'YYYY/MM/DD')){
                  arr.push(dataObj)
                }
            })
            if(arr.length>0){
              this.priceList = []
              this.priceList = JSON.parse(JSON.stringify(arr))
            }
          }
          
        },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);
    },
    showPreview(images, index = 0) {
      this.$viewerApi({
        options: {
          initialViewIndex: index,
        },
        images,
      });
    },
  },
};
</script>

<style>
  .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);
  }
.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);
}
</style>
<style scoped>
.car-select {
  background: #ef7a70;
  color: #fff;
}
.gray {
  color: #999;
}
.date-table {
  width: 100%;
  padding: 5px;
  border-collapse: separate;
  table-layout: fixed;
}
.cell-day {
  padding: 10px 0 20px;
  text-align: center;
  color: #666;
  font-weight: 700;
}
.cell-date.selectable {
  cursor: pointer;
}
.cell-date {
  position: relative;
  padding: 8px 4px;
  border-radius: 6px;
  text-align: center;
  vertical-align: baseline;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.cell-date .date-num {
  font-size: 1.6rem;
  font-weight: 700;
}
.disabled {
  color: #666;
}
.option-booking .cell-date .price {
  min-height: 20px;
  color: #666;
  font-size: 1.2rem;
}
.cell-date.selected.selected-end {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  position: relative;
}
.cell-date.selected.selected-start {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.cell-date.selected.selected-end,
.cell-date.selected.selected-start {
  color: #fff;
  background-color: #26bdc9;
}
.cancel {
  background-color: #ef7a70;
  margin-left: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
}
.about {
  background-color: #f6f6f6;
  padding: 15px 20px;
  margin: 20px 0;
  border-radius: 10px;
}
</style>