<template>
    <div class="q-py-lg">
      <div class="bg-white q-py-lg column" style="max-width: 1366px; min-width: 375px;margin: auto;" :style="{'width':$q.platform.is.desktop?'1300px':'100%'}">
        <div class="row q-px-lg q-mb-lg" :class="{ 'row justify-between': $q.platform.is.desktop }">
          <div :class="{ 'row items-center': $q.platform.is.desktop, 'row wrap': $q.platform.is.mobile }">
            <div class="mobile-only row items-center">
              <div class="text-weight-bold fz20 ellipsis" style="width: 280px">{{ hotelSummary.Name_CN }}</div>
            </div>
            <div class="text-weight-bold fz20 ellipsis desktop-only">{{ hotelSummary.Name_CN }}</div>
            <div :class="{'q-pt-sm':$q.platform.is.mobile}">
              <span class=" text-orange text-weight-bold fz18" :class="{'q-pl-lg':$q.platform.is.desktop}">
                円
                {{urlParamsMsg.lowrateBySetCurrency}}
              </span>
              <span class="text-grey-8 q-pl-xs">/{{$t('v101.scattered.qi')}}</span>
            </div>
            <div :class="{'q-ml-md':$q.platform.is.desktop,'q-pt-sm q-pl-sm':$q.platform.is.mobile}">
              <q-rating v-model="hotelSummary.StarRating" size="1.5em" color="orange" :max="hotelSummary.StarRating" readonly />
            </div>
          </div>
        </div>
        <div class="col" :class="{'q-px-lg':$q.platform.is.desktop,'q-px-md':$q.platform.is.mobile}">
          <div class="row nowrap">
            <q-icon class="text-grey-13 q-mr-xs" name="place" size="xs"></q-icon>
            <span class="col fz14 text-weight-bold text-blick">{{ hotelSummary.Address_CN }}</span>
          </div>
          <div class="q-py-lg no-wrap col" :class="{ 'row': $q.platform.is.desktop, 'column': $q.platform.is.mobile }">
            <div class="row rounded-borders relative-position" :class="{ 'col-6': $q.platform.is.desktop, 'height-320': $q.platform.is.mobile }" style="overflow: hidden" v-if="h.List">
              <div  :class="{ 'col-5': h.List.length >= 3&&$q.platform.is.desktop, 'col-7': h.List.length >= 3&&$q.platform.is.mobile, 'col-6': h.List.length == 2, 'col-12': h.List.length == 1 }">
                <q-img @click="showImageHandler(h.List[0])" :src="h.List[0]" spinner-color="drk" spinner-size="20px" height="100%" mode="cover" />
              </div>
              <div class="col q-pl-sm" v-if="h.List.length > 1">
                <div :style="{ height: h.List.length > 2 ? '50%' : '100%' }">
                  <q-img @click="showImageHandler(h.List[1])" :src="h.List[1]" spinner-color="drk" spinner-size="20px" height="100%" mode="cover" />
                </div>
                <div class="row items-end q-pt-sm" style="height: 50%" v-if="h.List.length > 2">
                  <q-img @click="showImageHandler(h.List[2])" :src="h.List[2]" spinner-color="drk" spinner-size="20px" height="100%" mode="cover">
                    <div class="absolute-full text-subtitle2 flex flex-center" v-if="h.List.length > 3&&$q.platform.is.mobile">
                      <span class="fz20 text-weight-bold">+</span>
                      <span class="text-h5 text-weight-bold">{{ h.List.length - 3 }}</span>
                    </div>
                  </q-img>
                </div>
              </div>
              <div class="col q-pl-sm" v-if="h.List.length > 3&&$q.platform.is.desktop">
                <div :style="{ height: h.List.length > 4 ? '50%' : '100%' }">
                  <q-img @click="showImageHandler(h.List[3])" :src="h.List[3]" spinner-color="drk" spinner-size="20px" height="100%" mode="cover" />
                </div>
                <div class="row items-end q-pt-sm" style="height: 50%" v-if="h.List.length > 4">
                  <q-img @click="showImageHandler(h.List[4])" :src="h.List[4]" spinner-color="drk" spinner-size="20px" height="100%" mode="cover">
                    <div class="absolute-full text-subtitle2 flex flex-center" v-if="h.List.length > 5">
                      <span class="fz20 text-weight-bold">+</span>
                      <span class="text-h5 text-weight-bold">{{ h.List.length - 5 }}</span>
                    </div>
                  </q-img>
                </div>
              </div>
            </div>
            <div class="rounded-borders" :class="{ 'q-ml-sm col': $q.platform.is.desktop, 'q-mt-sm height-320': $q.platform.is.mobile }" style="overflow: hidden" id="baiduMap">
              <GoogleMap api-key="AIzaSyCvRZN9lGl3y3EsM0A0sWPf1pZ2olGsyNg" style="width: 100%; height: 100%" :center="center" :zoom="15" v-if="center">
                <Marker :options="{ position: center }" />
              </GoogleMap>
            </div>
          </div>
          <DetailsList @goUrl="goUrl"></DetailsList>
          <div class="bg-light-blue-1 q-pa-md fz14 rounded-borders">
            <div class="text-weight-bold">{{ $t('v101.scatteredDetails.jiudianxinxi') }}</div>
            <!-- <div class="text-grey-8 q-mt-sm">{{ h.Descriptions }}</div> -->
          </div>
          
          <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
            <div class="q-mt-lg row">
              <div class="f12 text-grey-500" :class="{'col-2':$q.platform.is.desktop,'col-3':$q.platform.is.mobile}">{{ $t('v101.scatteredDetails.titlexinxi1') }}</div>
              <div class="col text-subtitle2 text-weight-bolder">{{ h.pickupService?h.pickupService:'--' }}</div>
            </div>
          </div>
          <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
            <div class="q-mt-lg row">
              <div class="f12 text-grey-500" :class="{'col-2':$q.platform.is.desktop,'col-3':$q.platform.is.mobile}">{{ $t('v101.scatteredDetails.titlexinxi2') }}</div>
              <div class="col text-subtitle2 text-weight-bolder">{{ h.amenitiesNotes?h.amenitiesNotes:'--' }}</div>
            </div>
          </div>
          <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
            <div class="q-mt-lg row">
              <div class="f12 text-grey-500" :class="{'col-2':$q.platform.is.desktop,'col-3':$q.platform.is.mobile}">{{ $t('v101.scatteredDetails.titlexinxi3') }}</div>
              <div class="col text-subtitle2 text-weight-bolder">
                {{ h.hotelRooms!=''?h.hotelRooms:'--' }}
              </div>
            </div>
          </div>
          <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
            <div class="q-mt-lg row">
              <div class="f12 text-grey-500" :class="{'col-2':$q.platform.is.desktop,'col-3':$q.platform.is.mobile}">{{ $t('v101.scatteredDetails.titlexinxi4') }}</div>
              <div class="col row text-subtitle2 text-weight-bolder">
                <template v-if="InterArr.length>0">
                  <div class="q-mb-md q-mr-md" v-for="x in InterArr">
                    <span class="rounded-borders bg-blue-1 text-blue q-px-sm q-py-xs">{{x}}</span>
                  </div>
                </template>
                <template v-else>--</template>
              </div>
            </div>
          </div>
          <div :class="{'q-px-lg': $q.platform.is.desktop }">
            <div class="q-mt-lg" :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
              <div class="f12 text-grey-500" :class="{'col-2':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">{{ $t('v101.scatteredDetails.titlexinxi5') }}</div>
              <div class="text-subtitle2 text-weight-bolder" :class="{'col':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
                <table :class="{'hotel-details-table':$q.platform.is.desktop,'hotel-details-tableMoblie':$q.platform.is.mobile}">
                  <tr>
                      <td colspan="3" class="td01">{{$t('v101.scatteredDetails.shiwai')}}</td>
                      <td colspan="3" class="td01">{{$t('v101.scatteredDetails.wunei')}}</td>
                      <td colspan="3" class="td01">{{$t('v101.scatteredDetails.zhengqiyu')}}</td>
                  </tr>
                  <tr>
                      <template v-for="item in 3">
                        <td class="td02">{{$t('v101.scatteredDetails.nan')}}</td>
                        <td class="td02">{{$t('v101.scatteredDetails.nv')}}</td>
                        <td class="td02">{{$t('v101.scatteredDetails.hunyu')}}</td>
                      </template>
                  </tr>
                  <tr>
                      <td>{{bathRoom[0]}}</td>
                      <td>{{bathRoom[1]}}</td>
                      <td>{{bathRoom[2]}}</td>
                      <td>{{bathRoom[3]}}</td>
                      <td>{{bathRoom[4]}}</td>
                      <td>{{bathRoom[5]}}</td>
                      <td>{{bathRoom[6]}}</td>
                      <td>{{bathRoom[7]}}</td>
                      <td>{{bathRoom[8]}}</td>
                  </tr>
              </table>
              <div class="row wrap q-pt-md">
                <span class="rounded-borders bg-blue-1 text-blue q-mr-md q-px-sm q-py-xs q-mb-sm" v-for="item in HotSpring">{{item}}</span>
              </div>
              </div>
            </div>
          </div>
          <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
            <div class="q-mt-lg row">
              <div class="f12 text-grey-500" :class="{'col-2':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">{{ $t('v101.scatteredDetails.titlexinxi6') }}</div>
              <div class="row wrap text-subtitle2 text-weight-bolder"  :class="{'col':$q.platform.is.desktop,'col-12 q-pt-sm':$q.platform.is.mobile}">
                <span class="rounded-borders bg-blue-1 text-blue q-mr-md q-px-sm q-py-xs q-mb-sm" v-for="item in Services">{{item}}</span>
              </div>
            </div>
          </div>
          <div class="q-mt-lg">
            <div class="bg-orange-1 q-pa-md rounded-borders fz14" style="border: 1px dashed orange">
              <div class="text-weight-bold">{{ $t('v101.scatteredDetails.miaoshu') }}</div>
              <div class="text-grey-700 q-mt-sm">{{ h.hotelDescription }}</div>
            </div>
          </div>
        </div>
      </div>
      <q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
    </div>
    <q-dialog class="no-padding" v-model="showImagePriview" persistent v-if="images && images.length > 0">
      <image-preview :current="currentImage" :images="images"></image-preview>
    </q-dialog>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref, reactive, toRefs, provide, onMounted, inject, watch, onBeforeUnmount, computed } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { useQuasar } from 'quasar'
  import useScrollModule from 'src/module/scrollbar/scrollModule'
  import HotelService from 'src/api/scattered'
  import message from 'src/utils/message'
  import { ApiResult } from 'src/@types/enumHelper'
  import ImagePreview from 'src/components/common/ImagePreview.vue'
  import { GoogleMap, Marker } from 'vue3-google-map'
  import { DirtionmaryHelper } from 'src/config/dictionary'
  import { currentRouter } from 'src/router'
  import { HotelArea, useHotel } from '../../utils/hotelRate'
  import DetailsList from "../../components/scattered/dida/DetailsList.vue"
