<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: {},
  setup(props, context) {
    const { t } = useI18n();
    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;
      },
      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;
              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>
