<template>
  <div>
    <div class="box">
      <el-card>
        <el-row>
          <div class="zh-title">{{ form.name }}</div>
          <div class="tagbox esp">
            <span v-for="(t,index) in form.label?.split('，')" v-show="index<4">{{t}}</span>
          </div>
        </el-row>
        <el-row class="hz-row">
          <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
            <OfficeBuilding/>
          </el-icon>
          {{ language==0?'成立':'Established for'}} <span class="sign">6</span>{{language==0?'年':'years'}} &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
          <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
            <UserFilled/>
          </el-icon>
         <span class="sign"> {{ form.dresserLimit }}</span>{{language==0?'名化妆师':'makeup artists' }}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
          <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
            <PhoneFilled/>
          </el-icon>
          <span style="padding-top: 2px">
            {{ form.contact }}
          </span>
           &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
          <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
            <LocationFilled/>
          </el-icon>
         {{form.rearks}}
        </el-row>
      </el-card>
      <br>
<!--      <el-row justify='space-between'>-->
<!--        <div class="img-header" style="width: 40%">-->
<!--          <div class="card">-->
<!--            <el-image style="width: 100%" :src="fillImgUrl(form.photos)?.split(',')[0]" fit="none" :preview-src-list="form?.photos?.split(',')"/>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="img-header" style="width: 20%">-->
<!--          <el-row style="height: 50%;">-->
<!--            <el-col :span="12">-->
<!--              <div class="card">-->
<!--                <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
<!--              </div>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--              <div class="card">-->
<!--                <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
<!--              </div>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <div style="height: 50%;">-->
<!--            <div class="card">-->
<!--              <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
<!--            </div>-->
<!--          </div>-->

<!--        </div>-->
<!--        <div class="img-header" style="width: 20%">-->
<!--          <div class="card">-->
<!--            <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="img-header" style="width: 20%">-->
<!--          <el-row  style="height: 50%">-->
<!--            <el-col :lg="12" :md="8" :sm="12" :xs="24" >-->
<!--              <div class="card">-->
<!--                <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
<!--              </div>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--              <div class="card">-->
<!--                <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
<!--              </div>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <div style="height: 50%;">-->
<!--            <div class="card">-->
<!--              <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
<!--&lt;!&ndash;              <div class="img-hover">&ndash;&gt;-->
<!--&lt;!&ndash;                查看相册 (12) >&ndash;&gt;-->
<!--&lt;!&ndash;              </div>&ndash;&gt;-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-row>-->

      <div class="mt30">
        <el-row :gutter="20">
          <el-col :span="10">
            <div class="imgbox hotelImg">
              <el-image :src="form?.photosList?.[0]" fit="cover" :preview-src-list="form?.photosList"/>
            </div>
          </el-col>
          <el-col :span="14">
            <el-row class="h100" :gutter="20">
              <el-col :span="8" class="oddmb" v-for="(p,index) in form?.photosList?.slice(1,7)">
                <div class="imgbox hotelImg"><el-image :src="p" fit="cover"/></div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <br>
      <el-card :body-style="{'padding':'20px 20px'}">
        <MakeUpCalendar></MakeUpCalendar>
      </el-card>


    </div>
  </div>
</template>

<script setup >
import {useRouter} from "vue-router";
import {ref, reactive, onMounted} from "vue";
import {useRoute} from "vue-router";
import {getHotelById, getHotelRooms} from "@/apiPc/booking"
import * as booking from "@/apiPc/booking"
import {useStorage} from "@vueuse/core/index";
import useUserStore from "@/store/modules/user";
import MakeUpCalendar  from "@/viewsPc/booking/component/makeUpCalendar.vue";
import {fillImgUrl} from "/@/utils/ruoyi";
const user = useUserStore().user
const language = useStorage('language', 0)
const router = useRouter()
const route = useRoute()
const form = ref({})
const query = ref({
  activityId: route.params.cptId,
  studioId:route.params.id
})
const loading = ref(false)
const roomList = ref([])
const map = ref(null)
onMounted(() => {
  getData()
})

function getData() {
  loading.value = true
  booking.makeUpDetail(query.value).then(res => {
    loading.value = false
    form.value = res.data
    form.value.photosList=[]
    form.value.photos?.split(',')?.forEach(v=>{
      form.value.photosList.push(fillImgUrl(v))
    })
    console.log(form.value)
    // console.log(res)
  }).catch(err => {
    console.log(err)
  })
  // query.value.hotelId = route.query.id
  // getHotelRooms(query.value).then(res => {
  //   roomList.value = res.rows
  // })
}

// function initMap() {
//   const TMap = null
//   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.address, //信息窗口内容
//     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);//设置信息窗位置
//   })
// }

// function goOrder(room) {
//   if (!user) {
//     useUserStore().setReLogin()
//     return
//   }
//   router.push({
//     name: 'hotelOrder',
//     params: {
//       roomId: room.id
//     },
//     query: {
//       room: encodeURIComponent(JSON.stringify(room)),
//       hotelName: form.value.name,
//       checkInTime: form.value.checkInTime
//     }
//   })
// }
</script>

<style scoped lang="scss">
.room {
  background: #FAFBFD;
  margin: 20px 0 0;
  padding: 20px;
  border: 1px solid #E5E5E5;

  .name {
    font-size: 20px;
    margin: 0 0 10px;
  }

  .roomImg {
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;

    img {
      width: 100%;
      object-fit: cover;
      object-position: center;
      height: 100%;
    }
  }

  .price {
    color: #FF8124;
    font-size: 24px;

    span {
      font-size: 36px;
      font-family: "DIN Alternate"
    }
  }

  .bg-lineg {
    margin: auto;
    border-radius: 10px;
    text-align: center;
    padding: 7px 2px 2px;
    font-size: 24px;
    width: 66px;
    cursor: pointer;

    div {
      background: #fff;
      font-size: 13px;
      border-radius: 20px;
      padding: 0 10px;
      color: #453DEA;
      font-weight: 500;
    }
  }
}

.zh-title {
  font-size: 24px;
  font-weight: 500;
  margin-right: 25px;
}


.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;
    }
  }
}


.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);
  }
}

.sign {
  padding-top: 2px;
}

.img-header {
  height: 270px;
}

.card {
  padding: 10px;
  width: 100%;
  height: 100%;
  position: relative;
  img{object-fit: cover}
}

.img-hover{
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0,.5);
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  width: 100%;
  height: 100%;
  line-height: 115px;
  text-align: center;
  border-radius: 10px;

  //display: none;
}

.hotelImg{border-radius: 10px;overflow: hidden;aspect-ratio: 16/9;
  img{object-fit: cover;object-position: center;width: 100%;height: 100%;
  }
}
.oddmb:nth-child(2){margin-bottom: 20px;}
</style>