<template>
  <div class="button-container">
    <el-button class="left-button" @click="addProtocol = true">新增协议</el-button>
    <div class="right-buttons">
      <el-button>导入</el-button>
      <el-button>导出所有协议</el-button>
    </div>
  </div>

  <kit-collapse class="mt-4"></kit-collapse>

  <el-dialog title="新增协议" v-model="addProtocol">
    <el-form >
      <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="addProtocol = false">取消</el-button>
        <el-button type="primary" @click="addProtocol = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref} from 'vue';
import KitCollapse from "../../components/kit-collapse.vue";

const addProtocol = ref(false)
const formLabelWidth = '140px'

</script>

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

.left-button {
  margin-right: auto; /* 将按钮1靠左 */
}

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

