<template>
  <div>
    <van-nav-bar class="nav-bar" title="Detail">
      <template #left>
        <van-icon name="arrow-left" color="#fff" @click="back()" />
      </template>
    </van-nav-bar>

    <div style="padding: 16px;">

      <!-- <div style="margin-top: 55px;" class="masonry-wrap">
  <div class="masonry">
    <div v-for="(item, i) in hotelList" :key="i" class="masonry-item">
      <img :src="'http://172.93.218.201:1516' + item.img_url" alt="" loading="lazy">
    </div>
  </div>
</div> -->
      <div class="title" style="margin-top: 5px;">{{ hotelDetail.hotel_name }}</div>
      <van-swipe :autoplay="3000" style="height:200px;">
        <van-swipe-item v-for="(item, index) in bannarsImg" :key="index">
          <img :src="fullUrl1(item)" style="width:100%; height:200px; object-fit:cover;" />
        </van-swipe-item>
      </van-swipe>
      <div style="display: flex;flex-direction: column;">
        <span class="title">{{$t('introduce')}}</span>
        <span class="content">{{ hotelDetail.introduce }}</span>
      </div>
      <div class="title">{{$t('Amenities')}}</div>
      <div style="display: flex; flex-direction: row;justify-content: space-between;">
        <div style="display: flex;flex-direction: row;align-items: center;">
          <img :src="petImg" style="width: 20px;" alt="">
          <span class="content">{{$t('Pets Allowed')}}</span>
        </div>
        <div style="display: flex;flex-direction: row;align-items: center;">
          <img :src="wifiImg" style="width: 20px;" alt="">
          <span class="content">{{ $t('Wireless Internet') }}</span>
        </div>
      </div>
      <div style="display: flex;flex-direction: row;align-items: center;">
        <img :src="renzheng" style="width: 20px;" alt="">
        <span class="content">{{$t('Sustainablity Certification')}}</span>
      </div>

      <div class="title">{{$t('Pet Policy')}}</div>
      <div class="content">{{ $t('we charge') }}</div>

      <div class="title">{{$t('Sustainability Certification')}}</div>
      <div class="content">{{$t('Our hotel has a third-party sustainability certification')}}</div>

      <div class="title">{{$t('Certification GreenSign')}}</div>

      <h2 class="title">{{ $t('Hotel Location') }}</h2>
      <div id="map" style="width: 100%; height: 200px;"></div>

      <div class="content">{{ hotelDetail.address }}</div>

      <div class="title">{{$t('Hotel Reviews')}}</div>
      <div style="border: solid 1px #f6f6f6;padding: 10px; border-radius: 8px;margin-top: 10px;" v-for="item in pl"
        :key="item.id">
        <div style="font-size: 16px;">{{ item.name }}</div>
        <div><van-rate :value="Number(item.fs)" allow-half void-icon="star" void-color="#eee" /></div>
        <div style="color: #6c6c6c;font-size: 14px;margin-top: 8px;">{{ item.content }}</div>
      </div>

    </div>

  </div>

</template>

<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import petImg from '@/assets/pet.png'
import wifiImg from '@/assets/wifi.png'
import renzheng from '@/assets/renzheng.png'
import { jiudianDetail } from '@/api/contract'
import { nowLocationUrl } from '@/utils/tools'

export default {
  name: 'LeafletMap',
  data() {
    return {
      map: null,
      marker: null,
      // hotelList:[],
      bannarsImg: [],
      hotelDetail: {},
      wd: 0,
      jd: 0,
      address: '',
      pl: [],
      petImg: petImg,
      renzheng: renzheng,
      wifiImg: wifiImg
    }
  },
  mounted() {
    const id = this.$route.query.id
    console.log('这个ID是：', id)
    // this.initMap()
    this.getJiuDianDetail(id)
  },
  methods: {
    initMap() {
      // 固定位置坐标（例如成都锦里）
      const location = [this.wd, this.jd]
      // 初始化地图
      this.map = L.map('map').setView(location, 15) // 15 是缩放级别
      // 添加 OpenStreetMap 图层
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: ''
      }).addTo(this.map)

      // this.marker = L.marker(location).addTo(this.map).bindPopup('成都锦里')

      // 添加 Marker
      this.marker = L.marker(location)
        .addTo(this.map)
        .bindPopup(this.address)
        .openPopup()
    },
    back() {
      this.$router.back()
    },

    async getJiuDianDetail(id) {
      const res = await jiudianDetail({ id: id })
      if (res.code == 200) {
        this.hotelDetail = res.data
        this.bannarsImg = res.data.img_url
        this.address = res.data.hotel_name
        this.wd = res.data.wd
        this.jd = res.data.jd
        this.pl = res.data.pl
        this.initMap()
      }
      console.log('酒店详情：', res.data)
    },

    fullUrl1(p) {
      if (!p) return ''
      return nowLocationUrl + p
    },

  },
  created() {

  },

}
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
}

.masonry-wrap {
  padding: 8px;
  /* 外层留白，像截图那样 */
  background: #f3f4f6;
  /* 可选的浅灰背景 */
  border-radius: 12px;
}

/* 关键：多列布局 */
.masonry {
  column-gap: 12px;
  /* 列间距 ≈ 截图中的水平间隙 */
  column-count: 2;
  /* 固定两列；也可做响应式 */
}

/* 让每个卡片在列中独立排布且不被拆分 */
.masonry-item {
  break-inside: avoid;
  /* 避免跨列断开 */
  margin-bottom: 12px;
  /* 垂直间距 */
  border-radius: 12px;
  /* 圆角卡片 */
  overflow: hidden;
  /* 裁剪图片圆角 */
  background: #fff;
  /* 有轻微“卡片感” */
  /* 可选阴影： */
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.masonry-item img {
  display: block;
  width: 100%;
  height: auto;
  /* 让高度随比例变化 */
  object-fit: cover;
  /* 如果想更“紧致”，保留 */
}

.title {
  font-size: 32px;
  margin-top: 40px;
  margin-bottom: 5px;
  /* font-weight: bold; */
}
@media (hover: hover) and (pointer: fine) {
  .title {
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 5px;
    /* font-weight: bold; */
  }
}

.content {
  font-size: 28px;
  line-height: 40px;
  color: #6c6c6c;
  margin-top: 10px;
}
@media (hover: hover) and (pointer: fine) {
  .content {
    font-size: 14px;
    line-height: 20px;
    color: #6c6c6c;
    margin-top: 5px;
  }
}
</style>