<template>
  <div class="chat-box">
    <div class="message" ref="messageContainer">
      <div v-for="(message, index) in messages" :key="index">
        {{ message }}
        <br /> <!-- 换行 -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { toRefs, defineProps, ref, watchEffect  } from 'vue'
const props = defineProps({
  //子组件接收父组件传递过来的值
  messages: String,
})
//使用父组件传递过来的值
console.log(props)
const {messages} =toRefs(props)

const messageContainer = ref(null);

function scrollToBottom() {
  if (messageContainer.value) {
    messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
  }
}

watchEffect(() => {
  // 在 messages 更新后滚动到底部
  scrollToBottom();
});

</script>

<style scoped>
.chat-box {
  width: 300px;
  height: 400px;
  border: 1px solid #ccc;
  overflow-y: auto;
}

.message {
  padding: 8px;
  margin: 4px;
  border-radius: 4px;
  background-color: #f0f0f0;
}
</style>
