<template>
  <q-card class="bg-white q-py-lg column" style="max-width: 1366px; min-width: 375px; width: 70%; height: 80vh">
    <div class="q-px-lg q-mb-lg" :class="{ 'row justify-between': $q.platform.is.desktop }">
      <div :class="{ 'row items-center': $q.platform.is.desktop, '': $q.platform.is.mobile }">
        <div class="mobile-only row items-center">
          <div class="text-weight-bold fz20 ellipsis" style="width: 280px">{{ h.Name }}{{ h.Name }}{{ h.Name }}</div>
          <q-icon class="text-grey-13 cursor-pointer text-right q-ml-sm" name="close" size="md" v-close-popup></q-icon>
        </div>
        <div class="text-weight-bold fz20 ellipsis desktop-only">{{ h.Name }}</div>
        <div :class="{ 'q-ml-md': $q.platform.is.desktop }">
          <q-rating v-model="h.Star" size="1.5em" color="orange" :max="h.Star" readonly />
        </div>
      </div>
      <q-icon class="text-grey-13 cursor-pointer desktop-only" name="close" size="md" v-close-popup></q-icon>
    </div>
    <q-scroll-area :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="col q-px-lg">
      <!-- <div class="q-py-md text-blue">
        <span class="fz14 text-weight-bold q-pr-sm">{{ $t('hotel.col.four') }}</span>
        <span class="text-h5 text-weight-bold">500-700</span>
        <span class="fz14 text-weight-bold">{{ $t('unit.jp') }}</span>
      </div> -->
      <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">{{ h.Address }}</span>
      </div>
      <div class="q-pt-sm" :class="{ row: $q.platform.is.desktop, column: $q.platform.is.mobile }">
        <div>
          <q-icon class="text-grey-13 q-mr-xs" name="phone" size="xs"></q-icon>
          <span class="fz14 text-weight-bold text-blick">{{ $t('hotel.details.zuoji') }}:</span>
          <span class="fz14 text-weight-bold text-blue q-ml-sm q-mr-md">{{ h.Tel }}</span>
        </div>
        <div :class="{ 'q-mr-lg': $q.platform.is.desktop, 'q-mt-sm': $q.platform.is.mobile }">
          <span class="fz14 text-weight-bold text-blick">{{ $t('hotel.details.chuanzhen') }}:</span>
          <span class="fz14 text-weight-bold text-blue q-ml-sm">{{ h.Fax == '' ? $t('noneFax') : h.Fax }}</span>
        </div>
        <div :class="{ 'q-mr-lg': $q.platform.is.desktop, 'q-mt-sm': $q.platform.is.mobile }">
          <span class="fz14 text-weight-bold text-blick">{{ $t('hotel.details.guanwang') }}:</span>
          <a class="fz14 text-weight-bold text-blue q-ml-sm" :href="h.URL" target="_blank">{{ h.URL }}</a>
        </div>
      </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 v-if="h.ChainBrand" class="f12 absolute-left bg-white"
            style="padding: 5px; bottom: unset; z-index: 1; border-bottom-right-radius: 4px">
            <div class="row items-center rounded-borders" style="overflow: hidden">
              <div class="bg-dark text-white" style="padding: 0 4px; font-size: 12px">品牌</div>
              <div class="text-dark" style="padding: 0 4px; font-size: 12px; background: #f0bd86">{{ h.ChainBrand }}
              </div>
            </div>
          </div>
          <div class="col-7"
            :class="{ 'col-7': h.List.length >= 3, 'col-6': h.List.length == 2, 'col-12': h.List.length == 1 }">
            <q-img @click="showImageHandler(`http://imgfile.oytour.com${h.List[0].Path}`)"
              :src="`http://imgfile.oytour.com${h.List[0].Path}`" 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(`http://imgfile.oytour.com${h.List[1].Path}`)"
                :src="`http://imgfile.oytour.com${h.List[1].Path}`" 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(`http://imgfile.oytour.com${h.List[2].Path}`)"
                :src="`http://imgfile.oytour.com${h.List[2].Path}`" 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">
                  <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>
        <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>
      <div class="bg-light-blue-1 q-pa-md fz14 rounded-borders">
        <div class="text-weight-bold">{{ $t('hotel.details.xiangqing') }}</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="col-3 f12 text-grey-500">{{ $t('hd.item.a') }}</div>
          <div class="col text-subtitle2 text-weight-bolder">{{ moneyFormat(h.InTangTax) }}</div>
        </div>
      </div>
      <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
        <div class="q-mt-lg row">
          <div class="col-3 f12 text-grey-500">{{ $t('hd.item.b') }}</div>
          <div class="col text-subtitle2 text-weight-bolder">{{ moneyFormat(h.CityTax) }}</div>
        </div>
      </div>
      <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
        <div class="q-mt-lg row">
          <div class="col-3 f12 text-grey-500">{{ $t('hd.item.c') }}</div>
          <div class="col text-subtitle2 text-weight-bolder">
            {{ h.IsHavearking == 0 ? $t('none') : $t('have') }}
            <span class="q-ml-md hotel-info-item" v-if="h.IsHavearking == 1">{{
              h.ParkFee == 0 ? $t('free') :
                moneyFormat(h.ParkFee) + $t('unit.jp')
            }}</span>
          </div>
        </div>
      </div>
      <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
        <div class="q-mt-lg row">
          <div class="col-3 f12 text-grey-500">{{ $t('hd.item.d') }}</div>
          <div class="col text-subtitle2 text-weight-bolder">{{ $t('before') + h.DieLine + $t('unit.day') }}</div>
        </div>
      </div>
      <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
        <div class="q-mt-lg row">
          <div class="col-3 f12 text-grey-500">{{ $t('hd.item.e') }}</div>
          <div class="col text-subtitle2 text-weight-bolder">
            {{ !h.isDinner ? $t('none') : $t('have') }}
            <span v-if="h.isDinner" class="q-ml-md hotel-info-item" v-for="x in h.Dinners">{{ x.Name }}</span>
          </div>
        </div>
      </div>
      <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
        <div class="q-mt-lg row">
          <div class="col-3 f12 text-grey-500">{{ $t('hd.item.f') }}</div>
          <div class="col text-subtitle2 text-weight-bolder">{{ h.HotelTypeInfo?.Name }}</div>
        </div>
      </div>
      <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
        <div class="q-mt-lg row">
          <div class="col-3 f12 text-grey-500">{{ $t('hd.item.g') }}</div>
          <div class="col text-subtitle2 text-weight-bolder row items-center q-gutter-sm" v-if="h.CheckHotelService">
            <span class="hotel-info-item" v-for="(x, i) in h.CheckHotelService">{{ x.Content }}</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('hd.item.h') }}</div>
          <div class="text-grey-700 q-mt-sm">{{ h.WarmTip }}</div>
        </div>
      </div>
    </q-scroll-area>
  </q-card>
  <q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
  <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/hotel'
