<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="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) {
                if (data.dinners && data.dinners.length > 0) {
                  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] ?? {};
              if (tempService && tempService.list && tempService.list.length > 0) {
                temp.CheckHotelService = tempService.list.filter(
                  (x: any) => tempService.checked.indexOf(x.ID) != -1
                );
              }

              data.h = temp;
              if (data.h && data.h.List && data.h.List.length > 0) {
                data.h.List.forEach((x: any) => {
                  data.images.push(`http://imgfile.oytour.com${x.Path}`);
                });
              }
              if (data.h && data.h.Lng && data.h.Lat) {
                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>
