<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { Button, Card,  Space } from 'ant-design-vue';
import AppList from './appList.vue';
import { getAppListApi } from '#/api/core/server';
import type { AppData } from '#/api/core/server';
import { useVbenModal } from '@vben/common-ui' 
import { ref,onMounted } from 'vue';
import addServerModal from './addServer.vue';


const [addServerM, addServerApi] = useVbenModal({
  connectedComponent: addServerModal,
  onClosed: async () => {
    addServerApi.close();
  },
});


const appList = ref<AppData[]>([]);
onMounted(async() => {
  try{
    const response = await getAppListApi();
    appList.value = Array.isArray(response) ? response : [];
    const app = appList.value[0];
    if (!app) return;
  }catch(e){
    appList.value = [];
    //console.log(e);
  }
});
async function addApp() {
  addServerApi.open()
}

</script>
<template>
  <Page>
    <addServerM class="w-[50%]"/>
    <Card class="mb-5" title="节点操作">
      <Space>
        <Button @click="addApp">新增</Button>
        <Button> 删除 </Button>
      </Space>
    </Card>
    <div class="p-5">
      <div class="card-box p-4 py-6 flex justify-between h-12">
        <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>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>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>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>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>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>tz</span>
          </h1>
        </div>

      </div>
      <AppList :items="appList" title="服务器列表"/>
    </div>
  </Page>
</template>
