<template>


  <headerBar
    title="初始设备调频设置"
  />

  <el-row class="mar-top-10" >
    <el-col :span="2"></el-col>
    <el-col :span="20">

      <el-input type="textarea"
      v-model="command"
                :rows="5"
      />
    </el-col>
    <el-col :span="2"></el-col>
  </el-row>

    <el-row align="middle" justify="middle" class="mar-top-10">
      <el-col :span="24">
        <el-button type="primary" @click="send_command" v-log="{ describe: { action: '点击RS485发送命令' } }">发送</el-button>
      </el-col>
    </el-row>


  <el-row align="middle" justify="middle" class="mar-top-10">
    <el-col :span="2"></el-col>
      <el-col :span="20">


        <el-input type="textarea"
                  v-model="command1"
                  :rows="5"
                  disabled
        />
      </el-col>
    <el-col :span="2"></el-col>
    </el-row>

</template>

<script setup lang="ts">

import {ref,reactive,onMounted} from "vue";

import client from "@/stores/modules/client";
import  icpList from '@/utils/ipc'
import socket from "@/stores/modules/socket";
import {ElMessage} from "element-plus";
const clientStore = client();
const socketStore = socket()


const command = ref('0x01 0x42 0x6C 0x6b'); // 当前编辑行的数据
const command1 = ref(''); // 当前编辑行的数据



//设置 移动 调整
async function send_command() {

  socketStore.sendMessage({
    type: 'send_command',
    data:{
      command:command.value
    }
  })


  clientStore.ipc.on(icpList.socket.message+'_send_command', (event, result) => {
    console.log('_send_command')
    console.log(result)
    if(result.code === 0){
      if(result.data.type === 'input')  command.value = result.data.command
      if(result.data.type === 'output'){
        command1.value = result.data.command
        clientStore.ipc.removeAllListeners(icpList.socket.message+'_send_command');
      }

    }
  });



}



</script>

<style scoped lang="scss">
.bottom-wrap {
  position: fixed;
  bottom:0px;
  left: 0;
  right: 0;
  padding: 10px 0;
  background: #fff;
}
.page {
  padding-bottom: 60px;
}
.el-col {
    position: relative;
  ::v-deep {
    .error-msg{
      display: none;
      position: absolute;
      top: 41px;
      top: 28px;
      left: 8px;
      z-index: 22;
      color: #dc2626;
      font-size: 12px;
    }
    &:hover{
      .error-msg{
        display: block;
      }
    }
  }
}
</style>
