<template>
  <el-dropdown trigger="click">
    <div class="user-data">
      <div class="user-icon"></div>
      <div class="user-name">
        欢迎 , {{ name }} <i class="el-icon-caret-bottom"></i>
      </div>
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item>修改密码</el-dropdown-item>
      <el-dropdown-item divided @click.native="logout"
        >退出登录</el-dropdown-item
      >
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  name: "userModel",
  props: {
    name: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    async logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            location.href = "/index";
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.user-data {
  display: flex;
  align-items: center;
  padding-top: 8px;
  cursor: pointer;
  .user-icon {
    height: 19px;
    width: 19px;
    border-radius: 50%;
    background: url("~@/assets/images/ui/user.png");
    background-size: 100% 100%;
    margin-right: 10px;
  }
  .user-name {
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Alibaba-PuHuiTi-Regular.otf";
  }
}
</style>
