<template>
    <div>
        <button @click="startInstallation" :disabled="isLoading">
            {{ isLoading ? '安装中...' : '安装模型 & Qwen3 Modle' }}
        </button>

        <h3>安装 Log:</h3>
        <div class="log-container">
            <pre>{{ log }}</pre>
        </div>
    </div>
</template>

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

const isLoading = ref(false);
const log = ref('');

// 统一处理来自主进程的消息
const handleProgress = (progress) => {
    if (progress.status) {
        log.value += `\n--- ${progress.status} ---\n`;
    } else if (progress.type === 'stdout') {
        log.value += progress.data;
    } else if (progress.type === 'stderr') {
        log.value += `[ERROR] ${progress.data}`;
    }
};

// 启动安装
const startInstallation = async () => {
    isLoading.value = true;
    log.value = 'Starting installation process...\n';
    try {
        const result = await window.api.installOllama();
        if (result.success) {
            log.value += `\n--- SUCCESS: ${result.message} ---\n`;
        } else {
            log.value += `\n--- FAILED: ${result.message} ---\n`;
        }
    } catch (error) {
        log.value += `\n--- FATAL ERROR: ${error.message} ---\n`;
    }
    isLoading.value = false;
};

// 挂载时设置监听器
onMounted(() => {
    window.api.onInstallProgress(handleProgress);
});

// 卸载时清理监听器
onUnmounted(() => {
    window.api.removeInstallProgressListeners();
});
</script>

<style scoped>
.log-container {
    background-color: #2b2b2b;
    color: #f1f1f1;
    padding: 15px;
    border-radius: 8px;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    /* 自动换行 */
    word-wrap: break-word;
    font-family: 'Courier New', Courier, monospace;
}
</style>