<template>
  <n-grid :x-gap="20" :y-gap="20" :cols="4">
    <n-grid-item v-for="(server, index) in servers" :key="index">
      <div class="light-green" @click="openNewPage(server.path, server.id)">
        <n-card hoverable :title="server.name">
          <template #cover>
            <img src="" />
          </template>
        </n-card>
      </div>
    </n-grid-item>
  </n-grid>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { GetServiceList } from '@/api/service/service';
  import { storage } from '@/utils/Storage';
  import { ACCESS_TOKEN } from '@/store/mutation-types';
  import { SelectSystem } from '@/api/service/service';
  import { useMessage } from 'naive-ui';

  const servers = ref([]);
  const message = useMessage();

  const openNewPage = (url: string) => {
    // await SelectSystem({
    //   ...{ system_id: system_id },
    // })
    //   .then((res) => {
    //     console.log('_res:' + JSON.stringify(res));
    // const ex = 7 * 24 * 60 * 60 * 1000;
    // storage.set(ACCESS_TOKEN, res.token, ex);
    const path = url.replace('{access-token}', storage.get(ACCESS_TOKEN));
    window.open(path, '_self');
    // })
    // .catch((e: Error) => {
    //   message.error(e.message ?? '操作失败');
    // });
  };

  onMounted(async () => {
    servers.value = await GetServiceList();
  });
</script>

<style scoped lang="less">
  .n-grid {
    padding: 20px;
  }

  .light-green {
    height: 100%;
    font-size: 20px;
  }
  .n-card {
    width: 100%;
    height: 100%;
    //background: #f7f7f7;
  }
</style>
