<template>
  <div class="messsage-reminder">
    <h1>Websocket 链接情况一览</h1>
    <div class="info">
      <div class="title">链接状态：</div>
      <div>{{ statusText }}</div>
      <el-button size="mini" type="primary" @click="websocketStatus"
        >获取状态</el-button
      >
    </div>
    <div class="info">
      <div class="title">最新消息：</div>
      <div class="message-list">{{ currentMassage }}</div>
    </div>
    <div class="info">
      <div class="title">历史消息：</div>
      <div class="message-list">
        <div v-for="(message, index) in messageList" :key="index">
          {{ index + 1 }}、{{ message }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {messageReceiver} from '@/api/MessageReminder'

export default {
  name: 'WebsocketCheck',
  data() {
    return {
      currentMassage: '-',
      messageList: [],
      status: '-',
      statusText: '-',
      statusMap: {
        0: 'CONNECTING',
        1: 'OPEN',
        2: 'CLOSING',
        3: 'CLOSED'
      }
    }
  },
  mounted() {
    console.log('WebsocketCheck mounted')
    this.$bus.$on('websocket-message', data => {
      this.messageAccept(data)
    })
    this.$bus.$on('websocket-status', data => {
      this.status = data
      this.statusText = this.statusMap[data]
    })
  },
  methods: {
    messageAccept(data) {
      this.currentMassage = data
      this.messageList.push(data)
    },
    websocketStatus() {
      this.$bus.$emit('getWebsocketStatus')
    }
  }
}
</script>

<style lang="scss" scoped>
.messsage-reminder {
  width: 80%;
  margin: 0 auto;
  margin-top: 20px;
  h1 {
    width: 100%;
    font-size: 20px;
    text-align: center;
  }
  .info {
    display: flex;
    align-items: center;
    font-size: 16px;
    gap: 20px;
    margin-bottom: 20px;
  }
  .title {
    font-size: 16px;
    min-width: 100px;
  }
  .message-list {
    font-size: 16px;
    div {
      font-size: 16px;
      margin: 6px 0;
    }
  }
}
</style>
