<template>
  <div class="header">
    <div class="left">
<!--      <div class="home" @click="toHome">-->
<!--        <Icon type="ios-home" />-->
<!--      </div>-->
<!--      <div class="back" @click="back">-->
<!--        <Icon type="md-return-left" />-->
<!--      </div>-->
      <div class="avator">
        <img :src="avator" width="40px" height="40px" alt="">
      </div>
      {{ userName }}
    </div>
    <div class="center">
      {{ time }}
    </div>
    <div class="right" @click="logOut">
      退出
    </div>
    <div class="sub-header">{{ title }}</div>
  </div>
</template>

<script>
import avator from '_static/images/avator.png'
import { logOut, getStoreTitle } from "@/libs/util"
import * as signalR from "@microsoft/signalr";
import withUrl from "@/config/withUrl";
import {MessagePackHubProtocol} from "@microsoft/signalr-protocol-msgpack";
export default {
name: "my-nav",
  data() {
    return {
      getStoreTitle,
      avator,
      logOut,
      timer: null,
      time: '',
      connection: null
    }
  },
  computed: {
    title() {
      return getStoreTitle(sessionStorage.getItem('plcCode'), sessionStorage.getItem('door'))
    },
    userName() {
      return this.$store.state.name
    }
  },
  methods: {
    // SignalR长连接
    SRConnection() {
      let _this = this
      this.connection = new signalR.HubConnectionBuilder()
          .withUrl(`${withUrl}/plcHub?groupName=storage${sessionStorage.getItem('plcCode')}&door=${sessionStorage.getItem('door')}`)
          .withAutomaticReconnect()
          .withHubProtocol(new MessagePackHubProtocol())
          .build()
      // 监听扫码
      this.connection.on('outStorageDataCheck', res => {
        console.log('出库----------------')
        console.log(res)
        this.connection.invoke('ReturnSureMes', res.MesId)
        this.$emit('listener-out')
      })
      this.connection.on('inStorageDataCheck', res => {
        console.log('入库----------------')
        console.log(res)
        this.connection.invoke('ReturnSureMes', res.MesId)
        this.$emit('listener-in')
      })
      this.connection.on('helperScanf', res => {
        console.log('辅助扫描')
        console.log(res)
        this.connection.invoke('ReturnSureMes', res.MesId)
        this.$emit('listener-helper', res.Data)
      })
      this.connection.start().then(() => {
        console.log('连接成功--nav')
      }).catch(err => {
        console.log('err--')
        console.log(err)
        re_start()
      })
      // 监听网络断开
      this.connection.onclose(() => {
        this.connection = null
        console.log('网络已断开！nav')
        // this.$Message.error('网络连接断开')
        // this.$router.go(0)
      })
      // 异常重启
      async function re_start() {
        try {
          await _this.connection.start()
        } catch (err) {
          setTimeout(() => re_start(), 5000)
        }
      }
    },
    back() {
      this.$router.back()
    },
    toHome() {
      this.$router.push({
        name: 'Home',
        query: {
          plcCode: sessionStorage.getItem('plcCode'),
          door: sessionStorage.getItem('door')
        }
      })
    }
  },
  mounted() {
    this.time = this.$dayjs().format('YYYY年MM月DD日 HH:mm:ss')
    this.timer = setInterval(() => {
      this.time = this.$dayjs().format('YYYY年MM月DD日 HH:mm:ss')
    }, 1000)
    this.SRConnection()
  },
  destroyed() {
    clearInterval(this.timer)
    this.connection.stop()
  }
}
</script>

<style lang="scss" scoped>
.header {
  position: relative;
  padding: 30px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left, .center, .right {
    flex: 1;
    min-width: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #d7d7d7;
    font-size: 28px;
    font-weight: bold;
  }
  .left {
    position: relative;
    .avator {
      padding: 0 10px;
      display: flex;
      align-items: center;
    }
    .home, .back {
      position: absolute;
      top: 0;
      left: 20px;
      cursor: pointer;
    }
    .back {
      left: 60px;
    }
  }
  .right {
    cursor: pointer;
  }
  .sub-header {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: bold;
    color: #d7d7d7;
  }
}
</style>
