<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { Button, Card,  Space } from 'ant-design-vue';
import AppList from './appList.vue';
import { getNodeListApi } from '#/api/core/server';
import type { NodeData } 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 nodeList = ref<NodeData[]>([]);
onMounted(async() => {
  try{
    const response = await getNodeListApi();
    nodeList.value = Array.isArray(response) ? response : [];
    const app = nodeList.value[0];
    if (!app) return;
  }catch(e){
    nodeList.value = [];
    //console.log(e);
  }
});
async function addNode() {
  addServerApi.open()
}

</script>
<template>
  <Page>
    <addServerM class="w-[50%]"/>
    <Card class="mb-5" title="节点操作">
      <Space>
        <Button @click="addNode">新增</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>名称</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>Ip</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>硬件</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>地区</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>运营商</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>时区</span>
          </h1>
        </div>

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