<template>
  <div class="detaObj" style="min-height: 80vh" ref="detaObj">
    <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"
      :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"
      > <div class="row items-center">
        <span
          class="col product-price text-subtitle1 text-weight-bold f30"
          style="text-align: left"
        >
          <span>CNY {{ moneyFormat(MinPrice, 0) }}</span>
          <span class="q-ml-sm f16 text-grey-7">起</span>
        </span>
        <q-btn
          color="primary"
          unelevated
          class="q-px-xl"
          label="選擇方案"
          @click="goScrollHandler(priceListHeight)"
        />
      </div>
      <q-separator v-if="isShowNav" color="grey-2" class="q-my-sm" />
      <div class="row no-wrap items-center justify-between" 
      :class="{'q-pt-md q-mb-xs':!isShowNav,' q-pb-xs':isShowNav,}">
      
          <div
        :class="{'row no-wrap': $q.platform.is.desktop,'col row justify-between': $q.platform.is.mobile,}">

        <div class="bg-grey-2 q-px-md relative q-pt-md cursor-pointer" style="min-width:190px;border-radius: 3px;">
          <div class="text-xxs absolute top-0 left-0 q-px-md text-xxs" style="color: rgba(0,0,0,.6);">入住 / 退房日期</div>
          <div class="self-center full-width no-outline row no-wrap items-center" tabindex="0">
            <span>{{dateRangeFormat}} </span>
            <q-chip size="9px" clickable 
            text-color="white" 
            color="dark" square>{{liveNvm}} 晚</q-chip>
            <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
                <q-date 
                v-model="dateRange" 
                :options="optionsFn" 
                range mask="YYYY/MM/DD"
                @range-end="dateRangeHandler"></q-date>
            </q-popup-proxy>
          </div>
        </div>
          
         <div class="bg-grey-2 q-px-md relative q-pt-md q-ml-lg cursor-pointer" style="min-width:190px;border-radius: 3px;">
          <div class="text-xxs absolute top-0 left-0 q-px-md" style="color: rgba(0,0,0,.6);">人数及客房</div>
          <div class="self-center full-width no-outline text-xxs" tabindex="0">
             {{numberOfAdults}}成人 
            <template v-if="numberOfChildren>0"> {{numberOfChildren}}儿童</template> 
             {{roomGroup}}房
             <q-popup-proxy :offset="[0, 10]">
                <div class="q-pa-lg q-py-lg bg-white">
                  <div class="items-center"
                  :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
                    <span class="text-grey-7 product-price fz14 q-mr-lg">客房</span>
                    <div>
                      <q-input
                      :style="{'width': $q.platform.is.desktop?'150px':'auto'}"
                      v-model="roomGroup"
                      mask="#"
                      reverse-fill-mask
                      dense
                      standout
                      readonly
                    >
                  <template v-slot:prepend>
                    <q-btn
                      color="primary"
                      :size="$q.platform.is.desktop?'sm':'xs'"
                      class="q-px-none"
                      flat
                      icon="remove"
                      @click="addPeople('room', -1)"
                    />
                  </template>
                  <template v-slot:append>
                    <q-btn
                      color="primary"
                      :size="$q.platform.is.desktop?'sm':'xs'"
                      class="q-px-none"
                      flat
                      icon="add"
                      @click="addPeople('room', 1)"
                    />
                  </template>
                  </q-input>
                    </div>
                  </div>
                  <q-separator color="grey-2" class="q-my-md" />
                    <div class="column" v-for="(x,index) in msg.searchroomGroup" :key="index">
                      <div class="row no-wrap">
                        <div class="row items-center">
                          <span class="text-grey-7 product-price fz14 q-mr-lg">成人</span>
                          <q-input
                          :style="{'width': $q.platform.is.desktop?'150px':'auto'}"
                            v-model="x.numberOfAdults"
                            class="col"
                            mask="#"
                            reverse-fill-mask
                            dense
                            standout
                            readonly
                          >
                        <template v-slot:prepend>
                          <q-btn
                            color="primary"
                            :size="$q.platform.is.desktop?'sm':'xs'"
                            class="q-px-none"
                            flat
                            icon="remove"
                            @click="addPeople('numberOfAdults', -1,x)"
                          />
                        </template>
                        <template v-slot:append>
                          <q-btn
                            color="primary"
                            :size="$q.platform.is.desktop?'sm':'xs'"
                            class="q-px-none"
                            flat
                            icon="add"
                            @click="addPeople('numberOfAdults', 1,x)"
                          />
                        </template>
                          </q-input>
                          </div>
                          <div class="items-center"
                          :class="{'row q-ml-lg':$q.platform.is.desktop,'q-ml-sm':$q.platform.is.mobile}">
                            <span class="text-grey-7 product-price fz14 q-mr-lg">儿童</span>
                            <q-input
                              :style="{'width': $q.platform.is.desktop?'150px':'auto'}"
                              v-model="x.numberOfChildren"
                              class="col"
                              mask="#"
                              reverse-fill-mask
                              dense
                              standout
                              readonly
                            >
                          <template v-slot:prepend>
                            <q-btn
                              color="primary"
                              :size="$q.platform.is.desktop?'sm':'xs'"
                              class="q-px-none"
                              flat
                              icon="remove"
                              @click="addPeople('numberOfChildren', -1,x)"
                            />
                          </template>
                          <template v-slot:append>
                            <q-btn
                              color="primary"
                              :size="$q.platform.is.desktop?'sm':'xs'"
                              class="q-px-none"
                              flat
                              icon="add"
                              @click="addPeople('numberOfChildren', 1,x)"
                            />
                          </template>
                            </q-input>
                          </div>
                          <div class="items-center"
                          :class="{'row q-ml-lg':$q.platform.is.desktop,'q-ml-sm':$q.platform.is.mobile}">
                            <span class="text-grey-7 product-price fz14 q-mr-lg">儿童年龄</span>
                            <q-select v-model="x.ChildAgeDetails" :options="childrenAgeList" 
                            option-label="Id" option-value="Id" label="年龄"
                            :style="{'width': $q.platform.is.desktop?'150px':'auto'}"
                            class="col" emit-value reverse-fill-mask dense standout/>
                          </div>
                      </div>
                      <q-separator v-if="index!=(msg.searchroomGroup.length-1)" color="grey-2" class="q-my-md" />
                    </div>
                </div>
            </q-popup-proxy>
          </div>
        </div>

        <!-- 目的地 -->
        <destination class="q-ml-sm" :msg="{
          CityCode:CityCode?CityCode:dataList.CityCode,
          CityName:CityName?CityName:dataList.CityName,
          KeyWords:msg.KeyWords,
          KeyWords2:msg.KeyWords2,
          StartDate:msg.CheckInDate,
          EndDate:msg.CheckOutDate,
          searchroomGroup:msg.searchroomGroup}"
          @change="changeMsg"></destination>
        
       </div>
       <q-btn v-if="$q.platform.is.mobile" unelevated round class="bg-grey-3 hover" icon="search" title="更多筛选">
        <q-badge rounded class="din bg-red-2 text-red-14 text-weight-bold" floating label="1"/>
        <q-tooltip>更多</q-tooltip>
        <q-popup-proxy class="no-shadow" style="box-shadow: 0 0 50px #ddd !important" 
        :offset="[0, 20]" ref="qDateProxy2"
        @before-hide="getRoom(),$refs.qDateProxy2.hide()">
          <q-card class="q-pa-md rounded-borders" style="width: 300px">
            <div class="q-mb-md text-subtitle2">更多</div>
            <div class="q-my-md">
              <q-field stack-label label="人数及客房" standout dense>
          <div class="self-center full-width no-outline" tabindex="0">
             {{numberOfAdults}}成人 
            <template v-if="numberOfChildren>0"> {{numberOfChildren}}儿童</template> 
             {{roomGroup}}房
          </div>
          <q-popup-proxy :offset="[0, 10]">
            <div class="q-pa-lg q-py-lg bg-white">
              <div class="column">
                <span class="text-grey-7 fz14 q-mr-lg">客房</span>
                <div>
                  <q-input
                  v-model="roomGroup"
                  mask="#"
                  reverse-fill-mask
                  dense
                  standout
                  readonly
                >
              <template v-slot:prepend>
                <q-btn
                  color="primary"
                  :size="$q.platform.is.desktop?'sm':'xs'"
                  class="q-px-none"
                  flat
                  icon="remove"
                  @click="addPeople('room', -1)"
                />
              </template>
              <template v-slot:append>
                <q-btn
                  color="primary"
                  :size="$q.platform.is.desktop?'sm':'xs'"
                  class="q-px-none"
                  flat
                  icon="add"
                  @click="addPeople('room', 1)"
                />
              </template>
              </q-input>
                </div>
              </div>
              <q-separator color="grey-2" class="q-my-md" />
              <div class="column" v-for="(x,index) in msg.searchroomGroup" :key="index">
                <div class="row no-wrap">
                  <div class="column">
                    <span class="text-grey-7 fz14 q-mr-lg">成人</span>
                    <q-input
                    :style="{'width': $q.platform.is.desktop?'150px':'auto'}"
                      v-model="x.numberOfAdults"
                      class="col"
                      mask="#"
                      reverse-fill-mask
                      dense
                      standout
                      readonly
                    >
                  <template v-slot:prepend>
                    <q-btn
                      color="primary"
                      :size="$q.platform.is.desktop?'sm':'xs'"
                      class="q-px-none"
                      flat
                      icon="remove"
                      @click="addPeople('numberOfAdults', -1,x)"
                    />
                  </template>
                  <template v-slot:append>
                    <q-btn
                      color="primary"
                      :size="$q.platform.is.desktop?'sm':'xs'"
                      class="q-px-none"
                      flat
                      icon="add"
                      @click="addPeople('numberOfAdults', 1,x)"
                    />
                  </template>
                    </q-input>
                    </div>
                    <div class="items-center"
                    :class="{'row q-ml-lg':$q.platform.is.desktop,'q-ml-sm':$q.platform.is.mobile}">
                      <span class="text-grey-7 fz14 q-mr-lg">儿童</span>
                      <q-input
                        :style="{'width': $q.platform.is.desktop?'150px':'auto'}"
                        v-model="x.numberOfChildren"
                        class="col"
                        mask="#"
                        reverse-fill-mask
                        dense
                        standout
                        readonly
                      >
                    <template v-slot:prepend>
                      <q-btn
                        color="primary"
                        :size="$q.platform.is.desktop?'sm':'xs'"
                        class="q-px-none"
                        flat
                        icon="remove"
                        @click="addPeople('numberOfChildren', -1,x)"
                      />
                    </template>
                    <template v-slot:append>
                      <q-btn
                        color="primary"
                        :size="$q.platform.is.desktop?'sm':'xs'"
                        class="q-px-none"
                        flat
                        icon="add"
                        @click="addPeople('numberOfChildren', 1,x)"
                      />
                    </template>
                      </q-input>
                      </div>
                </div>
                <q-separator v-if="index!=(msg.searchroomGroup.length-1)" color="grey-2" class="q-my-md" />
              </div>
              
            </div>
          </q-popup-proxy>
        </q-field>
            </div>
            <!-- <div class="q-my-md row">
              <q-btn
                  color="primary"
                  unelevated
                  class="q-px-xl col"
                  label="确定搜索"
                  @click="getRoom(),$refs.qDateProxy2.hide()"
                />
            </div> -->
          </q-card>
        </q-popup-proxy>
       </q-btn>
       <div v-if="$q.platform.is.desktop">
        <q-btn
          color="primary"
          unelevated
          class="q-px-xl"
          label="搜索"
          @click="getDiDaPriceSearchList"
        />
       </div>
      </div>
      </div>
    </div>
    <div
      v-if="hotelSummary"
      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" style="padding-top: 73px;">
        <q-breadcrumbs
          class="col f12 no-wrap q-mr-md"
          style="font-size: 13px"
        >
          <q-breadcrumbs-el
            icon="home"
            label="首頁"
            class="cursor-pointer"
            @click="CommonJump('/index', {})"
          />
          <q-breadcrumbs-el :label="dataList.CountryName_CN" class="cursor-pointer" 
          @click="CommonJump('/searchDida', {areaId:dataList.CityCode})"/>
          <!-- <q-breadcrumbs-el>
            <span>
              <span class="cursor-pointer">{{ hotelSummary.hotelStateProvince }} </span>
              <span class="q-mr-sm"></span>
            </span>
          </q-breadcrumbs-el> -->
          <q-breadcrumbs-el
            v-if="$q.platform.is.desktop"
            :label="dataList.Name_CN"
            class="text-grey-6 ellipsis"
          />
        </q-breadcrumbs>
        <div class="text-grey-6 f12">Product No. # {{dataList.HotelID}}</div>
      </div>
      <div v-if="images.length" class="row rounded-borders bg-white overflow-hidden relative">
        <q-img class="col-5 cursor-pointer" :src="images[0]" 
        :ratio="16/9" @click="showImageHandler(0)">
            <template v-slot:error>
              <div class="absolute-full flex flex-center bg-grey-3 text-dark">
                <img src="../assets/img/errImg.png" alt="" style="width: 60%;">
              </div>
            </template>
          </q-img>
        <div class="col column q-ml-xs">
          <q-img class="cursor-pointer" :src="images[1]?images[1]:'../assets/img/errImg.png'" 
          :ratio="16/9" @click="showImageHandler(1)">
            <template v-slot:error>
              <div class="absolute-full flex flex-center bg-grey-3 text-dark">
                <img src="../assets/img/errImg.png" alt="" style="width: 60%;">
              </div>
            </template>
          </q-img>
          <q-img class="q-mt-xs cursor-pointer" :src="images[2]?images[2]:'../assets/img/errImg.png'" 
          :ratio="16/9" @click="showImageHandler(2)">
            <template v-slot:error>
              <div class="absolute-full flex flex-center bg-grey-3 text-dark">
                <img src="../assets/img/errImg.png" alt="" style="width: 60%;">
              </div>
            </template>
          </q-img>
        </div>
        <div class="col column q-ml-xs">
          <q-img class="cursor-pointer" :src="images[3]?images[3]:'../assets/img/errImg.png'" 
          :ratio="16/9" @click="showImageHandler(3)">
            <template v-slot:error>
              <div class="absolute-full flex flex-center bg-grey-3 text-dark">
                <img src="../assets/img/errImg.png" alt="" style="width: 60%;">
              </div>
            </template>
          </q-img>
          <q-img class="q-mt-xs cursor-pointer" :src="images[4]?images[4]:'../assets/img/errImg.png'" 
          :ratio="16/9" @click="showImageHandler(4)">
            <template v-slot:error>
              <div class="absolute-full flex flex-center bg-grey-3 text-dark">
                <img src="../assets/img/errImg.png" alt="" style="width: 60%;">
              </div>
            </template>
          </q-img>
          
        </div>
        <div class="absolute" style="right: 10px;bottom: 10px;">
          <span class="text-white f12 q-pa-xs q-px-md row items-center cursor-pointer" 
          style="background: rgba(23,23,23,.5);border-radius: 30px;"
          @click="showImageHandler(0)">
          <q-icon name="images"></q-icon>
          <span>{{images.length}}</span>
          </span>
        </div>
        
      </div>
      <div
        class="q-py-lg"
        :class="{ row: $q.platform.is.desktop, column: $q.platform.is.mobile }"
      >
        <div class="col q-mr-lg">
          <div class="f30 bold row items-center">
            <span class="ellipsis-2-lines q-pr-lg">{{ dataList.Name_CN }}</span>
            <q-rating v-model="roomReviewRating" size="1em" 
            color="orange" :max="roomReviewRating" readonly />
          </div>
          <div class="q-mt-md f12 text-grey-6">
            <q-icon
              name="iconfont icondingweixiao"
              size="16px"
              class="q-mr-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>
            </span> -->
            <span>{{ dataList.Address_CN }}</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 
              class="transparent q-mr-xl no-padding" 
              square
              icon="iconfont icontime" 
              :label="`住宿時間 ${liveNvm} 晚`" />
          </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 f30 bold" v-if="MinPrice > 0">
            CNY：{{ moneyFormat(MinPrice, 0) }}
            <span class="f16 text-grey-6 normal">起</span>
          </div>
          <div v-else class="product-price text-subtitle1 f30 bold text-grey-6">暫無報價</div>
          <q-btn
            color="primary"
            label="選擇方案"
            unelevated
            @click="goScrollHandler(priceListHeight)"
            :class="{ 'q-mt-md full-width': $q.platform.is.desktop }"
          />
        </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 + 100 && $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 class="flex justify-between q-mx-auto" style="max-width: 1200px">
      <hotel-star></hotel-star>
      <hotel-des></hotel-des>
      <hotel-map></hotel-map>
    </div> -->
    <div
      class="q-pa-lg bg-grey-3 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">
        <div v-if="$q.platform.is.mobile">
          <div class="row items-center justify-end">
            <span class="product-price text-h6 q-mr-md"
              >CNY
              {{
                moneyFormat(MinPrice, 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">
            最早可預訂日期：{{ StartDate }}
          </div>
        </div>
            <div
            class="rounded-borders bg-white q-pa-md q-mt-md"
            v-if="$q.platform.is.mobile&&showOrderPreview"
          >
            <RoomCard
            :dataList="dataList"
            :priceList="getQueryData"
            :SimilarObj="SimilarObj"
            :msg="msg"
            :HotelRoomTypes="HotelRoomTypes"
            :HotelMealTypes="HotelMealTypes"
            @change="changeChosenDateHandler"
            @placeOrder="placeOrderHandler"
            ref="RoomCard"
          ></RoomCard>
                
              </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="$q.platform.is.desktop"
          >
            <div class="q-pa-md row">
              <div class="col">
                <div
                  class="text-subtitle1 text-weight-bold row items-center"
                  
                >
                  <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" :key="i">
                      {{ x }}
                    </li>
                  </ul>
                </div> -->
              </div>
              <div class="" v-if="$q.platform.is.desktop&&getQueryData.length>0">
                <div class="row items-center">
                  <span class="product-price text-h6 q-mr-md"
                    >CNY
                    {{
                      moneyFormat(MinPrice, 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">
                  最早可預訂日期：{{ StartDate }}
                </div>
              </div>
              <div class="text-center" v-if="getQueryData.length==0||!DidaHotelRoomDetails.HotelList">
                {{!DidaHotelRoomDetails.HotelList?'無可售方案':'加載方案中...'}}
              </div>
            </div>
            <div
              class="q-pa-md"
              style="border-top: 1px solid #eee"
              v-if="showOrderPreview"
            >
              <div class="q-mt-lg" v-if="$q.platform.is.desktop">
                <div class="row">
                  <div>
                    <div class="text-subtitle2 text-weight-bold">選擇房間類型、選項</div>
                    <div class="row text-grey-6 f12 q-my-md">
                      <span>請選擇出房間類型</span>
                    </div>
                  </div>
                  <div class="row q-pt-md">
                    <div class=""
                    :class="{'row items-center justify-center q-ml-lg':$q.platform.is.desktop,'q-ml-sm':$q.platform.is.mobile}">
                      <q-select v-model="qMsg.RoomTypeName" :options="qRoomTypeList"
                       @input="getQueryName(1)"
                      option-label="RoomName_CN" option-value="RoomName_CN" label="房型"
                      :style="{'width': $q.platform.is.desktop?'150px':'auto'}"
                      class="col" emit-value reverse-fill-mask dense standout/>
                    </div>
                    <div class=""
                    :class="{'row items-center q-ml-lg':$q.platform.is.desktop,'q-ml-sm':$q.platform.is.mobile}">
                      <q-select v-model="qMsg.MTypeName" :options="qMealTypeList"
                      @input="getQueryName()"
                      option-label="MTypeName" option-value="MTypeName" label="餐型"
                      :style="{'width': $q.platform.is.desktop?'150px':'auto'}"
                      class="col" emit-value reverse-fill-mask dense standout/>
                    </div>
                  </div>

                </div>
                
                <q-separator color="grey-2" class="q-my-md" />
                <RoomCard
                    :dataList="dataList"
                    :priceList="getQueryData"
                    :SimilarObj="SimilarObj"
                    :msg="msg"
                    :HotelRoomTypes="HotelRoomTypes"
                    :HotelMealTypes="HotelMealTypes"
                    @change="changeChosenDateHandler"
                    @placeOrder="placeOrderHandler"
                    ref="RoomCard"
                  ></RoomCard>
              </div>
            </div>
          </div>
          
        </div>
      </div>
    </div>

    <div
      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
          class="text-h5 text-weight-bold text-left q-mt-xl"
          :class="{
            'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
          }" ref="product">酒店介紹</div>
        <div
          class="q-mt-md"
          ref="diyContext"
          :class="{
            'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
          }"
        >
        <div class="q-pb-md" v-html="hotelDetails.hotelDescription" style="line-height:27px;"></div>
      </div>
        <div ref="server"
          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-sm column" :class="{
          'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
        }">
          
            <div class="row no-wrap overflow-hidden">
              <!-- <span class="text-weight-bold">酒店设施</span>  -->
              <div class="column col overflow-hidden">
                <div  v-if="Facilities.length > 0" class="scroll q-pb-xs" :style="{'max-width': $q.platform.is.mobile?'85vw':'auto'}">
                  <table class="hotel-details-table q-pb-md">
                    <tr>
                        <td :colspan="itemsPerRow" class="td01 text-weight-bold">酒店设施</td>
                    </tr>
                    <tr v-for="(item,i) in Facilities" class="text-xxs">
                        <td v-for="(x,i) in item">{{x.description}}</td>
                    </tr>
                </table>
                </div>
              </div>  
            </div>
          <div class="q-pt-sm row no-wrap overflow-hidden">
            <!-- <span class="text-weight-bold">房间设施</span>  -->
            <div class="column col overflow-hidden">
              <div  v-if="RoomFacilities.length > 0" class="scroll q-pb-xs" :style="{'max-width': $q.platform.is.mobile?'85vw':'auto'}">
                <table class="hotel-details-table q-pb-md">
                  <tr>
                      <td :colspan="itemsPerRow" class="td01 text-weight-bold">房间设施</td>
                  </tr>
                  <tr v-for="(item,i) in RoomFacilities" class="text-xxs">
                      <td v-for="(x,i) in item">{{x.description}}</td>
                  </tr>
              </table>
              </div>
              
            
            </div>

            <div class="q-pt-sm row wrap">
                <q-chip size="9px" clickable 
            text-color="white" 
            color="dark" square v-for="(x,i) in HotSpring" :key="i">{{x}}</q-chip>
            </div>
            
        </div>
        </div>
        <div
          class="q-mt-lg trip-text bg-white q-pa-md rounded-borders"
          style="border: 1px dashed var(--q-color-info)"
          :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="hotelPolicy"
          :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"
          style="border: 1px dashed var(--q-color-info)"
          :class="{
            'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
          }"
          >
            <div class="row">
              <div>入住时间: {{dataList.policy?dataList.policy.checkinFrom:''}}</div>
              <div class="q-ml-lg">退房时间: {{dataList.policy?dataList.policy.checkoutTo:''}}</div>
            </div>
            <div v-if="dataList.policy" v-html="dataList.policy.description"></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)"
          :class="{
            'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
          }"
        >超過13歲視為成人處理</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,
          }">
          <!-- style="border-bottom: 1px dashed var(--q-color-warning)" -->
          <div class="q-pa-md" >
            <div class="text-weight-bold text-h6">酒店名稱：{{dataList.Name_CN}}</div>
            <div class="text-grey-9">地址：{{`${dataList.Address_CN}`}}</div>
          </div>
          <div v-if="false" class="q-pa-md" v-for="(x,index) in travelLngLat" :key="index">
            <!-- <componentsMap v-if="x.Lng&&x.Lat" :AddressObj="x"/>
            <div v-else class="card text-center">经纬度未知</div> -->
          </div>
        </div>

        <template v-if="false">
          <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)"
            :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>
        </template>
        <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>

      <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: 200px">
            <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>
    <q-dialog class="no-padding" v-model="showImagePriview" 
    v-if="images && images.length > 0">
      <image-preview :current="currentImage" :images="images"></image-preview>
    </q-dialog>
  </div>
