<template>
  <div class="demo-collapse">
    <div class="container">
      <div class="left">
        <div class="mr-4">协议版本</div>
        <el-select>
          <el-option :value="option"></el-option>
        </el-select>
      </div>
      <div class="right">
        <el-button @click="addCmd = true">新增指令</el-button>
        <el-button>导出协议</el-button>
      </div>
    </div>

    <div class="mb-4 mt-4">协议规范</div>

    <el-collapse class="mt-4">
      <el-collapse-item  v-for="cmd in parentMsg" :title="cmd.cmd_name+' '+cmd.cmd_explain+' '+cmd.cmd_type">
        <protpcol-table v-if="protocolCmd" :info="cmd.cmd_name" :message="protocolCmd" :type="cmd.cmd_type"></protpcol-table>
      </el-collapse-item>
    </el-collapse>

    <el-dialog v-model="addCmd" title="新增指令">
      <el-form >
        <el-form-item label="协议名称" :label-width="formLabelWidth">
          <el-input  autocomplete="off" />
        </el-form-item>
        <el-form-item label="指令名称" :label-width="formLabelWidth">
          <el-input  autocomplete="off" />
        </el-form-item>
        <el-form-item label="指令类型" :label-width="formLabelWidth">
          <el-select>
            <el-option label="TX"></el-option>
            <el-option label="RX"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="协议类型" :label-width="formLabelWidth">
          <el-select>
            <el-option label="ASCII"></el-option>
            <el-option label="HEX"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="定时发送" :label-width="formLabelWidth">
          <el-input  autocomplete="off" />
        </el-form-item>
        <el-form-item label="说明" :label-width="formLabelWidth">
          <el-input  autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="addCmd = false">取消</el-button>
        <el-button type="primary" @click="open">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, toRefs} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import ProtpcolTable from "./protpcol-table.vue";

const addCmd = ref(false)
const option = ref('option')
const formLabelWidth = '140px'
const props = defineProps({
  name: String,
  info: Object,
  protocolcmd: Object
})
const item = ref()
item.value = toRefs(props).name.value
const parentMsg = ref()
parentMsg.value = toRefs(props).info.value[item.value]
const protocolCmd = ref()
protocolCmd.value = toRefs(props).protocolcmd.value

const open = () => {
  ElMessageBox.confirm(
      '是否确认增加？',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        ElMessage({
          type: 'success',
          message: '增加成功',
        })
        addCmd.value = false
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消',
        })
      })
}
</script>

<style>
.container {
  display: flex;
  justify-content: space-between; /* 使内部元素平均分布 */
  align-items: center; /* 垂直居中 */
  margin: auto;
}

.left {
  align-items: center;
  display: flex;

}

.right {
  display: flex;
  align-items: center; /* 垂直居中 */
}

</style>
