<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">{{form.ageLimit}}</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.remarks}}
        </el-row>

        <div style="display: flex">
          <div style="min-width: 130px" class="title forPc">{{language==0?'工作室简介:':'Studio profile:'}}</div>
          <div v-html="form.introduction"></div>
        </div>
      </el-card>

      <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/>
      </el-card>

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

<script setup >
import {useRouter} from "vue-router";
import {ref, reactive, onMounted} from "vue";
import {useRoute} from "vue-router";
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,
  id:route.params.id
})
const loading = ref(false)
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(res)
  }).catch(err => {
    console.log(err)
  })
}

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

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

.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;}
.title{
  width: 130px;
  font-weight: 500;
  font-size: 18px;
}
</style>