<template>
  <div class="demo-collapse">
    <el-collapse>
      <el-collapse-item v-for="item in protocols" >
        <template #title>{{item}}</template>
        <div style="margin: auto; width: 90%">
          <collapse-table
              v-if="protocolcmd"
              class="mt-4"
              :info="parentMsg"
              :name="item"
              :protocolcmd="protocolcmd"
          >
          </collapse-table>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script  setup>
import {ref, onMounted } from 'vue'
import CollapseTable from "./collapse-table.vue";
import {DeviceProtocol,ProtocolCmd} from "../dao/device";

const protocols = ref()
const parentMsg = ref()
const protocolcmd = ref()

async function getDeviceProtocol(){
  let data = await DeviceProtocol()
  protocols.value = data.fields
  parentMsg.value = data
}

async function getProtocolCmd(){
  let cmds = await ProtocolCmd()
  protocolcmd.value = cmds
}
onMounted(async () => {
  await getDeviceProtocol()
  await getProtocolCmd()
})
</script>

<style>
.el-collapse-item__header {
  padding-left: 40px; /* 调整合适的左边距值 */
}
</style>
