<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}" v-if="LowPriceInfo">
              <span class=" text-orange text-weight-bold fz18" :class="{'q-pl-lg':$q.platform.is.desktop}">
                {{LowPriceInfo.Currency}}
                {{LowPriceInfo.Value}}
              </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" @getPriceDetails="getPriceDetails"></DetailsList>


    
        </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>,
          LowPriceInfo:{} as any
      })
      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_DiDaHOTEL_DATE))
      data.urlParamsMsg = currentRouter.currentRoute._value.params
      const search = reactive({
        hotelId: data.urlParamsMsg.hotelId,
        sort: 1,
        displayFrom: 1,
        CheckInDate: data.getParamsMsg.CheckInDate,//入住时间
        CheckOutDate: data.getParamsMsg.CheckOutDate,//离房时间
        roomOptionCd: "",
        searchroomGroup: [] as Array<ang>,//客房数
      })
      provide(DirtionmaryHelper.DiDaHOTEL_QUERY_PARAM, search)
      const methods = {
        getPriceDetails(priceDetails: any) {
          data.LowPriceInfo=priceDetails;
          console.log('***priceDetails: ', priceDetails)
        },
        goUrl(url:stringify,dataObj:{}){
          localStorage.removeItem(DirtionmaryHelper.SCATTERED_HOTEL_ORDER)
          let d = {
            searchroomGroup: search.searchroomGroup,
            room: dataObj.room,
            auditNum: dataObj.auditNum,
            childNum: dataObj.childNum,
            CheckInDate: search.CheckInDate,
            CheckOutDate: search.CheckOutDate,
            imgUrl: data.h.hotelImageUrl1
          }
          localStorage.setItem(DirtionmaryHelper.SCATTERED_HOTEL_ORDER,JSON.stringify(d))
          window.open(url, '_blank')
        },
        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.List = []
                data.h.List.push("")
                data.images = data.h.List
                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>
  