<template>
  <div class="button-container">
    <el-button  @click="isShow = true">新增协议</el-button>
    <!-- <div>
      <el-button>导出数据库</el-button>
    </div> -->
  </div>

  <!-- 折叠面板 -->
  <kit-collapse
    class="mt-4"
    v-if="protocolStore.deviceProtocol !== undefined && protocolStore.protocolCmd !== undefined"
    :device-protocol="protocolStore.deviceProtocol!"
    :protocol-cmd="protocolStore.protocolCmd!" />

  <el-dialog title="新增协议" v-model="isShow">
    <el-form>
      <el-form-item label="协议名称" :label-width="formLabelWidth">
        <el-input v-model="protocolName" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="addProtocol">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import KitCollapse from '@/components/protocol/KitCollapse.vue';
import { useProtocolInfoStore } from '@/stores/protocolInfo';
import { useProtocolVersionStore } from '@/stores/allProtocolVersion';

const isShow = ref<boolean>(false)
const formLabelWidth = '140px'
const protocolStore = useProtocolInfoStore()

const protocolName = ref<string>('')
const store = useProtocolVersionStore()
const addProtocol = () => {
  isShow.value = false
  
  protocolStore.deviceProtocol!.fields.push(protocolName.value)
  protocolStore.deviceProtocol![protocolName.value] = []
  store.currentVersions.push({protocol_name: protocolName.value, version: "init"})
  store.protocolVersions.push({protocol_name: protocolName.value, version_paths: JSON.stringify([{version: "init"}])
})
}
</script>

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

