<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']" placement="bottomRight" :arrow="{ pointAtCenter: true }">
        <a-avatar/>
        <template #overlay >
          <a-menu style="width: 100px;text-align: center">
            <a-menu-item key="0" @click="logout"> 退出登录</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>

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

<script setup lang="ts">
import {ExclamationCircleOutlined, MenuFoldOutlined, MenuUnfoldOutlined} from "@ant-design/icons-vue";
import router from "@/router";
import {useUserStore} from "@/stores/modules/userStore.ts";
import {Modal} from "ant-design-vue";
import {createVNode} from "vue";


const collapsed = defineModel<boolean>('collapsed')
const userStore =  useUserStore()

// const logout = ()=>{
//   localStorage.removeItem("baUserStore");
//   router.push('/login')
//   userStore.resetUserInfo()
// }
const logout = () => {
  Modal.confirm({
    title: '确定要退出登录么？',
    icon: createVNode(ExclamationCircleOutlined),
    async onOk() {
      //清除登录信息
      await userStore.resetUserInfo();
      //跳转登录页
      await router.push({
        path: '/login'
      })
    },
    async 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>
