<script lang="ts" setup>
import type { AppData } from '#/api/core/server';
import AddServerModal from './addServer.vue' 
defineOptions({
    name: 'AppList',
})
interface Props {
    items: AppData[];
    title: string;
}
withDefaults(defineProps<Props>(),{
    items: () => [],
})
</script>


<!-- <------------------- Add your code here ------------------->
<template>
    <AddServerModal></AddServerModal>
    <div v-for="item in items" :key="item.AppId">
        <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.AppId }}</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.AppName }}</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.NodeName }}</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.MysqlName }}</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.Topic }}</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.tz }}</span>
                    </h1>
                </div>
                
            </div>
        </div>
    </div>
</template>
