<template>
  <view 
    :id="'cabin-' + cabin.key"
    class="cabin-wrapper" 
    :class="{ 
      'cabin-nickname-mine': cabin.isMine || cabin.nickname === currentUserNickname, 
      'cabin-slots-zero': cabin.sharedBoothSlotsRemaining === 0 
    }"
    :style="{ left: cabin.x + 'px', top: cabin.y + 'px', width: cabin.w + 'px' }"
    @click="handleClick"
  >
    <image 
      class="cabin-icon" 
      :src="cabin.src" 
      :style="{ width: cabin.w + 'px', height: cabin.h + 'px' }"
      mode="aspectFit"
    />

    <text v-if="cabin.showNickname && cabin.nickname" class="cabin-nickname">
      {{ cabin.nickname === currentUserNickname ? '我的小屋' : cabin.nickname }}
    </text>
    <text v-else class="cabin-nickname cabin-nickname--empty">小屋暂无人居住</text>

    <view v-if="cabin.showDialog" class="cabin-slots-dialog">
      <text class="cabin-slots-text text-white">
        剩余 <text class="text-orange">{{ cabin.sharedBoothSlotsRemaining }}</text> 个展位
      </text>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  cabin: {
    type: Object,
    required: true
  },
  currentUserNickname: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['click'])

const handleClick = () => {
  emit('click', props.cabin)
}
</script>

<style scoped>
.cabin-wrapper {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
}

.cabin-icon {
  display: block;
}

.cabin-slots-zero .cabin-icon {
  filter: grayscale(100%);
  opacity: 0.6;
}

.cabin-nickname {
  font-size: 20rpx;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.6);
  margin-top: 4rpx;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cabin-nickname--empty {
  color: rgba(255, 255, 255, 0.75);
  font-style: italic;
}

.cabin-slots-dialog {
  position: absolute;
  top: -50rpx;
  left: 50%;
  transform: translateX(-50%);
  background-image: url('/static/icon/tips-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 8rpx 24rpx 18rpx;
  width: max-content;
  z-index: 10;
}

.cabin-slots-text {
  font-size: 18rpx;
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
}

.text-white {
  color: #ffffff;
}

.text-orange {
  color: #FFB800;
  font-family: 'ZaoZiGongFangJianHei-1', sans-serif;
  text-shadow:
    0 0 10rpx rgba(255, 184, 0, 0.8),
    0 2rpx 4rpx rgba(0, 0, 0, 0.5);
}
</style>
