<template>
  <div class="box">
    <!-- 遮罩层区域 -->
    <div class="mask" @click="handleClose"></div>
    <!-- 弹窗内容区域 -->
    <div class="detail">
      <!-- 民宿名称区域 -->
      <div class="name">{{ detailObj.hname }}</div>

      <!-- 民宿信息区域 -->
      <div class="info">
        <img :src="detailObj.cover_img" />

        <div class="info_detail">
          <div class="detail_top">
            <div class="top_address" :title="detailObj.hposition">
              位置：{{ detailObj.hposition }}
            </div>
            <div>联系电话：{{ detailObj.corpn_phone }}</div>
          </div>
          <div class="detail_bottom">
            <div class="bottom_box">床位数：{{ detailObj.house }}</div>
            <div class="bottom_box">联系人：{{ detailObj.corpn_name }}</div>
            <div class="bottom_box">
              星级：
              <span v-if="detailObj.type == 2">金宿级</span>
              <span v-if="detailObj.type == 1">银宿级</span>
              <span v-if="detailObj.type == 3">白金级</span>
              <span v-if="!detailObj.type">暂无数据</span>
            </div>
            <div>
              营业状态：{{ detailObj.hstatus == 1 ? "营业中" : "休息" }}
            </div>
          </div>
        </div>
      </div>

      <!-- VR链接区域 -->
      <div class="link" v-if="detailObj.link_pro_url">
        VR链接：
        <div class="link_icon">
          <el-link :href="detailObj.link_pro_url" target="_blank">
            <el-icon size="38" color="#7DC0FF"><Link /></el-icon>
          </el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Link } from "@element-plus/icons-vue";

defineProps(["detailObj"]);
const $emit = defineEmits(["closeDialog"]);

// 点击关闭按钮回调
const handleClose = () => {
  $emit("closeDialog", false);
};
</script>

<style lang="scss" scoped>
.box {
  z-index: 9999;
  position: absolute;
  top: -151px;
  left: 0;
  width: 7072px;
  height: 1872px;
  background-color: rgba($color: #000000, $alpha: 0.4);

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 7072px;
    height: 1872px;
  }

  .detail {
    position: absolute;
    top: 642px;
    left: 3110px;
    width: 1024px;
    height: 737px;
    background-image: url(@/assets/images/54.png);
    background-size: 100% 100%;

    .name {
      margin-top: 16px;
      margin-left: 339px;
      padding: 0 10px;
      width: 357px;
      height: 66px;
      line-height: 66px;
      text-align: center;
      color: #8ec6fa;
      font-size: 24px;
      font-weight: bold;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .info {
      position: relative;
      margin-top: 38px;
      margin-left: 62px;
      width: 859px;
      height: 485px;
      border-radius: 10px;
      overflow: hidden;

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

      .info_detail {
        position: absolute;
        bottom: 0;
        padding: 0 28px;
        width: 859px;
        height: 117px;
        font-size: 20px;
        background-color: rgba(0, 0, 0, 0.4);

        .detail_top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 58px;

          .top_address {
            width: 540px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

        .detail_bottom {
          display: flex;
          align-items: center;
          height: 58px;

          .bottom_box {
            display: flex;
            align-items: center;
            margin-right: 48px;
          }
        }
      }
    }

    .link {
      display: flex;
      align-items: center;
      margin-left: 90px;
      margin-top: 32px;
      font-size: 27px;

      .link_icon {
        transform: rotateY(180deg);
      }
    }
  }
}

::v-deep(.el-rate .el-rate__icon.is-active) {
  margin: 0;
  color: #7dc0ff;
  font-size: 30px;
}
</style>
