<template>
  <div class="charge-table">
    <div class="charge-table-bottom">
      <control-box
        title="旋转轴"
        img="c1"
        :speed="plcResultDTO.rAxis"
        :position="plcResultDTO.rDpmt"
        unit="m/s"
      ></control-box>
      <control-box
        title="伸缩轴"
        img="c2"
        :speed="plcResultDTO.yAxis"
        :position="plcResultDTO.yDpmt"
        unit="m/s"
      ></control-box>
      <control-box
        title="行走轴"
        img="c3"
        :speed="plcResultDTO.xAxis"
        :position="plcResultDTO.xDpmt"
        unit="m/s"
      ></control-box>
      <control-box
        title="举升轴"
        img="c4"
        :speed="plcResultDTO.zAxis"
        :position="plcResultDTO.zDpmt"
        unit="m/s"
      ></control-box>
    </div>
    <!--设置弹窗-->
    <!-- <div class="rolemanage chargeshow">
      <el-dialog
        :title="`设置${dialogtext.title}-${dialogtext.unit}`"
        :visible.sync="dialogConfigVisible"
        :destroy-on-close="true"
      >
        <div class="setConfig">
          <span>指令：</span>
          <el-input v-model="input" placeholder="请输入指令"></el-input>
          <el-button type="primary" class="set" @click="handleset"
            >执行</el-button
          >
        </div>
      </el-dialog>
    </div> -->
    <!--设置弹窗结束-->
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import ControlBox from './components/ControlBox'
export default {
  name: "Control",
  components:{
    ControlBox
  },
  data() {
    return {
      ws: null,
      dialogConfigVisible: false,
      input: "",
      plcResultDTO:{
        xAxis:'— — —',
        yAxis:'— — —',
        zAxis:'— — —',
        rAxis:'— — —',
        xDpmt:'— — —',
        yDpmt:'— — —',
        zDpmt:'— — —',
        rDpmt:'— — —',
      },
      dialogtext: {}
    };
  },
  mounted() {
    if (getToken()) {
      if (this.ws) {
        this.ws.close();
      }
      this.websocketConnect();
      // 检测websocket断开重连
      this.detectWebsocketConnection();
    }
  },
  destroyed() {
    this.websocketOnClose();
  },
  methods: {
    // handleset(obj) {
    //   this.dialogtext=obj
    //   this.dialogConfigVisible = true;
    // },
    websocketOnOpen() {
      console.log("socket连接成功");
      const wsMessage={
        type: 'page',
        payload: 'control'
      }
      this.ws.send(JSON.stringify(wsMessage))
    },
    websocketOnMessage(m) {
      const d = JSON.parse(m.data)
      // console.log(d.plcResultDTO)
      if(d.plcResultDTO){
        this.plcResultDTO=d.plcResultDTO
      }
      
    },
    websocketOnError(e) {
      console.log("socket错误", e);
    },
    websocketOnClose(e) {
      console.log("socket断开", e);
    },
    detectWebsocketConnection() {
      this.wsTimer = setInterval(() => {
        if (this.ws.readyState != 1) {
          this.ws.close();
          this.websocketConnect();
        }
      }, 3000);
    },
    websocketConnect() {
      const wstoken = getToken();
      this.ws = new WebSocket(
        process.env.VUE_APP_WS + "/" + wstoken
      );
      this.ws.onopen = this.websocketOnOpen;
      this.ws.onerror = this.websocketOnError;
      this.ws.onmessage = this.websocketOnMessage;
      this.ws.onclose = this.websocketOnClose;
    },
  },
};
</script>

<style lang="scss" scoped>
.setConfig {
  margin: 35px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 45px;

  span {
    color: #fff;
    font-size: 15px;
    text-align: right;
  }

  .el-input {
    width: 240px;
    margin-right: 15px;
  }
}

.set {
  background-color: #91fdb9;
  color: #0b111d;
  border-color: #91fdb9;
  font-weight: 600;
  letter-spacing: 1px;
}

.charge-table {
  padding: 50px;
  background-color: #111827;
  border: #192337 solid 1px;
  min-height: 68vh;
  margin: 35px;
  display: flex;
  flex-direction: column;

  .charge-table-bottom {
    width: 100%;
    min-height: 100%;
    background-color: #111827;
    display: flex;
    flex-wrap: wrap;

    
  }
}
</style>