<template>
  <h-dropdown
    v-if="currentUser"
    class="ant-pro-dropdown ant-pro-dropdown-action"
    placement="bottomRight"
    overlayClassName="pro-components-header-dropdown-index-container"
  >
    <span>
      <!--TODO: 头像设置一个默认值-->
      <h-avatar
        size="small"
        :src="
          currentUser.avatar ||
          'https://img1.baidu.com/it/u=2613812079,2260747874&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
        "
        class="ant-pro-header-account-avatar"
      />
      <span class="ant-pro-header-account-name anticon">{{ currentUser.username }}</span>
    </span>
    <template v-slot:overlay>
      <h-menu class="ant-pro-dropdown-menu" :selected-keys="[]">
        <h-menu-item v-if="menu" key="center" @click="handleToCenter">
          <template #icon><user-outlined /></template>
          个人中心
        </h-menu-item>
        <h-menu-item v-if="menu" key="settings" @click="handleToSettings">
          <template #icon><setting-outlined /></template>
          个人设置
        </h-menu-item>
        <h-menu-divider v-if="menu" />
        <h-menu-item key="logout" @click="handleLogout">
          <template #icon><logout-outlined /></template>
          退出登录
        </h-menu-item>
      </h-menu>
    </template>
  </h-dropdown>
  <span v-else>
    <h-spin size="small" :style="{ marginLeft: 8, marginRight: 8 }" />
  </span>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { UserOutlined, SettingOutlined, LogoutOutlined } from '@ant-design/icons-vue';
import { useRouter, useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useStore } from 'vuex';
import { LOGOUT } from '@/store/modules/user/actions';
import { Avatar, Dropdown, Menu, MenuItem, Spin } from '@crami/ui';

export default defineComponent({
  name: 'AvatarDropdown',
  components: {
    UserOutlined,
    SettingOutlined,
    LogoutOutlined,
    HAvatar: Avatar,
    HDropdown: Dropdown,
    HMenu: Menu,
    HMenuItem: MenuItem,
    HSpin: Spin,
  },
  props: {
    currentUser: {
      type: Object,
      default: () => null,
    },
    menu: {
      type: Boolean,
      default: true,
    },
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    const { t } = useI18n();
    const handleToCenter = () => {
      router.push({ path: '/account/center' });
    };
    const handleToSettings = () => {
      router.push({ path: '/account/settings' });
    };
    const handleLogout = () => {
      // 携带上校验参数
      const query: any = {};
      if (route.query.checkCode) {
        query.checkCode = route.query.checkCode;
      }
      // 应用体验需要的用户名密码
      if (route.query.username) {
        query.username = route.query.username;
      }
      if (route.query.password) {
        query.password = route.query.password;
      }

      // 客户端用的userId
      if (route.query.userId) {
        query.userId = route.query.userId;
      }
      router.push({ path: '/user/login', query: query });
    };

    return {
      t,
      handleToCenter,
      handleToSettings,
      handleLogout,
    };
  },
});
</script>

<style lang="less">
body {
  @import './header-dropdown.less';
  .ant-pro-header-account-name {
    vertical-align: unset;
  }
  .ant-pro-header-account-avatar {
    margin: 12px 8px 12px 0;
    color: @primary-color;
    vertical-align: top;
    background: hsla(0, 0%, 100%, 0.85);
  }
}
</style>
