<!--
 * @Author: your name
 * @Date: 2020-12-01 16:37:56
 * @LastEditTime: 2021-06-01 18:40:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \precise_delivery_distribution_front\src\layout\components\AppHeaderUser.vue
-->
<template>
  <a-popover trigger="click">
    <template v-slot:content>
      <div class="setting-group">
        <p class="cursor" @click="changePwd"><LockOutlined />修改密码</p>
        <p class="cursor" @click="onLogout"><PoweroffOutlined />安全退出</p>
      </div>
    </template>
    <div class="user-wrap">
      <UserOutlined />
      <p class="user">推广员：{{ name }}</p>
      <CaretDownFilled />
    </div>
  </a-popover>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import {
  UserOutlined,
  CaretDownFilled,
  PoweroffOutlined,
  LockOutlined,
} from "@ant-design/icons-vue";
import useApp from "@/hooks/useApp";
import { logout } from "@/api";
import { MutationType } from "@/store/modules/app/_type";

const AppHeaderUser = defineComponent({
  components: {
    UserOutlined,
    CaretDownFilled,
    PoweroffOutlined,
    LockOutlined,
  },
  props: {
    name: String,
  },
  setup() {
    const { store, router } = useApp();

    const onLogout = async () => {
      try {
        await logout();
        store.commit(MutationType.setUser, {});
        router.replace("/login");
      } catch (error) {
        console.log("logout error");
      }
    };
    const changePwd = () => {
      router.replace("/forgetpwd");
    };

    return { onLogout, changePwd };
  },
});

export default AppHeaderUser;
</script>
<style lang="less" scoped>
.setting-group {
  p {
    line-height: 30px;
  }
}
</style>
