<template>
  <div class="work-face">
    <a-space>
      <a-icon type="control" style="font-size: 20px" />
      <span>工作面信息：</span>
      <span :key="index" v-for="(i, index) in states">
        {{ i.name }}：
        <a-tooltip>
          <template slot="title">
            <span v-if="i.state === '0' || i.state === 0"
              ><a-icon
                type="sync"
                style="color: green; font-size: 21px"
                spin
              />正常运行中</span
            >
            <span v-else
              ><a-icon
                type="stop"
                style="color: red; font-size: 22px"
              />该部分已停止</span
            >
          </template>
          <a-tag :color="getColorString(i.state)" style="font-size: 15px">{{
            getStateString(i.state)
          }}</a-tag>
        </a-tooltip>
      </span>
    </a-space>
  </div>
</template>
<script>
const states = [
  {
    name: "破碎机",
    state: 0,
  },
  {
    name: "转载机",
    state: 0,
  },
  {
    name: "顺槽皮带",
    state: 0,
  },
  {
    name: "前刮板",
    state: 0,
  },
  {
    name: "后刮板",
    state: 0,
  },
];
export default {
  name: "WorkFace",
  data() {
    return {
      websocketUrl: "ws://106.12.123.152:8080/ws/workface",
      states,
    };
  },
  methods: {
    init() {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.websocketUrl);
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
      }
    },
    open() {
      console.log("socket连接成功");
    },
    error() {
      console.log("连接错误");
    },
    getMessage(msg) {
      let item = JSON.parse(msg.data);
      console.log("接收到来自服务器的消息：", item.data);
      if (item.error_code === 0) {
        const data = item.data;
        this.states = [
          {
            name: "破碎机",
            state: parseInt(data.posui),
          },
          {
            name: "转载机",
            state: parseInt(data.zhuanzai),
          },
          {
            name: "顺槽皮带",
            state: parseInt(data.shuncao),
          },
          {
            name: "前刮板",
            state: parseInt(data.qianguaban),
          },
          {
            name: "后刮板",
            state: parseInt(data.houguaban),
          },
        ];
      }
    },
    send() {},
    close() {
      console.log("socket已经关闭");
    },
    workfaceWebsocket: function () {
      this.ws = new WebSocket(this.websocketUrl);
      //监听是否连接成功
      this.ws.onopen = () => {
        console.log("ws连接状态：" + this.ws.readyState);
      };
      //接听服务器发回的信息并处理展示
      this.ws.onmessage = (res) => {
        const item = JSON.parse(res.data);
        console.log("接收到来自服务器的消息：", item.data);
        if (item.error_code === 0) {
          const data = item.data;
          this.states = [
            {
              name: "破碎机",
              state: data.posui,
            },
            {
              name: "转载机",
              state: data.zhuanzai,
            },
            {
              name: "顺槽皮带",
              state: data.shuncao,
            },
            {
              name: "前刮板",
              state: data.qianguaban,
            },
            {
              name: "后刮板",
              state: data.houguaban,
            },
          ];
        }
      };
      //监听连接关闭事件
      this.ws.onclose = () => {
        //监听整个过程中websocket的状态
        console.log("ws连接状态：" + this.ws.readyState);
      };
      //监听并处理error事件
      this.ws.onerror = function (error) {
        console.log(error);
      };
    },
    getStateString(state) {
      if ((state === 0) | (state === "0")) {
        return "运行中";
      } else if (state === 1 || state === "1") {
        return "已停止";
      }
    },
    getColorString(state) {
      if ((state === 0) | (state === "0")) {
        return "green";
      } else if (state === 1 || state === "1") {
        return "#ef0200";
      }
    },
  },
  mounted() {
    this.init();
    // this.workfaceWebsocket();
  },
};
</script>
<style>
.work-face {
  font-size: 16px;
}
</style>