<template>
  <div>
    <div class="box">
      <el-card class="mt30">
        <el-row class="hotel" align="middle" :gutter="20">
<!--          <el-col :span="6">-->
<!--            <img class="w100" :src="fillImgUrl(form.photos?.split(',')[0])"/>-->
<!--          </el-col>-->
          <el-col :span="16">
            <h3 class="esp">{{form.name}}</h3>
            <div class="starBox">
              <img  v-for="i in Number(form.starLevel||0)" src="@/assets/booking/star.png">
            </div>
            <div class="tagbox">
              <span v-for="(t,index) in form.label?.split('，')" v-show="index<4">{{t}}</span>
              <a v-show="form.label?.split('，').length>4">{{ language==0?'更多':'MORE' }} ></a>
            </div>
            <div>
              <el-icon></el-icon>
              <span class="mr10">{{ language==0?'入住时间':'Check-in' }}：{{form.checkInTime}}</span>
              <span>{{ language==0?'离店时间':'Check-out' }}：{{form.checkOutTime}}</span>
            </div>
            <div v-if="form.introduction" class="flex esp">
              <el-icon></el-icon>
              {{ language==0?'酒店简介':'Introduction' }}：<span v-html="form.introduction.toString()"></span>
            </div>
            <p class="esp addr">
              <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>
              {{form.address}}
            </p>
          </el-col>
          <el-col :span="8" class="text-right">
            <div class="mapBox">
              <div id="map"></div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <div class="mt30">
        <div v-for="p in form.photos?.split(',')">
          <img :src="fillImgUrl(p)">
        </div>
      </div>

      <el-card class="mt30 mb60">
        <div class="lineHead">
          <ul><li>{{language==0?'房型选择':'Room Type'}}</li></ul>
        </div>

        <div>
          <div v-for="(r,index) in roomList" :key="index" class="room">
            <el-row>
              <el-col :span="6">
                <div class="roomImg">
                  <img :src="fillImgUrl(r.photos?.split(',')[0])">
                </div>
              </el-col>
              <el-col :span="14">
              </el-col>
              <el-col :span="4">
              </el-col>
            </el-row>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {ref, reactive, onMounted} from "vue";
import {useRoute} from "vue-router";
import { getHotelById,getHotelRooms } from "@/apiPc/booking"
import {useStorage} from "@vueuse/core/index";
const language= useStorage('language',0)
const router = useRouter()
const route = useRoute()
const form = ref({})
const roomList = ref([])
const map = ref(null)
onMounted(()=>{
  getData()
})
function getData() {
  getHotelById(route.params.hotelId).then(res => {
    form.value = res.data
    initMap()
  }).catch(err => {
    console.log(err)
  })
  getHotelRooms(route.params.hotelId).then(res => {
    roomList.value = res.rows
  })
}
function initMap() {
  const TMap = (window as any).TMap
  var center = new TMap.LatLng(form.value.latitude, form.value.longitude);//设置中心点坐标'
  var map = new TMap.Map("map", {
    center: center,//设置地图中心点坐标
    zoom: 17,   //设置地图缩放级别
  });
  var infoWindowLocation = new TMap.LatLng(form.value.latitude, form.value.longitude);//创建一个坐标
  //创建InfoWindow实例，并进行初始化
  var infowindow = new TMap.InfoWindow({
    content: form.value.name, //信息窗口内容
    position:infoWindowLocation,//显示信息窗口的坐标
    map:map,
    offset: { x: 0, y: -32 }
  });
  infowindow.close();
  var marker = new TMap.MultiMarker({
    map: map,
    //样式定义
    styles: {
      "myStyle": new TMap.MarkerStyle({
        "anchor": { x: 16, y: 32 }
      })
    },
    //点标记数据数组
    geometries: [{
      "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
      // "styleId": 'myStyle',  //指定样式id
      "position": new TMap.LatLng(form.value.latitude, form.value.longitude),  //点标记坐标位置
      "properties": {//自定义属性
        "title": form.value.name
      }
    }
    ]
  })
  marker.on("click", function (evt) {
    //设置infoWindow
    infowindow.open(); //打开信息窗
    infowindow.setPosition(evt.geometry.position);//设置信息窗位置
  })
}
</script>

<style scoped lang="scss">
.room{background: #FAFBFD;
  border: 1px solid #E5E5E5;}
.hotel{
h3{margin: 0 0 20px;}
img.w100{object-fit: cover;aspect-ratio: 16/9}
.addr{font-size: 16px;color: #929AA0;font-weight: 400;}
.price{margin: 0 0 25px;
  color: #FF8124;font-size: 18px;
span{font-size: 24px;margin: 0 8px;font-family: 'DINAlternate-Bold';font-weight: 600;}
i{font-style: normal;color: #929AA0;}
}
}
.starBox{
  img{display: inline-block;margin-right: 4px}
}
.tagbox{margin: 15px 0;
  a{color: #AFB5B9;font-size: 12px;}
  span{border-radius: 13px;font-size: 12px;padding: 4px 10px;margin-right:10px;font-weight: 400;}
  span:nth-child(4n){background: rgba(50, 177, 108, 0.2);color: rgba(50, 177, 108, 1);}
  span:nth-child(4n+1){background:rgba(243, 152, 0, 0.2);color: rgba(243, 152, 0, 1);}
  span:nth-child(4n+2){background: rgba(0, 160, 233, 0.2);color: rgba(0, 160, 233, 1);}
  span:nth-child(4n+3){background: rgba(247, 64, 166, 0.2);color:rgba(247, 64, 166, 1);}
}
.mapBox{ position: relative;overflow: hidden;height: 200px;
  #map{ position: relative;left: -70px;
    width: calc(100% + 160px);
  }
}
</style>