<script lang="ts" setup>
import { Button,  Tag, notification, Modal } 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 dayjs from 'dayjs';


defineOptions({
    name: 'AppList',
})
interface Props {
    items: ServerData[];
    title: string;
}
withDefaults(defineProps<Props>(),{
    items: () => [],
})


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


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('取消更新');
    },
  });
}
</script>


<!-- <------------------- Add your code here ------------------->
<template>
    <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-2 border-foreground/10">
                
                <div class="flex flex-col justify-center  md:mt-0 lg:w-1/12">
                    <h2 class="text-md font-semibold md:text-ml  text-center">
                        <span>{{ item.ServerId }}</span>
                    </h2>
                </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.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="getColor(item.Status || 0)">
                            {{ item.Status == 0 ? 'Inactive' : item.Status == 1 ? 'Active' : 'Unknown' }}
                        </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>{{ dayjs((item.StartTime ?? 0) * 1000).format('YYYY-MM-DD HH:mm:ss') }}</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.PlayerNum }}</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>{{ dayjs((item.OpenServerTime ?? 0) * 1000).format('YYYY-MM-DD HH:mm:ss') }}</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>