<script setup>
import { useUserStore } from "@/store/user.js";
import { ref } from "vue";
import { info, logout } from "@/api/user.js";
import { ElMessage } from "element-plus";
import { useRouter } from 'vue-router'

const userStore = useUserStore();

const merInfo = ref({});
merInfo.value = userStore.userInfo;

const router = useRouter();
const onLogout = () => {
    logout().then(() => {
        userStore.setUserInfo({});
        userStore.setToken("");
        router.push("/login");
    }).catch(() => {
        ElMessage({
            message: "退出失败",
            type: "error",
        })
    });
}

</script>

<template>
  <div class="my-card">
    <div class="card-header">
      <div style="width: 4.5rem;">
        <el-image style="height: 2.5rem;width: 2.5rem;margin: 0 auto;"
          src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/12c93202404101530591311.png"
        ></el-image>
      </div>
      <div class="card-title">里海收银系统</div>
    </div>
    <div class="card-body">
      <el-dropdown trigger="hover">
        <div class="el-dropdown-link">
          <el-avatar :src="merInfo.avatar" icon="user-filled"/>
          <div class="info">
            <div>
              {{ merInfo.nickname }}
            </div>
            <div>{{ merInfo.account }}</div>
          </div>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="onLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<style scoped lang="scss">
.my-card {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .card-header {
    display: flex;
    align-items: center;
    .card-title {
      font-size: 1.6rem;
    }
  }
}
.el-dropdown-link{
    width: auto;
    display: flex;
    color: #fff;
    align-items: center;
    .info{
        margin: 0 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100%;
    }
}
.el-dropdown{
    border: none;
}
</style>
