<template>
    <div class="store-page">
        <Breadcrumb />
        <a-card title="启动乐跑登录器">
            <a-result title="乐跑登录器未开启" subtitle="点击下方按钮开启登录器" v-if="!ready">
                <template #extra>
                    <a-space>
                        <a-button type="primary" @click="openProxy" :loading="loading">开启登录器</a-button>
                    </a-space>
                </template>
            </a-result>
            <a-result status="success" title="启动命令已发送" subtitle="请根据下方输出进行操作" v-else>
                <template #extra>
                    <a-space>
                        <a-button type='primary' @click="closeProxy" :loading="loading">关闭登录器</a-button>
                    </a-space>
                </template>
            </a-result>
            <div class="output" v-if="output.length > 0">
                <div v-for="(item, index) in output">{{ item }}</div>
            </div>
        </a-card>
    </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue'

const ready = ref(false)
const loading = ref(false)
const output = ref([])
const getData = ref([])

const openProxy = async () => {
    try {
        loading.value = true
        const result = await window.electron.openProxy()
        loading.value = false
        ready.value = true

        let msg = `[系统消息] ${result}`
        if (msg !== output.value[output.value.length - 1])
            output.value.push(msg)

        window.electron.onProcessOutput(data => {
            if (data !== getData.value[getData.value.length - 1]) {
                getData.value.push(data)
                if (data.includes('>>>')) {
                    const parts = data.split('>>>');

                    for (let i = 1; i < parts.length; i++) {
                        const part = parts[i].trim();
                        if (part && part !== output.value[output.value.length - 1]) {
                            output.value.push(part)
                            if(part.includes('学院：'))
                            output.value.push('[系统消息] 若更新完一个乐跑账号后还需更新，请点击“关闭登录器”按钮后再次打开')
                        }
                    }
                }
            }
        })

        window.electron.onProcessClose(data => {
            let msg = `[系统消息] 乐跑登录器已停止运行`
            if (output.value[output.value.length - 1] !== msg)
                output.value.push(msg)
        })

        window.electron.onProcessError(data => {
            let msg = `[系统消息] 乐跑登录器启动时出错：${data}`
            if (output.value[output.value.length - 1] !== msg)
                output.value.push(msg)
        })
    } catch (error) {
        let msg = `[系统消息] 开启乐跑登录器失败！请确保没有任何程序阻止登录器启动。若有疑问请提交工单联系客服`
        if (output.value[output.value.length - 1] !== msg)
            output.value.push(msg)
    } finally {
        loading.value = false
    }
}

const closeProxy = async () => {
    loading.value = true
    await window.electron.killProcess()
    output.value.push(`[系统消息] 乐跑登录器关闭命令已发送`)
    ready.value = false
    loading.value = false
}

onUnmounted(() => {
    if(ready.value) {
        closeProxy()
    }
})

</script>

<style scoped>
.output {
    margin: 10px;
    padding: 10px;
    min-height: 300px;
    background-color: rgba(136, 136, 136, 0.2);
}
</style>