<template>
  <div class="flex-justify-between h-f">
    <div class="flex-center">
      <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)"/>
      <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)"/>
    </div>
    <div class="margin-right flex-center">

      <a-dropdown :trigger="['click']">
        <a-avatar @click.prevent/>

        <template #overlay>
          <a-menu>
            <a-menu-item key="3" @click="showConfirm">退出登录</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>

    </div>
  </div>
</template>

<script setup lang="ts">

// import { staticRouter } from '@/router/staticRouters.ts'
import {MenuFoldOutlined, MenuUnfoldOutlined} from '@ant-design/icons-vue'
import {useUserStore} from "@/stores/modules/userStore.ts";

const collapsed = defineModel<boolean>('collapsed')
import {Modal} from 'ant-design-vue';
import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
import {createVNode} from 'vue';
import router from "@/router";

const showConfirm = () => {
  Modal.confirm({
    title: '确定要退出登录么？',
    icon: createVNode(ExclamationCircleOutlined),
    // content: createVNode('div', {style: 'color:red;'}, 'Some descriptions'),
    async onOk() {
      console.log('OK');

      //清除登录信息
      await useUserStore().resetUserInfo();
      //跳转登录页
      await router.push({
        path: '/login'
      })
    },
    onCancel() {
      console.log('Cancel');
    },
    class: 'test',
  });
};
</script>

<style scoped lang="scss">
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}
</style>
