<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" @click="setting">设置指令</el-button>
        <el-button>发送指令</el-button>
      </div>
    </div>

    <div style="width: 58%; height: 100%; border: 1px solid;overflow: auto;" class="ml-4" >
      <div style="border-bottom: 1px solid">
        <el-button-group>
          <el-button
              class="square-button"
              :type="type1 ? 'primary' : 'Default'"
              @click="showComponent('real')"
          >设备</el-button>
          <el-button
              class="square-button"
              :type="type2 ? 'primary' : 'Default'"
              @click="showComponent('virtual')"
          >模拟设备</el-button>
        </el-button-group>
      </div>
      <KitDevice v-if="tag" :tag = "tag"></KitDevice>
    </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>

  <el-dialog v-model="cmdVisible">
    <el-form>
      <el-form-item label="设备" :label-width="formLabelWidth">
        <el-select v-model="cmds.device" @change="checkToShowInput">
          <el-option label="option 1" value="option 1" />
        </el-select>
      </el-form-item>
      <el-form-item label="指令名" :label-width="formLabelWidth">
        <el-select v-model="cmds.cmd_name" @change="checkToShowInput">
          <el-option label="option 1" value="option 1" />
        </el-select>
      </el-form-item>
      <el-form-item label="某个字段" :label-width="formLabelWidth" v-if="show">
        <el-input  autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cmdVisible = false">取消</el-button>
        <el-button type="primary" @click="cmdVisible = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, onUnmounted, onUpdated, ref, watchEffect} from 'vue'
import KitDevice from "../../components/kit-device.vue";

const messages = ref([1,2,3,4,5,6,7,8])
const messageContainer = ref(null);
const tag = ref('real')
const socket = ref(null)
const type1 = ref(true)
const type2 = ref(false)
const cmdVisible = ref(false)
const formLabelWidth = '140px'
const cmds = ref(
    {device: '', cmd_name: ''}
)
const show = ref(false)

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

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

onMounted(() => {
  socket.value = new WebSocket('ws://'
      + 'localhost:8000'
      + '/ws/chat/mqtt/')

  socket.value.onmessage = (e) => {
    messages.value.push(e.data)
  }

  scrollToBottom();
})

const showComponent = (str) => {
  if (str === 'real'){
    type1.value = true
    type2.value = false
  }else if (str === 'virtual'){
    type1.value = false
    type2.value = true
  }
  tag.value = str
}

const checkToShowInput = () => {
  show.value = cmds.value.device && cmds.value.cmd_name
}

const setting = () => {
  cmdVisible.value = true
  // cmds.value.device = ''
  // cmds.value.cmd_name = ''
  for (const key in cmds.value){
    cmds.value[key] = ''
  }
  show.value = false
}
</script>

<style>
.square-button {
  border-radius: 0;
}

</style>