<script lang="ts" setup>
import { Button, Tag, notification, Modal, Progress } from 'ant-design-vue';
import type { ServerData } from '#/api/core/server';
import { restartServer, getServerListApi, reloadServer } from '#/api/core/server';
import AddServerModal from './addServer.vue'
import EditServer from './editServer.vue';
import { useVbenModal } from '@vben/common-ui'

defineOptions({
    name: 'AppList',
})
interface Props {
    items: ServerData[];
    title: string;
}
withDefaults(defineProps<Props>(), {
    items: () => [],
})
const [editServerM, editServerApi] = useVbenModal({
    connectedComponent: EditServer,
});
async function editServer(Server: ServerData) {
    editServerApi.setData(Server);
    editServerApi.open();
}

function getColor(status: number) {
    switch (status) {
        case 0:
            return 'red';
        case 1:
            return 'green';
        case 2:
            return 'gray';
        case 3:
            return 'orange';
        default:
            return 'blue';
    }
}

function getCpuColor(usage: number) {
    if (usage < 50) {
        return 'green';
    } else if (usage < 80) {
        return 'orange';
    } else {
        return 'red';
    }
}

function getLatencyColor(latency: number) {
    if (latency < 100) {
        return 'green';
    } else if (latency < 200) {
        return 'orange';
    } else {
        return 'red';
    }
}

function formatMemUsage(usage: number) {
    if (usage < 1024) {
        return usage + ' MB';
    }
    return (usage / 1024).toFixed(2) + ' GB';
}


async function restart(Server: ServerData) {
    try {
        Server.Loading = true;
        const AppId = Server.AppId;
        await restartServer(AppId, Server.ServerId, Server.ServerName);
        notification.success({
            duration: 10,
            message: Server.ServerName + '重启成功',
            type: 'success',
        });
        Server.Loading = false;
        const serverResponse = await getServerListApi({ AppId: Server.AppId });
        const foundServer = serverResponse.find((item) => item.ServerId == Server.ServerId);
        Server.StartTime = foundServer ? foundServer.StartTime : undefined;
        //console.log('更新成功');
    } catch (e) {
        notification.error({
            duration: 10,
            message: Server.ServerName + '更新失败',
            type: 'error',
        });
        Server.Loading = false;
    }
}

async function reload(Server: ServerData) {
    try {
        Server.Reload = true;
        const AppId = Server.AppId;
        await reloadServer(AppId, Server.ServerId, Server.ServerName);
        notification.success({
            duration: 10,
            message: Server.ServerName + '重载成功',
            type: 'success',
        });
        Server.Reload = false;
        const serverResponse = await getServerListApi({ AppId: Server.AppId });
        const foundServer = serverResponse.find((item) => item.ServerId == Server.ServerId);
        Server.StartTime = foundServer ? foundServer.StartTime : undefined;
        //console.log('更新成功');
    } catch (e) {
        notification.error({
            duration: 10,
            message: Server.ServerName + '更新失败',
            type: 'error',
        });
        Server.Loading = false;
    }
}
function confirmUpdate(Server: ServerData) {
    Modal.confirm({
        title: '确认更新',
        content: `你确定要更新 ${Server.ServerName} 吗？`,
        onOk() {
            restart(Server);
        },
        onCancel() {
            //console.log('取消更新');
        },
    });
}

function getStatusName(status: number) {
    switch (status) {
        case 0:
            return 'Inactive';
        case 1:
            return 'Running';
        case 2:
            return 'Stopped';
        case 3:
            return 'Maintenance';
        default:
            return 'Unknown';
    }
}
</script>


<!-- <------------------- Add your code here ------------------->
<template>
    <editServerM></editServerM>
    <AddServerModal></AddServerModal>
    <div v-for="item in items" :key="item.ServerId">
        <div class="card-box p-4 py-6  md:mt-4">
            <div class="flex justify-between h-4 border-foreground/10">
                <div @click="editServer(item)" class="flex flex-col justify-center  md:mt-0 lg:w-1/12">
                    <h1 class="text-md font-semibold md:text-ml text-center">
                        <span>{{ item.ServerName }}</span>
                    </h1>
                </div>
                <div class="flex flex-col justify-center  md:mt-0 lg:w-1/12">
                    <h1 class="text-md font-semibold md:text-ml text-center">
                        <Tag color="red">LOG</Tag>
                        <Tag v-for="tag in item.Tags" :key="tag" color="blue">{{ tag }}</Tag>
                    </h1>
                </div>
                <div class="flex flex-col justify-center  md:mt-0 lg:w-1/12">
                    <h1 class="text-md font-semibold md:text-ml  text-center">
                        <Tag :color="getColor(item.Status || 0)">
                            {{ getStatusName(item.Status || 0) }}
                        </Tag>
                    </h1>
                </div>
                <div class="flex flex-col justify-center  md:mt-0 lg:w-1/12">
                    <h1 class="text-md font-semibold md:text-ml text-center">
                        <span>{{ item.PlayerNum }}</span>
                    </h1>
                </div>
                <div class="flex flex-col justify-center  md:mt-0 lg:w-1/12">
                    <Progress :percent="item.CpuUsage || 0" :stroke-color="getCpuColor(item.CpuUsage || 0)" />
                </div>
                <div class="flex flex-col justify-center  md:mt-0 lg:w-1/12">
                    <h1 class="text-md font-semibold md:text-ml text-center">
                        <span>{{ formatMemUsage(item.MemUsage || 0) }}</span>
                    </h1>
                </div>
                <div class="flex flex-col justify-center  md:mt-0 lg:w-1/12">
                    <h1 class="text-md font-semibold md:text-ml text-center">
                        <span>{{ item.ClientVersion }}</span>
                    </h1>
                </div>
                <div class="flex flex-col justify-center  md:mt-0 lg:w-1/12">
                    <h1 class="text-md font-semibold md:text-ml text-center">
                        <span :style="{ color: getLatencyColor(item.Latency || 0) }">{{ item.Latency }}ms</span>
                    </h1>
                </div>
                <div class="flex flex-col justify-center  md:mt-0 lg:w-1/12">
                    <h1 class="text-md font-semibold md:text-ml  text-center">
                        <Button @click=confirmUpdate(item) type="primary" :loading="item.Loading">Restart</Button>
                    </h1>
                </div>
                <!-- <div class="flex flex-col justify-center  md:mt-0 lg:w-1/12">
                    <h1 class="text-md font-semibold md:text-ml  text-center">
                        <Button @click=reload(item) type="primary" :loading="item.Reload">Reload</Button>
                    </h1>
                </div> -->
            </div>
        </div>
    </div>
</template>