<script setup>
import {ref} from "vue"
import {sendByteInterface} from "@/api/byte.js";
import {useRolesStore} from "@/stores/modules/roles.js";
import {ElMessage} from "element-plus";

const rolesStore = useRolesStore()

const form = ref({
  id: '',
  context: ''
})

const rules = {
  id: [
    {required: true, message: '封包id不能为空', trigger: 'blur'},
  ],
  context: [
    {required: true, message: '载荷数据不能为空', trigger: 'blur'},
  ]
}
const byteForm = ref(null)
const sendByte = async () => {
  await byteForm.value.validate()
  if (rolesStore.currentRole) {
    const res = await sendByteInterface(
        rolesStore.currentRole,
        form.value.id,
        form.value.context,
    )
  } else {
    ElMessage({
      message: '请先选择一个角色',
      type: 'warning',
    })
  }

}
</script>

<template>
  <div class="byte-page">
    <el-form
        :model="form"
        :rules="rules"
        ref="byteForm"
    >
      <el-form-item label="封包id" prop="id">
        <el-input
            v-model="form.id"
        ></el-input>
      </el-form-item>
      <el-form-item label="载荷数据" prop="context">
        <el-input
            type="textarea"
            :rows="5"
            v-model="form.context"
        ></el-input>
      </el-form-item>
      <el-form-item class="center-content">
        <el-button type="primary" @click="sendByte">发送</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<style scoped>

.el-form {
  max-width: 600px;
}

.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>
