<template>
  <view class="message-board">
    <scroll-view class="message-board-scroll" scroll-y :scroll-top="scrollTop">
      <view v-for="msg in messages" :key="msg.id" class="message-bubble">
        <text class="msg-user">{{ msg.user }}：</text>
        <text class="msg-content">{{ msg.content }}</text>
      </view>
      <view v-if="messages.length === 0" class="empty-tip">
        <text>暂无留言,快来抢沙发吧~</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, watch, nextTick } from "vue";

const props = defineProps({
  messages: {
    type: Array,
    default: () => [],
  },
});

const scrollTop = ref(0);

// 监听消息变化,自动滚动到底部
watch(
  () => props.messages.length,
  async () => {
    await nextTick();
    scrollTop.value = 99999;
  },
);
</script>

<style scoped>
.message-board {
  width: 100%;
  position: fixed;
  bottom: 128rpx;
  padding: 0 34rpx; /* 对应 Figma 中 left: 17px */
}

.message-board-scroll {
  height: 352rpx;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 气泡左对齐,宽度适应内容 */
  gap: 6rpx; /* 对应 Figma 中 3px 间距,rpx 自动换算 */
}

/* 留言气泡:对应 Figma 留言板 的圆角矩形 */
.message-bubble {
  /* display: inline-flex; */
  align-items: baseline;
  flex-wrap: wrap;
  max-width: max-content;
  padding: 6rpx 16rpx; /* 适当内边距,让文字与气泡边距舒适 */
  background: rgba(42, 17, 17, 0.3);
  border-radius: 16rpx; /* 8px = 16rpx */
  /* Figma 中的微妙旋转与倾斜,营造手写/手帐感 */
  transform: rotate(-0.44deg) skewX(-0.1deg);
  animation: bubbleFadeIn 0.3s ease-out;
  box-sizing: border-box;
}

.msg-user {
  font-size: 24rpx; /* 12px = 24rpx */
  color: #acf0c3;
  font-weight: bold;
  text-shadow: -1rpx 1rpx 4rpx rgba(206, 9, 9, 0.45);
  font-family: "Abhaya Libre ExtraBold", sans-serif;
  line-height: 1.5;
}

.msg-content {
  font-size: 24rpx; /* 12px = 24rpx */
  color: #ffffff;
  font-weight: bold;
  text-shadow: -1rpx 1rpx 4rpx rgba(206, 9, 9, 0.45);
  font-family: "Abhaya Libre ExtraBold", sans-serif;
  line-height: 1.5;
  word-break: break-all;
}

.empty-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200rpx;
  width: 100%;
  color: rgba(255, 255, 255, 0.5);
  font-size: 24rpx;
}

@keyframes bubbleFadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx) rotate(-0.44deg) skewX(-0.1deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(-0.44deg) skewX(-0.1deg);
  }
}
</style>
