<template>
  <div class="flex items-center w-1/2">
      <div style="width: 10%" >订阅主题</div>
      <el-input style="width: 30%" class="ml-4"></el-input>
      <el-button style="width: 15%" class="ml-4">连接mqtt</el-button>
  </div>

  <div class="flex mt-4" style="height: 80%;">
    <div style="width: 40%; height: 100%">
      <div style="height: 90%; border: 1px solid">

      </div>
      <div class="flex mt-4">
        <el-input></el-input>
        <el-button class="ml-4">设置指令</el-button>
        <el-button>发送指令</el-button>
      </div>
    </div>

    <div style="width: 58%; height: 100%; border: 1px solid" class="ml-4">

    </div>
  </div>

  <div class="flex mt-4 items-center" style="height: 10%">
    <div style="width: 90%; height: 100%;border: 1px solid;overflow: auto;" ref="messageContainer">
      <span v-for="message in messages">
        {{ message }}
        <br />
      </span>
    </div>
    <el-button class="ml-4" size="large">导出</el-button>
  </div>


</template>

<script setup>
import {ref, watchEffect} from 'vue'

const messages = ref([1,2,3,4,5,6,7,8])
const messageContainer = ref(null);

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

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

<style>

</style>