import DidaService from 'src/api/didahotel'
  export default defineComponent({
    components: { ImagePreview, GoogleMap, Marker, DetailsList },
    props: {
      // hotelId: {
      //   type: Number,
      //   required: true
      // }
    },
    setup(props, context) {
      const { t } = useI18n()
  
      // watch(
      //   () => props.hotelId,
      //   (n, o) => {
      //     data.hotelId = n
      //     methods.initHotel()
      //   }
      // )
  
      const $q = useQuasar()
      const data = reactive({
        scrollStyle: {} as any,
        loading: true,
        h: {} as any,
        images: [] as Array<string>,
        currentImage: '',
        showImagePriview: false,
        center: null as any,
        params:{
          hotelId: "",
          hotelImageSize: 5,
          photoGalleryGetFlg: 1,
          groupBookingFlg: 1
        },
        hotelSummary:{} as any,
        getParamsMsg:{} as any,
        urlParamsMsg:{} as any,
        InterList: [] as Array<HotelArea>,
        InterArr: [] as Array<String>,//客房有网络连接
        HotSpringList: [] as Array<HotelArea>,
        HotSpring: [] as Array<String>,//洗漱用品是否免费
        bathRoom: [],
        ServicesList: [] as Array<HotelArea>,//设施与服务
        Services: [] as Array<String>
      })
      data.InterList = useHotel.getHotelInter()
      data.HotSpringList = useHotel.getHotelSpring()
      data.ServicesList = useHotel.getHotelServices()
      const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
      pageTitle.value = t('v101.scatteredDetails.xiangqing')
  
      data.scrollStyle = useScrollModule().scrollStyle
      data.getParamsMsg = JSON.parse(localStorage.getItem(DirtionmaryHelper.SCATTERED_HOTEL_DATE))
      data.urlParamsMsg = currentRouter.currentRoute.value.params
      const search = reactive({
        hotelId: data.urlParamsMsg.hotelId,
        sort: 1,
        displayFrom: 1,
        arrivalDate: data.getParamsMsg.arrivalDate,//入住时间
        departureDate: data.getParamsMsg.departureDate,//离房时间
        roomOptionCd: "",
        searchroomGroup: data.getParamsMsg.searchroomGroup,//客房数
      })
      provide(DirtionmaryHelper.HOTEL_QUERY_PARAM, search)
      const methods = {
        goUrl(url:stringify,dataObj:{}){
          localStorage.removeItem(DirtionmaryHelper.SCATTERED_HOTEL_ORDER)
          let d = {
            searchroomGroup: search.searchroomGroup,
            room: dataObj.room,
            auditNum: dataObj.auditNum,
            childNum: dataObj.childNum,
            arrivalDate: search.arrivalDate,
            departureDate: search.departureDate,
            imgUrl: data.h.hotelImageUrl1
          }
          localStorage.setItem(DirtionmaryHelper.SCATTERED_HOTEL_ORDER,JSON.stringify(d))
          window.open(url, '_blank')
          // $router.push({ path:url })
        },
        initMap(lat: any, lng: any) {
          let country=localStorage.getItem(DirtionmaryHelper.USER_IN_COUNTRY) ?? 'GW'
          if(country!='CN'){
            data.center = { lat: parseFloat(lng), lng: parseFloat(lat) }
          }else{
            let Bmap = window.BMapGL // 注意要带window，不然会报错（注意官方api,会有改动，之前是Bmap,后面3.0版本改为了BMap,最好查文档或者打印一下window）
            var b = new Bmap.Map('baiduMap')
            b.centerAndZoom(new Bmap.Point(lat, lng), 15)
            b.enableScrollWheelZoom(true)
            b.addOverlay(new Bmap.Marker(new Bmap.Point(lat, lng)))
          }
        },
        initHotel() {
          data.loading = true
          data.params.hotelId = data.urlParamsMsg.hotelId
          let param = Object.assign(data.params)
          DidaService.GetHotelDetails(param)
            .then(r => {
              if (r.data.resultCode == ApiResult.SUCCESS) {
                data.h = r.data.data;
                console.log("道旅酒店详情1",r.data.data);
                data.hotelSummary = r.data.data;
                data.h.roomReviewRating = parseFloat(
                  data.h.roomReviewRating
                );
                data.h.hotelRooms = data.h.hotelRooms.substr(8)
                data.h.List = []
              
                data.images = data.h.List
                //拆分网络连接
                if (data.h.internetAccessibilityOfTheRoom != "") {
                  data.InterArr = [] as Array<any>;
                  let InternetArr = data.h.internetAccessibilityOfTheRoom.split(
                    ","
                  );
                  InternetArr.forEach((x:String,index:Number)=>{
                    if(x==1){
                      data.InterArr.push(data.InterList[index].name)
                    }
                  })
                }
                //拆分温泉
                if (data.h.bathAndBathAmenities != "") {
                  data.HotSpring = [];
                  data.bathRoom = [];
                  let HotSpring = data.h.bathAndBathAmenities.split(",");
                  data.bathRoom = HotSpring.slice(2, 11);
                  if (HotSpring[0] == 1) {
                    data.HotSpring.push(data.HotSpringList[0].name);
                  } else if (HotSpring[0] == 2) {
                    data.HotSpring.push(data.HotSpringList[1].name);
                  } else if (HotSpring[0] == 3) {
                    data.HotSpring.push(data.HotSpringList[2].name);
                  } else if (HotSpring[0] == 4) {
                    data.HotSpring.push(data.HotSpringList[3].name);
                  }

                  if (HotSpring[1] == 1) {
                    data.HotSpring.push(data.HotSpringList[4].name+`(${t('v101.scatteredDetails.SpringStatesTJ0')})`);
                  } else if (HotSpring[1] == 2) {
                    data.HotSpring.push(data.HotSpringList[4].name+`(${t('v101.scatteredDetails.SpringStatesTJ1')})`);
                  }

                  if (HotSpring[11] == 1) {
                    data.HotSpring.push(data.HotSpringList[5].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
                  } else if (HotSpring[11] == 2) {
                    data.HotSpring.push(data.HotSpringList[5].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
                  }
                  if (HotSpring[12] == 1) {
                    data.HotSpring.push(data.HotSpringList[6].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
                  } else if (HotSpring[12] == 2) {
                    data.HotSpring.push(data.HotSpringList[6].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
                  }
                  if (HotSpring[13] == 1) {
                    data.HotSpring.push(data.HotSpringList[7].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
                  } else if (HotSpring[13] == 2) {
                    data.HotSpring.push(data.HotSpringList[7].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
                  }

                  if (HotSpring[14] == 1) {
                    data.HotSpring.push(data.HotSpringList[8].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
                  } else if (HotSpring[14] == 2) {
                    data.HotSpring.push(data.HotSpringList[8].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
                  }

                  if (HotSpring[15] == 1) {
                    data.HotSpring.push(data.HotSpringList[9].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
                  } else if (HotSpring[15] == 2) {
                    data.HotSpring.push(data.HotSpringList[9].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
                  }
                  if (HotSpring[16] == 1) {
                    data.HotSpring.push(data.HotSpringList[10].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
                  } else if (HotSpring[16] == 2) {
                    data.HotSpring.push(data.HotSpringList[10].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
                  }

                  if (HotSpring[17] == 1) {
                    data.HotSpring.push(data.HotSpringList[11].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
                  } else if (HotSpring[17] == 2) {
                    data.HotSpring.push(data.HotSpringList[11].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
                  }

                  if (HotSpring[18] == 1) {
                    data.HotSpring.push(data.HotSpringList[12].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
                  } else if (HotSpring[18] == 2) {
                    data.HotSpring.push(data.HotSpringList[12].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
                  }

                  if (HotSpring[19] == 1) {
                    data.HotSpring.push(data.HotSpringList[13].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
                  } else if (HotSpring[19] == 2) {
                    data.HotSpring.push(data.HotSpringList[13].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
                  }
                  if (HotSpring[20] == 1) {
                    data.HotSpring.push(data.HotSpringList[14].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
                  } else if (HotSpring[20] == 2) {
                    data.HotSpring.push(data.HotSpringList[14].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
                  }

                  if (HotSpring[21] == 1) {
                    data.HotSpring.push(data.HotSpringList[15].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
                  } else if (HotSpring[21] == 2) {
                    data.HotSpring.push(data.HotSpringList[15].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
                  }

                  if (HotSpring[22] == 1) {
                    data.HotSpring.push(data.HotSpringList[16].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
                  } else if (HotSpring[22] == 2) {
                    data.HotSpring.push(data.HotSpringList[16].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
                  }
                  if (HotSpring[23] == 1) {
                    data.HotSpring.push(data.HotSpringList[17].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
                  } else if (HotSpring[23] == 2) {
                    data.HotSpring.push(data.HotSpringList[17].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
                  }
                  if (HotSpring[24] == 1) {
                    data.HotSpring.push(data.HotSpringList[18].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
                  } else if (HotSpring[24] == 2) {
                    data.HotSpring.push(data.HotSpringList[18].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
                  }
                  if (HotSpring[25] == 1) {
                    data.HotSpring.push(data.HotSpringList[19].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
                  } else if (HotSpring[25] == 2) {
                    data.HotSpring.push(data.HotSpringList[19].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
                  }
                  if (HotSpring[26] == 1) {
                    data.HotSpring.push(data.HotSpringList[20].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
                  } else if (HotSpring[26] == 2) {
                    data.HotSpring.push(data.HotSpringList[20].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
                  }

                  if (HotSpring[27] == 1) {
                    data.HotSpring.push(data.HotSpringList[21].name+`(${t('v101.scatteredDetails.SpringStatesY1')})`);
                  }
                  if (HotSpring[28] == 1) {
                    data.HotSpring.push(data.HotSpringList[22].name+`(${t('v101.scatteredDetails.SpringStatesTJ0')})`);
                  } else if (HotSpring[28] == 2) {
                    data.HotSpring.push(data.HotSpringList[22].name+`(${t('v101.scatteredDetails.SpringStatesTJ1')})`);
                  }
                  if (HotSpring[29] == 1) {
                    data.HotSpring.push(data.HotSpringList[23].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
                  } else if (HotSpring[29] == 2) {
                    data.HotSpring.push(data.HotSpringList[23].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
                  }
                  if (HotSpring[30] == 1) {
                    data.HotSpring.push(data.HotSpringList[24].name+`(${t('v101.scatteredDetails.SpringStatesTJ0')})`);
                  } else if (HotSpring[29] == 2) {
                    data.HotSpring.push(data.HotSpringList[24].name+`(${t('v101.scatteredDetails.SpringStatesTJ1')})`);
                  }
                }
                //拆分酒店服务与设施
                if (data.h.roomEquipments != "") {
                  let ServeArr = data.h.roomEquipments.split(",");
                  data.Services = [];
                  if (ServeArr[0] == 1) {
                    data.Services.push(data.ServicesList[0].name);
                  }
                  if (ServeArr[1] == 0) {
                    data.Services.push(data.ServicesList[1].name);
                  }
                  if (ServeArr[1] == 1) {
                    data.Services.push(data.ServicesList[2].name);
                  }
                  if (ServeArr[1] == 2) {
                    data.Services.push(data.ServicesList[3].name);
                  }
                  if (ServeArr[1] == 3) {
                    data.Services.push(data.ServicesList[4].name);
                  }
                  if (ServeArr[1] == 4) {
                    data.Services.push(data.ServicesList[5].name);
                  }
                  if (ServeArr[2] == 1) {
                    data.Services.push(data.ServicesList[6].name);
                  }
                  if (ServeArr[2] == 2) {
                    data.Services.push(data.ServicesList[7].name);
                  }
                  if (ServeArr[2] == 3) {
                    data.Services.push(data.ServicesList[8].name);
                  }
                  if (ServeArr[2] == 4) {
                    data.Services.push(data.ServicesList[9].name);
                  }
                  if (ServeArr[3] == 1) {
                    data.Services.push(data.ServicesList[10].name);
                  }
                  if (ServeArr[3] == 2) {
                    data.Services.push(data.ServicesList[11].name);
                  }
                  if (ServeArr[3] == 3) {
                    data.Services.push(data.ServicesList[12].name);
                  }
                  if (ServeArr[3] == 4) {
                    data.Services.push(data.ServicesList[13].name);
                  }
                  if (ServeArr[4] == 1) {
                    data.Services.push(data.ServicesList[14].name);
                  }
                  if (ServeArr[4] == 2) {
                    data.Services.push(data.ServicesList[15].name);
                  }
                  if (ServeArr[4] == 3) {
                    data.Services.push(data.ServicesList[16].name);
                  }
                  if (ServeArr[4] == 4) {
                    data.Services.push(data.ServicesList[17].name);
                  }
                  if (ServeArr[5] == 0) {
                    data.Services.push(data.ServicesList[18].name);
                  }
                  if (ServeArr[5] == 1) {
                    data.Services.push(data.ServicesList[19].name);
                  }
                  if (ServeArr[5] == 2) {
                    data.Services.push(data.ServicesList[20].name);
                  }
                  if (ServeArr[5] == 3) {
                    data.Services.push(data.ServicesList[21].name);
                  }
                  if (ServeArr[5] == 4) {
                    data.Services.push(data.ServicesList[22].name);
                  }
                  if (ServeArr[6] == 1) {
                    data.Services.push(data.ServicesList[23].name);
                  }
                  if (ServeArr[6] == 2) {
                    data.Services.push(data.ServicesList[24].name);
                  }
                  if (ServeArr[7] == 1) {
                    data.Services.push(data.ServicesList[25].name);
                  }
                  if (ServeArr[7] == 2) {
                    data.Services.push(data.ServicesList[26].name);
                  }
                  if (ServeArr[8] == 1) {
                    data.Services.push(data.ServicesList[27].name);
                  }
                  if (ServeArr[8] == 2) {
                    data.Services.push(data.ServicesList[28].name);
                  }
                  if (ServeArr[9] == 1) {
                    data.Services.push(data.ServicesList[29].name);
                  }
                  if (ServeArr[9] == 2) {
                    data.Services.push(data.ServicesList[30].name);
                  }
                  if (ServeArr[10] == 1) {
                    data.Services.push(data.ServicesList[31].name);
                  }
                  if (ServeArr[11] == 1) {
                    data.Services.push(data.ServicesList[32].name);
                  }
                  if (ServeArr[11] == 2) {
                    data.Services.push(data.ServicesList[33].name);
                  }
                }
                methods.initMap(data.hotelSummary.Longitude, data.hotelSummary.Latitude)
              } else {
                message.errorMsg(r.data.message)
              }
              data.loading = false
            })
            .catch(e => {
              data.loading = false
              message.errorMsg(e.message)
            })
        },
        showImageHandler(url: string) {
          data.currentImage = url
          data.showImagePriview = true
        }
      }
  
      onMounted(() => {
        methods.initHotel()
      })
  
      return { ...toRefs(data), ...methods }
    }
  })
  </script>
  
  <style>
  .hotelCard-img {
    width: 228px;
    height: 162px;
    overflow: hidden;
  }
  .hotelCard-title {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .hotel-info-item::before {
    display: inline;
    content: '·';
    font-weight: bolder;
    margin-right: 4px;
  }
  .height-320 {
    height: 250px;
  }
  .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;
        font-size: 14px;
        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;
    }
    .HD_hotelComIntroduce{
        margin:auto;
        height:auto;
        border-bottom:1px solid #DCDCDC;
        color:#111111;
    }
    .HD_hotelComIntroduce span{
        display:inline-block;
        margin-bottom:10px;
    }
    .HD_inTitle{
        font-size:14px;
        font-weight: bold;
        color:#111111;
        margin-bottom:20px;
    }
    .HD_ServiceList span{
        display: inline-block;
        margin:0 30px 10px 0;
        white-space: nowrap;
    }
  </style>
  