<template>
  <div v-show="showStatus" id="tips" class="tips" ref="tips"></div>
</template>

<script>
import * as Tips from './tips'
import {EventBus} from "@/event-bus";

export default {
  name: "TipsComp",
  data(){
    return {
      showStatus:true,
      width:0,
      height:0,
      stage:null,
      layer:null,
      deviceId:null,
      commandEnum:{
        大船大船:'大船大船',
        开始派工:'开始派工',
        开始报工:'开始报工',
        确认完毕:'确认完毕',
        执行成功:'执行成功',
      },
      msgFlag:false,
      timeoutId3001:null,
      timeoutId3002:null,
    }
  },
  mounted(){
    this.initKonvaStage()
    EventBus.$on('error', item => {
      this.onMsg(item.msg)
    })
  },
  created(){
    this.deviceId=this.$route.query.deviceId||''
  },
  sockets:{
    tip(data){
      !!this.timeoutId3001&&clearTimeout(this.timeoutId3001)
      !!this.timeoutId3002&&clearTimeout(this.timeoutId3002)

      // if (data.code===3001&&data.msg.deviceId===this.deviceId){
      //   this.msgFlag&&this.onMsg(`语音设备已暂停,请再次说出"${this.commandEnum.大船大船}"激活语音设备`,true)
      //   this.msgFlag=false
      //   this.timeoutId3001=setTimeout(()=>{
      //     this.hide()
      //   },10000)
      // }
      let msg
      if (data?.success&&data?.data?.deviceId===this.deviceId){
        msg=`处理成功`
      }

      if (data.code===3000&&data.msg.deviceId===this.deviceId){
        msg=`识别结果:${data.msg.orderNumber}`
      }

      if (data.code===3002&&data.msg.deviceId===this.deviceId){
        switch (data.msg.actionType){
          case this.commandEnum.大船大船:
            this.msgFlag=true
            msg='设备已激活,请说出"开始派工"/"开始报工"'
            break;
          case this.commandEnum.开始派工:
            msg=`${data.msg.actionType},请说出派工单号后"确认完毕"`
            break;
          case this.commandEnum.开始报工:
            msg=`${data.msg.actionType},请说出派工单号后"确认完毕"`
            break;
          case this.commandEnum.确认完毕:
            msg=`正中处理中,请稍后...`
            break;
          default:
            msg=data.msg.actionType
        }

        this.timeoutId3002=setTimeout(()=>{
          this.msgFlag&&this.onMsg(`语音设备已暂停,请再次说出"${this.commandEnum.大船大船}"激活语音设备`,true)
          this.msgFlag=false
          this.timeoutId3001=setTimeout(()=>{
            this.hide()
          },10000)
        },59000)
      }
      this.msgFlag&&this.show()
      this.msgFlag&&this.onMsg(msg)
    },
    complete(){
      if (data.code===3000&&data.msg.deviceId===this.$props.deviceId){
        this.msgFlag&&this.onMsg("设备激活中,您可以继续派工/报工?",true)
      }
    }
  },
  methods:{
    onMsg(msg){
      const {onMsg}=Tips.default
      onMsg(msg)
    },
    initKonvaStage(){
      this.width=this.$refs.tips.clientWidth
      this.height=this.$refs.tips.clientHeight
      const {container}=Tips.default
      const {stage,layer}=container(this.width,this.height,'tips')
      this.stage=stage
      this.layer=layer
      this.showStatus=false
    },
    hide(){
      this.showStatus = false;
    },
    show(){
      this.hide()
      this.showStatus = true
    },
  }
}
</script>

<style scoped>
#tips{
  overflow: hidden;
  aspect-ratio: 16/9;
  width: 100%;
  height: 4.5vh;
  position: fixed;
  top:5px;
}
</style>
