<template>
    <el-button type="success" @click="newTerminal()">新终端</el-button>
    <el-button type="success" @click="newTerminal1()">新终端(分屏)</el-button>

    <el-dialog class="no-padding" title="实时脚本终端" v-model="flag.termial" size="tiny" :close-on-click-modal="false" top="10vh"
        width="90%">
        <Terminal :url="url" :msgFilter="msgFilter"></Terminal>
    </el-dialog>
    <el-dialog class="no-padding" title="实时脚本终端" v-model="flag.terminalSplit" size="tiny" :close-on-click-modal="false"
        top="10vh" width="90%">
        <TerminalSplit :url="url" :msgFilter="msgFilter" :prmt="prmt"></TerminalSplit>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from "vue";
import { Terminal, TerminalSplit } from "noob-mengyxu";

let index = 111;
const prefix = "ws://localhost/websocket/";
let url = "";
const prmt = ref(">");
const flag = reactive({
    termial: false,
    terminalSplit: false,
})

const newTerminal = () => {
    url = prefix + ++index;
    flag.termial = true;
}

const newTerminal1 = () => {
    url = prefix + ++index;
    flag.terminalSplit = true;
}

const msgFilter = msg => {
    if (msg.startsWith("TTY_RES|")) {
        const res = JSON.parse(msg.substring(8));
        prmt.value = res.prmt;
        return null;
    } else {
        return msg;
    }
}

onMounted(() => { });
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>