</template>

<script>
import { date } from 'quasar'
import smaple from "src/components/trip/smaple.vue";
import block from "src/components/trip/block/index";
import hotelStar from "./hotel/hotelStar.vue";
import hotelMap from "./hotel/hotelMap.vue";
import hotelDes from "./hotel/hotelDes.vue";
import comments from "./hotel/comments.vue";
import selectRoom from './hotel/selectRoom.vue';
import componentsMap from 'src/components/car/Map.vue';
import ImagePreview from 'src/components/common/ImagePreview.vue'
import RoomCard from '../components/hotaldida/RoomCard.vue'
import OrderPreview from "src/components/hotaldida/orderPreview.vue";
import destination from './didaHotel/destination.vue'
export default {
  props: [],
  components: {
    smaple,
    block,
    hotelStar,
    hotelMap,
    hotelDes,
    comments,
    selectRoom,
    componentsMap,
    ImagePreview,
    RoomCard,
    OrderPreview,
    destination,
  },
  data() {
    return {
      MinPrice: 0,
      selectedCar: "",
      tab: "",
      searchDate: "",
      clickDate: "",
      slide: 1,

      StartDate: '',
      roomReviewRating: 0,
      currentImage: '',
      showImagePriview: false,
      travelLngLat: [],//经纬度
      ServeArr: [],//酒店服务与设施
      InterArr: [],//网络连接
      bathRoom: [],//温泉
      HotSpring: [],
      images: [],
      hotelSummary: {},
      hotelDetails: {},
      roomGroup: 1,
      numberOfAdults: 1,
      numberOfChildren: 0,
      liveNvm: 1,
      dateRange:{},
      dateRangeFormat: '',//入住、离店时间
      roomGroupObj:{
        childAges:null,
        roomNum:null,numberOfAdults:1,numberOfChildren:0
      },
      msg: {
        hotelId: 0,
        sort: 0,
        displayFrom: 1,
        CheckOutDate: "",
        roomOptionCd: "",
        CheckInDate: "",
        searchroomGroup: [{
          roomNum: 1,
          numberOfAdults: 2,
          numberOfChildren: 0,
          ChildAgeDetails: ""
        }],
        auditNum: 2,
        childNum: 0,
      },
      detaMsg:{
        hotelId: 0,
        hotelImageSize: 5,
        photoGalleryGetFlg: 1,
        groupBookingFlg: 1,
      },
      currentPrice: [],
      isShow: false,
      dataList: {
        roomGroup: null,
      },
      JapanIncrease: '',
      SimilarList: [],
      SimilarObj: 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: [
        "超过13岁视为成人处理",
        "预定成功后房间将为您整晚保留"
      ],
      showOrderPreview: false,
      videoPosition: 0,
      currentHeight: 0,
      isPictureInPicture: false,
      days: [
        {
          val: "",
          top: 0,
          isActive: false,
          display: "",
        },
      ],
      navs: [
        {
          val: "product",
          top: 0,
          isActive: false,
          display: "酒店介紹",
        },
        {
          val: "server",
          top: 0,
          isActive: false,
          display: "服务设施",
        },
         {
          val: "hotelPolicy",
          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,

      HotelRoomTypes: [],//酒店房型
      HotelMealTypes: [],//道旅餐食类型
      DidaHotelRoomDetails: [],//道旅房型详情
      qRoomTypeList: [],//查询房型列表
      qMealTypeList: [],//查询餐食类型列表

      qMsg: {
        RoomTypeName: "", //房型筛选
        MTypeName: "", //早餐筛选
      },
      adultList: [], //成人下拉
      childrenList: [], //儿童下拉
      childrenAgeList: [], //儿童年龄下拉
      Facilities: [],//服务设施
      RoomFacilities: [],//房型服务设施
      itemsPerRow: 6,
      CityCode: '',
      CityName: '',
      order: {},//订单
    };
  },
  watch: {
    SimilarList: {
      handler: function (val, oldval) {
        this.SimilarList = val;
      },
      immediate: true,
      deep: true,
    },
    '$route': {
      handler(newVal, oldVal) {
        let pickuporderHotal = localStorage.getItem("pickuporderHotalDida");
        pickuporderHotal = pickuporderHotal ? JSON.parse(pickuporderHotal) : [];
        if (this.$route.params && this.$route.params.orderKey) {
          let key = this.$route.params.orderKey;
          if (pickuporderHotal.length > 0) {
            this.order = pickuporderHotal.find((x) => x.key == key);
            if (this.order) {
              this.msg.searchroomGroup = this.order.order.msg.searchroomGroup
            }
          }
        }else{
          // if (pickuporderHotal.length > 0) {
          //   this.order = pickuporderHotal[pickuporderHotal.length-1]
          //   if (this.order) {
          //     this.msg.searchroomGroup = this.order.order.msg.searchroomGroup
          //     this.msg.searchroomGroup.forEach(item => {
          //       item.numberOfChildren = 0
          //       item.ChildAgeDetails = 0
          //     })
          //     this.CountPeople()
          //   }
          // }
        }
        this.CountPeople()
        
        let params = newVal.params
        if(params.CheckInDate){
          this.msg.CheckInDate = decodeURIComponent(params.CheckInDate)
          this.msg.CheckOutDate = decodeURIComponent(params.CheckOutDate)
        }else{
          this.msg.CheckInDate = date.formatDate(date.addToDate(new Date(), { days: 8 }), 'YYYY/MM/DD')
          this.msg.CheckOutDate = date.formatDate(date.addToDate(new Date(), { days: 9 }), 'YYYY/MM/DD')
        }
        this.dateRange.to = date.formatDate(this.msg.CheckInDate, 'YYYY/MM/DD')
        this.dateRange.from = date.formatDate(this.msg.CheckOutDate, 'YYYY/MM/DD')
        this.dateRangeFormat = `${this.msg.CheckInDate} - ${this.msg.CheckOutDate} `
        this.StartDate = this.msg.CheckInDate

        if (params.id) {
          this.detaMsg.hotelId = params.id
          this.msg.hotelId = params.id
        }
        this.MinPrice = params.b2CPrice
        this.getData();
        //获取道旅床类型列表
        this.getdidaBedType()
        //获取道旅餐食类型
        this.getdidaMealType()
        // 获取道旅房型详情
        this.getDiDaPriceSearchList()
      },
      immediate: true,
      deep: true,
    }
  },
  computed: {
    getQueryData: {
        get() {
          var _this = this;
          var tempData = [];
          _this.loading = true;
          if (_this.DidaHotelRoomDetails && _this.DidaHotelRoomDetails.HotelList && _this.DidaHotelRoomDetails
            .HotelList.length > 0) {
            tempData = JSON.parse(JSON.stringify(_this.DidaHotelRoomDetails.HotelList));
            if (_this.qMsg.RoomTypeName && _this.qMsg.RoomTypeName != '') {
              tempData = tempData.filter(qitem => qitem.RoomName_CN == _this.qMsg.RoomTypeName);
            }
            if (_this.qMsg.MTypeName && _this.qMsg.MTypeName.MTypeName != '') {
              var newDataArray = [];
              tempData.forEach(qitem => {
                var tempRetePlanList = [];
                if (qitem.RatePlanList && qitem.RatePlanList.length > 0) {
                  qitem.RatePlanList.forEach(pItem => {
                    if (pItem.PriceList && pItem.PriceList.length > 0) {
                      pItem.PriceList.forEach(mItem => {
                        var tempObj = _this.qMealTypeList.find(mtItem => mtItem.MTypeName == _this.qMsg
                          .MTypeName);
                        if (mItem.MealAmount == tempObj.MealAmount && mItem.MealType == tempObj
                          .MealType) {
                          tempRetePlanList.push(pItem)
                        }
                      })
                    }
                  })
                }
                qitem.RatePlanList = tempRetePlanList;
                if (tempRetePlanList && tempRetePlanList.length > 0) {
                  newDataArray.push(qitem);
                }
                
              })
              tempData = newDataArray;
            }
          }
          _this.loading = false;
          return tempData;
        },
      }
  },
  created() {
   for (let i = 1; i < 13; i++) {
        var obj = {
          Id: i
        }
        this.childrenAgeList.push(obj);
        if (i < 10) {
          this.adultList.push(obj);
        }
        if (i < 7) {
          this.childrenList.push({
            Id: i - 1
          });
        }
      }
    
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    window.addEventListener("scroll", this.menu);
   
  },
  beforeDestroy() {
    document.getElementsByTagName("body")[0].style = "";
  },
  methods: {
    changeMsg(msg,item){
      if(item){
        this.detaMsg.hotelId = item.hotelId
        this.msg = {
          ...this.msg,
          ...item,
        }
        this.MinPrice = item.Price
      }else{
        this.CityCode = msg.CityCode
        this.CityName = msg.CityName
      }
      this.getData();
      this.getDiDaPriceSearchList()
    },
    placeOrderHandler(item){
      // this.getDiDaPriceConfirmList(item)
      let order = {
        msg: {
          hotelId: this.msg.hotelId,
          CheckInDate: this.msg.CheckInDate,
          CheckOutDate: this.msg.CheckOutDate,
          ratePlanID: item.RatePlanID,
          RoomCount: this.roomGroup,
          AdultCount: this.numberOfAdults,
          childNum: this.numberOfChildren,
          searchroomGroup: this.msg.searchroomGroup,
        },
        liveNvm: this.liveNvm,
        roomOptionCd: item,
        detail: this.dataList,
        MinPrice: this.MinPrice,
      }
      let key = this.$md5(JSON.stringify(order))
      let pickuporderHotal = localStorage.getItem('pickuporderHotalDida')
      pickuporderHotal = pickuporderHotal?JSON.parse(pickuporderHotal):[]
      pickuporderHotal.push({
        key,
        order
      })
      localStorage.setItem("pickuporderHotalDida",JSON.stringify(pickuporderHotal))
      this.CommonJump('/HotalDidaForm/'+key, {});
      
    },
    // 获取道旅确认价格
    getDiDaPriceConfirmList(item){
      let msg = {
        sort: 1,
        displayFrom: 1,
        CheckInDate: this.msg.CheckInDate,
        CheckOutDate: this.msg.CheckOutDate,
        searchroomGroup: this.msg.searchroomGroup,
        ratePlanID: item.RatePlanID,
        imgUrl: "",
        RoomCount: this.roomGroup,
        ChildCount: this.numberOfChildren,
        AdultCount: this.numberOfAdults,
        OccupancyDetails: [],
        hotelId: this.msg.hotelId,
      }
      this.apipost('dmc_post_GetDiDaPriceConfirm', msg, (res) => {
        if (res.data.resultCode == 1) {
          console.log(res.data)
          
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    getQueryName(type){
      if(type==1){
        this.qMsg.RoomTypeName = this.qMsg.RoomTypeName!='房型(全部)'?this.qMsg.RoomTypeName:''
      }else{
        this.qMsg.MTypeName = this.qMsg.MTypeName!='餐型(全部)'?this.qMsg.MTypeName:''
      }
    },
    changeShowOrderPreviewHandler(){
      this.SimilarObj = {
        JapanIncrease: this.JapanIncrease,
        numberOfAdults: this.numberOfAdults,
        numberOfChildren: this.numberOfChildren,
        CheckInDate: this.msg.CheckInDate,
        CheckOutDate: this.msg.CheckOutDate,
        liveNvm: this.liveNvm
      }
      this.showOrderPreview = !this.showOrderPreview
    },
    showImageHandler(index) {
      index = index>=0?index:0
      let images = this.images
      this.$viewerApi({
        options: {
          initialViewIndex: index,
        },
        images,
      });
    },
    addPeople(m, i, x) {
      if(m=='room'){
        if(i==1){
          this.roomGroup++
          this.msg.searchroomGroup.push(this.roomGroupObj)
        }else{
          if(this.roomGroup>1){
            this.roomGroup--
            this.msg.searchroomGroup.pop()
          }
        }
      }else{
        x[m] = parseInt(x[m]) + i;
        if(m!='numberOfChildren'){
          x[m] = x[m] < 1 ? 1 : x[m]++;
        }else{
          x[m] = x[m] < 0 ? 0 : x[m]++;
          if(x[m]>0)x['ChildAgeDetails'] = x['ChildAgeDetails']?x['ChildAgeDetails']:1
          else x['ChildAgeDetails'] = 0
        }
      }
      setTimeout(()=>{
        this.getDiDaPriceSearchList()
      },1000)
      this.CountPeople()
    },
    CountPeople(){
      this.numberOfAdults = 0
      this.numberOfChildren = 0
      this.msg.searchroomGroup.forEach((x,index)=>{
        x.roomNum = index+1
        this.numberOfAdults += x.numberOfAdults
        this.numberOfChildren += x.numberOfChildren
      })
    },
    optionsFn(cd) {
      return cd >= date.formatDate(date.addToDate(new Date(), { days: 8 }), 'YYYY/MM/DD')
    },
    // 日期筛选
    dateRangeHandler(e) {
      let CheckInDate = `${e.from.year}/${e.from.month}/${e.from.day}`
      let CheckOutDate = `${e.to.year}/${e.to.month}/${e.to.day} `
      let liveNvm = this.dateDiffer(CheckInDate,CheckOutDate)
      if(liveNvm>9||liveNvm==0) return this.$message.error(`住宿时间最多九晚,至少一晚`)
      this.liveNvm = liveNvm
      this.msg.CheckInDate = CheckInDate
      this.msg.CheckOutDate = CheckOutDate
      this.dateRangeFormat = `${this.msg.CheckInDate} - ${this.msg.CheckOutDate} `
      if (this.$refs.qDateProxy) this.$refs.qDateProxy.hide()
      this.getDiDaPriceSearchList()
    },
    dateDiffer(DateStart,DateEnd) {
        //date1结束时间
      let date1 = new Date(DateEnd);
      //date2当前时间
      let date2 = new Date(DateStart);
      date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
      date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
      const diff = date1.getTime() - date2.getTime(); //目标时间减去当前时间
      const diffDate = diff / (24 * 60 * 60 * 1000);  //计算当前时间与结束时间之间相差天数
      return diffDate
    },
    handleSelect(id) {
      if (this.selectedCar === id) {
        this.selectedCar = "";
      } else {
        this.selectedCar = 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(0px)";
      this.currentHeight = temp;
      if (
        this.videoPosition > 0 &&
        this.videoPosition < this.currentHeight &&
        this.options.currentPage == 0 &&
        !this.isPictureInPicture
      ) {
        this.isPictureInPicture = true;
        let t = document.querySelectorAll("video")[0];
        try {
          t.requestPictureInPicture();
        } catch (error) {}
      } else if (
        this.videoPosition > 0 &&
        this.videoPosition > this.currentHeight &&
        this.options.currentPage == 0 &&
        this.isPictureInPicture
      ) {
        this.isPictureInPicture = false;
        document.exitPictureInPicture();
      }
      let h = document.location.hash;
      if (h.indexOf("#/detailHotal/") == -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) {
      this.currentHeight = top;
      window.scrollTo(0, top);
    },
    slideHandler(e) {
      this.options.currentPage = e.currentPage;
      if (
        e.currentPage != 0 &&
        this.$refs.video &&
        this.$refs.video.isPlaying
      ) {
        this.$refs.video.pause();
      }
    },
    playHandler(e) {},
    pauseHandler(e) {},
    timeChangeHandler(e) {

    },
    //
    seekedChangeHandler(e) {
      
    },
    resetHandler() {
      this.currentPrice = [];
      this.$refs.RoomCard.reset();
    },
    changeChosenDateHandler(val) {
      let arrList = function(arr){
        arr.forEach(x=>{
          x.id=null
        })
      }
      arrList(val.roomOptions)
      val.roomOptions.forEach((x,index)=>{
        x.id=(index+1)
      })
      this.currentPrice = JSON.parse(JSON.stringify(val));
      this.$refs.qDateProxy.hide();
    },
    showDialog() {
      this.isShowDialog = true;
    },
    //关闭弹窗
    closeDialog() {
      this.isShowDialog = false;
    },
    //  获取详情
    getData() {
      this.$q.loading.show();
      this.apipost(
        "dmc_post_GetDidaHotelDetails",
        this.detaMsg,
        (res) => {
          this.$q.loading.hide();
          if (res.data.resultCode == 1) {
            this.images = []
            var tempObj = res.data.data;
            this.dataList = res.data.data
            tempObj.images.filter(x=>{
              this.checkImageExists(x, (exists) => {
                if(exists){
                  this.images.push(x)
                }
              });
            })
            this.dataList.images = this.images
            this.CityName = tempObj.CityName.split('(')[0]
            if (tempObj.HotelFacilityList && tempObj.HotelFacilityList.length > 0) {
              const totalRows = Math.ceil(tempObj.HotelFacilityList.length / this.itemsPerRow)
              
              for (let i = 0; i < totalRows; i++) {
                const startIndex = i * this.itemsPerRow
                const endIndex = startIndex + this.itemsPerRow
                const row = tempObj.HotelFacilityList.slice(startIndex, endIndex)
                this.Facilities.push(row)
              }
            }
            if (tempObj.RoomFacilityList && tempObj.RoomFacilityList.length > 0) {
              const totalRows = Math.ceil(tempObj.RoomFacilityList.length / this.itemsPerRow)
              
              for (let i = 0; i < totalRows; i++) {
                const startIndex = i * this.itemsPerRow
                const endIndex = startIndex + this.itemsPerRow
                const row = tempObj.RoomFacilityList.slice(startIndex, endIndex)
                this.RoomFacilities.push(row)
              }
            }
            // let description = tempObj.description.split('<br/>')
            // this.hotelDetails.hotelDescription = []
            // description.forEach((x,index)=>{
            //   console.log(x.replace(/<\/?[^>]+(>|$)/g, ""))
            //   this.hotelDetails.hotelDescription.push(x.replace(/<\/?[^>]+(>|$)/g, ""))
            // })
            this.hotelDetails.hotelDescription = tempObj.description
            this.roomReviewRating = Number(this.dataList.StarRating);
            this.travelLngLat.push({
              Lat: tempObj.Latitude,
              Lng: tempObj.Longitude,
              Address: tempObj.Address_CN
            });
            
            this.$nextTick(() => {
              setTimeout(() => {
                this.navs.forEach((x) => {
                  x.top =
                    this.$refs[x.val].getBoundingClientRect().top + this.currentHeight - 140;
                });
                this.priceListHeight =
                  this.$refs.pricelist.getBoundingClientRect().top +
                  this.currentHeight -
                  60;
              }, 1000);

              
            });

          } else {
            this.$message.error(res.data.message);
          }
          
        },
        null
      );
    },
    getDiDaPriceSearchList() {
      this.$q.loading.show();
      this.DidaHotelRoomDetails = {};
      var that = this;
      this.apipost('dmc_post_GetDiDaPriceSearchList', this.msg, res => {
        if (res.data.resultCode == 1) {
          var tempData = res.data.data;
          tempData.HotelList&&tempData.HotelList.forEach((item) => {
            item.showMore = false
            item.imageList = []
            item.images.forEach(img=>{
              this.checkImageExists(img.Url,(exists) => {
                if(exists){
                  item.imageList.push(img.Url)
                }
              })
            })
            if(item.images.length==0) item.imageList = this.images
          })
          this.DidaHotelRoomDetails = tempData;
          this.qRoomTypeList = tempData.qRoomTypeList?tempData.qRoomTypeList:[];
          this.qRoomTypeList.unshift({RoomName_CN:'房型(全部)'})
          this.qMealTypeList = tempData.qMealTypeList?tempData.qMealTypeList:[];
          this.qMealTypeList.unshift({MTypeName:'餐型(全部)'})
          this.$q.loading.hide();
        }else{
          this.$q.loading.hide();
          this.$message.error(res.data.message);
        }
      }, null)
    },
    getdidaBedType() {
      this.apipost('dmc_post_GetDidaBedTypeBaseInfo', this.detaMsg, res => {
        if (res.data.resultCode == 1) {
          this.HotelRoomTypes = res.data.data;
        }
      }, null)
    },
    getdidaMealType() {
      this.apipost('dmc_post_GetDidaMealType', this.detaMsg, res => {
        if (res.data.resultCode == 1) {
          this.HotelMealTypes = res.data.data;
        }
      }, null)
    },
    // 获取酒店房型
    getRoomType(roomtypeId) {
      let roomtypeName = "";
      if (roomtypeId > 0) {
        this.HotelRoomTypes.forEach((item) => {
          if (item.ID == roomtypeId) {
            roomtypeName = item.Name_CN;
          }
        });
      }
      return roomtypeName;
    },
    //获取餐型
    getMealtype(mealtypeId) {
      let mealtypeName = "";
      if (mealtypeId > 0) {
        this.HotelMealTypes.forEach((item) => {
          if (item.ID == mealtypeId) {
            mealtypeName = item.Name_CN;
          }
        });
      }
      return mealtypeName;
    },
    // 获取酒店房间
    getRoom() {
      
    },
    getPrice2(price){
      if(this.JapanIncrease)
        return Math.ceil(price / this.JapanIncrease)
    },
    
    menu() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (this.scroll > 300) {
        this.isShowNav = true;
      } else {
        this.isShowNav = false;
      }
    },
  },
};
</script>

<style>
  .hotel-details-table {
        border: 1px solid #DCDCDC;
        border-collapse: collapse;
        /* width:680px; */
    }
    .hotel-details-table .td01 {
        padding: 3px 15px;
        background: #F7F7F7;
        width: 226px;
        height: 19px;
        text-align: center;
    }
    .hotel-details-table .td02 {
        padding: 3px 15px;
        background: #FAFAFA;
        width: 69px;
        height: 19px;
        text-align: center;
    }
    .hotel-details-table td {
        width: 439px;
        /* padding: 10px 20px; */
        vertical-align: middle;
        text-align: center;
        border: 1px solid #DCDCDC;
        box-sizing: border-box;
    }
    .hotel-details-tableMoblie {
        border: 1px solid #DCDCDC;
        border-collapse: collapse;
        width:100%;
        margin-top: 5px;
    }
    .hotel-details-tableMoblie .td01 {
        padding: 3px 10px;
        background: #F7F7F7;
        width: 33.33%;
        height: 19px;
        text-align: center;
    }
    .hotel-details-tableMoblie .td02 {
        padding: 3px 5px;
        background: #FAFAFA;
        width: 33.33%;
        height: 19px;
        text-align: center;
    }
    .hotel-details-tableMoblie td {
        width: 100%;
        padding: 10px 20px;
        vertical-align: middle;
        text-align: center;
        border: 1px solid #DCDCDC;
        font-size: 14px;
        box-sizing: border-box;
    }
.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;
}
#setZoom > div {
  zoom: calc(100 / 1000);
}
</style>
<style scoped>
.car-select {
  background: #ef7a70;
  color: #fff;
}
.gray {
  color: #999;
}
.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;
}
.tag {
  height: 28px;
  border-radius: 4px;
  line-height: 28px;
  padding: 0 14px;
}
.tag-blue {
  background: #eff7fe;
  color: #36a1fa;
}
.tag-red {
  background: var(--q-color-primary);
  color: #ee4454;
}
.room-item {
  padding: 25px;
  border-radius: 8px;
  background: #ffffff;
}
.room-img {
  width: 303px;
  height: 176px;
  border-radius: 8px;
}
.canuse {
  color: #2d90ff;
}
.select-btn {
  width: 100px;
  height: 42px;
  background: #ffffff;
  border: 1px solid #ee4454;
  border-radius: 8px;
  color: #ee4454;
}
</style>