<template>
    <ap-container>
        <ap-aside margin="1111" width="55%">
            <ap-table ref="tableRef" :options.sync="tableOpt"></ap-table>
        </ap-aside>
        <ap-main margin="1110" class="flex-col">
            <div class="flex-1">
                <div class="ap-color-blue" style="font-weight: bold" title="后台发送数据给前端">
                    <i class="el-icon-s-promotion" /> 后台发送数据至前端
                </div>
                <el-form label-width="80px">
                    <el-form-item label="操作类型">
                        <el-radio-group v-model="msgType">
                            <el-radio :label="1" >单个</el-radio>
                            <el-radio :label="2" >群发</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <el-form v-if="msgType == 2" label-width="80px">
                    <el-form-item label="连接前缀">
                        <el-input v-model="linkPrefix" placeholder="群发连接ID前缀"></el-input>
                    </el-form-item>
                </el-form>
                <el-form label-width="80px">
                    <el-form-item label="消息内容">
                        <el-input v-model="msgContent" type="textarea" rows=4></el-input>
                    </el-form-item>
                </el-form>
                <div class="flex-center">
                    <el-button type="primary" @click="sendJavaMsg" size="medium" round>发送</el-button>
                </div>
            </div>

        </ap-main>
    </ap-container>
</template>

<script>
import {initWebSocket, sendMessage, sendMessageByPrefix} from "ap-util/util/WebSocketUtil";

export default {
    name: 'SysWebSocket',
    data() {
        let columns = [
            {
                prop: 'id',
                label: '连接ID',
                type: 'input',
                width: 150,
            },{
                prop: 'sessionId',
                label: 'sessionID',
                type: 'input',
                width: 100,
            }, {
                prop: 'addTime',
                label: '创建时间',
                type: 'datePicker',
                width: 100,
                datePickerFormat: 'MM-dd HH:mm:ss',
            }, {
                prop: 'updateTime',
                label: '最新操作时间',
                type: 'datePicker',
                width: 100,
                datePickerFormat: 'MM-dd HH:mm:ss',
            }, {
                prop: 'lastSendMessage',
                label: '最新发送信息',
                type: 'input',
                minWidth: 200,
            },
        ];
        let tableOpt = {
            title: "WebSocket列表",
            columns: columns,
            dataUrl: "/apt/webSocket/getSockets",
            toolbarBtn: [{btnType: "primary", text: "新建连接", icon: "el-icon-lianjie6", onClick: this.createWebSocket},
                "separator", "refresh"],
            initData: true, // 默认false
            params: {}
        };
        return {
            tableOpt: tableOpt,
            msgType: 1,
            linkPrefix: "",
            msgContent: "",
        }
    },
    methods: {
        createWebSocket() {
            let id = "WSTEST" + new Date().getTime();
            initWebSocket({
                id: id,
                onmessage: (event) => {
                    this.$message.info(`接收到后台消息(${id})：${ event.data}`);
                },
                onopen:(event) => {
                    this.$message.success(`当前页面创建websocket成功：${id}`);
                    this.$refs.tableRef.refresh();
                },
            });
        },
        sendJavaMsg() {
            if (this.msgContent == "") {
                this.$message.error('消息内容为空');
                return;
            }
            let selects = this.$refs.tableRef.getSelection();

            // 单个
            if (this.msgType == 1) {
                if (selects == null || selects.length < 1) {
                    this.$message.error('请选择需要操作的连接');
                    return;
                }
                for (let i = 0; i < selects.length; i++) {
                    this.javaSendMessage(selects[i].id, this.msgContent);
                }
            }

            // 群发
            if (this.msgType == 2) {
                if (this.linkPrefix == "") {
                    this.$message.error('连接前缀为空');
                    return;
                }
                this.javaSendMessageByPrefixg(this.linkPrefix, this.msgContent);
            }
        },
        javaSendMessageByPrefixg(prefix, message) {
            this.$request({
                url: '/apt/webSocket/sendMessageByPrefix',
                method: 'post',
                data: {
                    prefix: prefix,
                    message: message
                }
            }).then(response => {
                console.log("单个发送成功")
            })
        },
        javaSendMessage(id, message) {
            this.$request({
                url: '/apt/webSocket/sendMessage',
                method: 'post',
                data: {
                    id: id,
                    message: message
                }
            }).then(response => {
                console.log("群发成功")
            })
        },
    }
}
</script>

<style scoped>
</style>
