<script lang="ts" setup>
import { h, provide, ref } from 'vue';
import { MenuProps, message } from 'ant-design-vue';
import { SettingOutlined, UploadOutlined, UserOutlined, WindowsOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import * as shell from '@tauri-apps/plugin-shell';
import { invoke } from "@tauri-apps/api/core";

// 打开作者B站空间
async function openAuthorBilibili() {
    await invoke("open_url", { url: "https://space.bilibili.com/1728953419" });
}

// 屏蔽右键菜单（输入框和文本域除外）
document.oncontextmenu = (event: any) => {
    try {
        const target = event.srcElement;
        const isInput = target.tagName === 'INPUT' && target.type.toLowerCase() === 'text';
        const isTextarea = target.tagName === 'TEXTAREA';
        return isInput || isTextarea;
    } catch {
        return false;
    }
};

const router = useRouter();
let killCoreProcess: (() => void) | null = null;
// 启动后端核心服务
message.loading("DeEarthX.Core启动中，请勿操作...").then(() => runCoreProcess());

function runCoreProcess() {
    shell.Command.create("core").spawn()
        .then((e) => {
            // 检查后端服务是否成功启动
            fetch("http://localhost:37019/", { method: "GET" })
                .catch(() => router.push('/error'))
                .then(() => message.success("DeEarthX.Core 启动成功"));
            console.log("DeEarthX V3 Core");
            // 保存进程对象，用于后续终止
            killCoreProcess = e.kill;
        })
        .catch((error) => {
            console.error(error);
            message.error("DeEarthX.Core 启动失败，请检查37019端口是否被占用！");
        });
}

provide("killCoreProcess", () => {
        if (killCoreProcess && typeof killCoreProcess === 'function') {
            killCoreProcess();
            killCoreProcess = null;
            message.info("DeEarthX.Core 重新启动！");
            runCoreProcess();
        }
}); //全局提供kill方法

// 导航菜单配置
const selectedKeys = ref<(string | number)[]>(['main']);
const menuItems: MenuProps['items'] = [
    {
        key: 'main',
        icon: h(WindowsOutlined),
        label: '主页',
        title: '主页',
    },
    {
        key: 'setting',
        icon: h(SettingOutlined),
        label: '设置',
        title: '设置',
    },
    {
        key: 'galaxy',
        icon: h(UploadOutlined),
        label: '提交',
        title: '提交',
    },
    {
        key: 'about',
        icon: h(UserOutlined),
        label: '关于',
        title: '关于',
    }
];

// 菜单点击事件处理
const handleMenuClick: MenuProps['onClick'] = (e) => {
    selectedKeys.value[0] = e.key;
    const routeMap: Record<string, string> = {
        main: '/',
        setting: '/setting',
        about: '/about',
        galaxy: '/galaxy'
    };
    const route = routeMap[e.key] || '/';
    router.push(route);
};

// 主题配置
const theme = ref({
    token: {
        colorPrimary: '#67eac3',
    }
});
</script>

<template>
    <a-config-provider :theme="theme">
        <div class="tw:h-screen tw:w-screen tw:flex tw:flex-col">
            <a-page-header class="tw:h-16" style="border: 1px solid rgb(235, 237, 240)" title="DeEarthX"
                sub-title="V3" :avatar="{ src: './dex.png' }">
                <template #extra>
                    <a-button @click="openAuthorBilibili">作者B站</a-button>
                </template>
            </a-page-header>
            <div class="tw:flex tw:flex-1 tw:overflow-hidden">
                <a-menu id="menu" style="width: 144px; flex-shrink: 0;" :selectedKeys="selectedKeys" mode="inline" :items="menuItems"
                    @click="handleMenuClick" />
                <RouterView class="tw:flex-1 tw:overflow-auto" />
            </div>
        </div>
    </a-config-provider>
</template>


<style>
/* 禁止选择文本的样式 */
h1,
li,
p,
span {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 禁止拖拽图片 */
img {
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
}
</style>