<template>
  <a-dropdown position="br" class="user-dropdown">
    <span class="inline-flex items-center cursor-pointer rounded hover:bg-gray-100 px-2 py-1.5">
      <a-avatar :size="24">
        <img :src="userStore.avatar || 'https://github.com/juetan.png'" :alt="userStore.nickname" />
      </a-avatar>
      <span class="mx-2">
        {{ userStore.nickname }}
      </span>
      <i class="icon-park-outline-down"></i>
      <password-modal></password-modal>
    </span>
    <template #content>
      <a-doption class="bg-transparent!">
        <div class="w-[200px] flex items-center gap-2">
          <a-avatar :size="32">
            <img :src="userStore.avatar || 'https://github.com/juetan.png'" :alt="userStore.nickname" />
          </a-avatar>
          <div class="leading-4 text-base my-2">
            {{ userStore.nickname }}
            <a-tag color="red" size="small" >管理员</a-tag>
            <div class="text-xs text-gray-400">
              <span class="text-gray-400">@{{ userStore.username }}</span>
            </div>
          </div>
        </div>
      </a-doption>
      <a-divider :margin="4" class="border-gray-100!"></a-divider>
      <a-doption @click="open()">
        <template #icon>
          <i class="icon-park-outline-lock"></i>
        </template>
        修改密码
      </a-doption>
      <a-doption @click="router.push('/my')">
        <template #icon>
          <i class="icon-park-outline-user"></i>
        </template>
        账号信息
      </a-doption>
      <!-- <a-divider :margin="4" class="border-gray-100!"></a-divider> -->
      <a-doption @click="router.push('/user')">
        <template #icon>
          <i class="icon-park-outline-config"></i>
        </template>
        系统设置
      </a-doption>
      <a-doption @click="router.push('/user')">
        <template #icon>
          <i class="icon-park-outline-info"></i>
        </template>
        关于
      </a-doption>
      <a-divider :margin="4" class="border-gray-100!"></a-divider>
      <a-doption @click="logout">
        <template #icon>
          <i class="icon-park-outline-power"></i>
        </template>
        退出
      </a-doption>
    </template>
  </a-dropdown>
</template>

<script setup lang="ts">
import { useFormModal } from '@/components/AnForm';
import { useUserStore } from '@/store/user';
import { delConfirm, sleep } from '@/utils';
import { Message } from '@arco-design/web-vue';

const userStore = useUserStore();
const route = useRoute();
const router = useRouter();

const logout = async () => {
  await delConfirm({
    content: '退出后将跳转到登录页面，确定退出吗？',
    okText: '确定退出',
    async onBeforeOk() {
      await sleep(2000);
      userStore.clearUser();
      Message.success('提示：已退出登陆!');
      router.push({ path: '/login', query: { redirect: route.path } });
    },
  });
};

const { component: PasswordModal, open } = useFormModal({
  title: '修改密码',
  trigger: false,
  width: 500,
  items: [
    {
      field: 'password',
      label: '原密码',
      setter: 'input',
      setterProps: {
        placeholder: '请输入原密码',
      },
      required: true,
    },
    {
      field: 'password1',
      label: '新密码',
      setter: 'input',
      setterProps: {
        placeholder: '请输入新密码',
      },
      required: true,
    },
    {
      field: 'password2',
      label: '确认新密码',
      setter: 'input',
      setterProps: {
        placeholder: '请再次输入新密码',
      },
      required: true,
    },
  ],
});
</script>

<style lang="less">
.user-dropdown {
  .arco-dropdown-list-wrapper {
    max-height: initial;
  }
}
</style>
