<template>
    <el-drawer :visible="drawer" direction="rtl" :before-close="handleClose" width="100px">
        <el-table :data="tableData" border :height="vh" stripe style="width: 100%">
            <el-table-column prop="createTime" show-overflow-tooltip label="发生时间" align="center"
                width="170"></el-table-column>
            <el-table-column prop="level" label="等级" show-overflow-tooltip align="center" width="70"
                :formatter="hasBackFormat"></el-table-column>
            <el-table-column prop="operate" align="center" label="日志描述">
                <template slot-scope="scope">
                    <span>
                        {{ scope.row.type == 0 ? '业务事件 ->' : '系统事件 ->' }}{{ scope.row.loginName }}在{{
                            scope.row.createTime
                        }}在{{ scope.row.ip }}执行了{{ scope.row.operate }}{{ scope.row.operateType }},结果为{{
                            scope.row.result == 1 ? '成功' : '失败,失败原因为' + scope.row.failReason
                        }}
                    </span>
                </template>
            </el-table-column>
        </el-table>
    </el-drawer>
</template>

<script>
import mqtt from 'mqtt'
export default {
    name: 'mqttWs',
    data() {
        return {
            mqtt: undefined,
            drawer: true,
            vh: 0,
            tableData: []
        }
    },
    created: function () {
        this.connectMqtt()

        this.mqtt.on('connect', e => {
            // this.$message.success('连接mqtt服务器成功!')
            console.log('mqtt客户端已连接....')
            this.mqtt.subscribe('/userLogPush')
        })

        this.mqtt.on('message', (topic, message) => {
            this.drawer = true
            this.tableData.unshift(JSON.parse(message))
            // console.log('🚀 ~ this.mqtt.on ~ message:', JSON.parse(message))
            // console.log('mqtt接收到消息' + message)
        })

        this.mqtt.on('error', error => {
            console.log('mqtt连接失败...', error)
            this.mqtt.end()
        })

        this.mqtt.on('close', function () {
            console.log('mqtt客户端已断开连接.....')
        })
    },
    mounted() {
        this.vh = window.sessionStorage.getItem('appheight')
    },

    destroyed: function () {
        if (this.mqtt.connected) {
            this.mqtt.end()
        }
    },

    methods: {
        hasBackFormat(row) {
            return row.level == 0 ? '普通' : row.level == 1 ? '中级' : '严重';
        },

        connectMqtt() {
            if (this.mqtt) {
                if (this.mqtt.connected) {
                    return
                }
            }

            // let userName = this.$store.state.user.userInfo.loginName
            const options = {
                protocolId: 'MQTT',
                qos: 2,
                clean: true,
                connectTimeout: 30 * 1000,
                clientId: 'mqttjs' + Math.random(),
                username: 't_user',
                password: 'njcnpqs'
            }
            let url =''
            if (process.env.VUE_APP_HB == 'hbqr') {
                 url = 'ws://25.36.232.56:30006/mqtt'

            } else {
                 url = 'ws://192.168.1.22:8083/mqtt'

            }

            this.mqtt = mqtt.connect(url, options)
        },
        handleClose() {
            this.drawer = false
            // if (this.mqtt.connected) {
            //     this.mqtt.end()
            // }
        }
    }
}
</script>

<style scoped></style>
