<script setup>
import CustomCard from '@/components/CustomCard.vue'
import { RouterView } from 'vue-router'
import { h, ref } from 'vue'
import { AppstoreOutlined, MailOutlined } from '@ant-design/icons-vue'
import router from '@/router/index.js'

const current = ref(['mail'])
const items = ref([
  {
    key: 'home',
    icon: () => h(MailOutlined),
    label: h('a', { href: '/' }, '首页'),
    title: '首页'
  },
  {
    key: 'about',
    icon: () => h(AppstoreOutlined),
    label: h('a', { href: '/about' }, '关于'),
    title: '关于'
  },
  {
    key: 'tool',
    icon: () => h(AppstoreOutlined),
    label: h('a', { href: '/tool' }, '工具'),
    title: '工具'
  }
])

const logout = async () => {
  const response = await fetch('http://localhost:3000/logout', {
    method: 'POST',
    cache: 'default',
    headers: {
      'Content-Type': 'application/json; charset=utf-8'
    },
    credentials: 'include'
  })

  if (response.ok) {
    await router.push('/login')
  } else {
    console.error('Logout failed', response.statusText)
  }
}
</script>

<template>
  <a-layout style="min-height: 100vh">
    <a-layout-header :style="{ background: '#fff', width: '100%' }">
      <a-menu
        v-model:selectedKeys="current"
        mode="horizontal"
        :items="items"
        theme="light"
        :style="{ justifyContent: 'center' }"
      />
    </a-layout-header>
    <a-layout>
      <a-layout-content
        theme="light"
        :style="{ flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center' }"
      >
        <RouterView />
      </a-layout-content>
      <a-layout-sider
        theme="light"
        :collapsible="true"
        :collapsed-width="0"
        :defaultCollapsed="true"
      >
        <CustomCard :name="'rsgl'" :style="{ margin: 'auto', padding: '10px' }" />
        <a-button @click="logout">退出登录</a-button>
      </a-layout-sider>
    </a-layout>
    <a-layout-footer>footer</a-layout-footer>
  </a-layout>
</template>

<style scoped></style>