import message from 'src/utils/message'
import { ApiResult } from 'src/@types/enumHelper'
import { getDinners, getHotelType, moneyFormat } from 'src/utils/tools'
import { DinnerType, HotelType } from 'src/@types'
import ImagePreview from 'src/components/common/ImagePreview.vue'
import { GoogleMap, Marker } from 'vue3-google-map'
import { DirtionmaryHelper } from 'src/config/dictionary'
export default defineComponent({
  components: { ImagePreview, GoogleMap, Marker },
  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,
      hotelId: props.hotelId,
      dinners: getDinners(),
      hotelTyps: getHotelType(),
      images: [] as Array<string>,
      currentImage: '',
      showImagePriview: false,
      center: null as any
    })

    data.scrollStyle = useScrollModule().scrollStyle

    const methods = {
      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
        HotelService.GetHotelDetail(data.hotelId)
          .then(r => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              let temp = r.data.data
              temp.isDinner = temp.UseDinnerType && temp.UseDinnerType != ''
              if (temp.isDinner) {
                temp.Dinners = data.dinners.filter((x: DinnerType) => {
                  return temp.UseDinnerType.split(',').indexOf(x.Id.toString()) != -1
                })
              }
              temp.HotelTypeInfo = data.hotelTyps.find((x: HotelType) => x.Id == temp.HotelType)
              let tempService = JSON.parse(temp.FacilityServices)[0] ?? {}
              temp.CheckHotelService = tempService.list.filter((x: any) => tempService.checked.indexOf(x.ID) != -1)
              data.h = temp
              //http://imgfile.oytour.com${h.List[2].Path}
              data.h.List.forEach((x: any) => {
                data.images.push(`http://imgfile.oytour.com${x.Path}`)
              })
              methods.initMap(data.h.Lng, data.h.Lat)
            } 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, moneyFormat }
  }
})
</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;
}
</style>
