<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <div class="l-flex__none l-flex--row c-sibling-item--v">
      <span class="l-flex__none c-sibling-item">sn</span>
      <el-input
        v-model.trim="sn"
        class="c-sibling-item"
      />
      <button
        class="l-flex__none c-sibling-item far o-button"
        :disabled="loading"
        @click="createProxy"
      >
        <i
          v-if="loading"
          class="el-icon-loading"
        />
        <template v-else>
          代理
        </template>
      </button>
    </div>
    <template v-if="valid">
      <div class="c-sibling-item--v far">
        <button
          class="l-flex__none c-sibling-item far o-button"
          @click="publish('/oss')"
        >
          OSS
        </button>
        <button
          class="l-flex__none c-sibling-item far o-button"
          @click="publish('/online')"
        >
          Online
        </button>
        <button
          class="l-flex__none c-sibling-item far o-button"
          @click="publish('/offline')"
        >
          Offline
        </button>
      </div>
      <div class="l-flex__auto c-sibling-item--v far c-simulator u-overflow-y--auto">
        <div
          v-for="message in messages"
          :key="message.id"
        >
          <div>{{ message.topic }}</div>
          <div>{{ message.payload }}</div>
        </div>
      </div>
    </template>
  </wrapper>
</template>

<script>
import { createProxy } from './simulate'

export default {
  name: 'Simulate',
  data () {
    return {
      sn: window.sessionStorage.getItem('isoc_simulator_device') || '',
      valid: false,
      loading: false,
      messages: []
    }
  },
  beforeDestroy () {
    this.onClose(true)
  },
  methods: {
    createProxy () {
      if (!this.sn) {
        return
      }
      this.onClose(true)
      this.loading = true
      this.$proxyPromise = createProxy(this.sn, this.onMessage, this.onClose)
      this.$proxyPromise.then(
        val => {
          window.sessionStorage.setItem('isoc_simulator_device', this.sn)
          this.$proxyPromise = null
          this.$proxy = val
          this.valid = true
          this.$message({
            type: 'success',
            message: '代理成功'
          })
        },
        () => {
          this.$message({
            type: 'error',
            message: '代理失败'
          })
        }
      ).finally(() => {
        this.loading = false
      })
    },
    publish (topic, message, encode, useRoot) {
      return this.$proxy.publish(topic, message, encode, useRoot)
    },
    onClose (force) {
      this.$proxyPromise?.reject()
      this.$proxy?.stop()
      this.valid = false
      this.messages = []
      if (!force) {
        this.$message({
          type: 'warning',
          message: '代理已断开'
        })
      }
    },
    onMessage (topic, payload) {
      this.messages.unshift({
        id: Date.now(),
        topic,
        payload
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-simulator {
  color: $black;
  font-size: 14px;
  line-height: 24px;
  word-break: break-word;
}
</style>
