<template>
  <el-divider class="avatar-divider" direction="vertical" />
  <!-- <el-dropdown trigger="click"> -->
  <div class="avatar flx-center" :class="size" @click="openDialog('AvatarDrawerRef')">
    <AvatarIcon :size="size" :username="username" @click="openDialog('AvatarDrawerRef')"></AvatarIcon>
    <!-- <i class="iconfont iconuser-circle toolBar-icon"></i> -->
    <div class="flx-col ml-4">
      <!-- <span class="username text-body-r">{{ username }}</span> -->
      <span class="usercode text-f-c text-ellipsis-one">{{ usercode }}</span>
    </div>
  </div>
  <!-- <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="openDialog('infoRef')">
          <div class="avatar flx-center" :class="size">
            <i class="iconfont iconuser-circle toolBar-icon"></i>
            <div class="flx-col">
              <span class="username text-body-r">{{ username }}</span>
              <span class="usercode text-f-c text-ellipsis-one" v-if="size != 'small'">{{ usercode }}</span>
            </div>
          </div>
          <el-icon><User /></el-icon>{{ $t("header.personalData") }}
        </el-dropdown-item>
        <el-dropdown-item @click="openDialog('infoRef')" disabled>
          <el-icon><User /></el-icon>{{ $t("header.personalData") }}
        </el-dropdown-item>
        <el-dropdown-item @click="openDialog('passwordRef')" disabled>
          <el-icon><Edit /></el-icon>{{ $t("header.changePassword") }}
        </el-dropdown-item>
        <el-dropdown-item @click="logout" divided>
          <el-icon><SwitchButton /></el-icon>{{ $t("header.logout") }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown> -->
  <!-- infoDialog -->
  <InfoDialog ref="infoRef"></InfoDialog>
  <!-- passwordDialog -->
  <PasswordDialog ref="passwordRef"></PasswordDialog>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/modules/user";
import { ElMessageBox, ElMessage } from "element-plus";
import InfoDialog from "./InfoDialog.vue";
import PasswordDialog from "./PasswordDialog.vue";
import { useI18n } from "vue-i18n";
import { SwitchButton, User, Edit } from "@element-plus/icons-vue";
import mittBus from "@/utils/mittBus";
import { MittEnum } from "@/enums/mittEnum";
import AvatarIcon from "./AvatarIcon.vue";

interface AvatarProp {
  size?: "small" | "default" | "large";
  onlyIcon: boolean;
}
const props = withDefaults(defineProps<AvatarProp>(), {
  size: "default",
  onlyIcon: false
});

const { t } = useI18n();

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

const { username, usercode } = userStore.userInfo;

// 打开修改密码和个人信息弹窗
const infoRef = ref<InstanceType<typeof InfoDialog> | null>(null);
const passwordRef = ref<InstanceType<typeof PasswordDialog> | null>(null);
const openDialog = (ref: string) => {
  if (ref == "infoRef") infoRef.value?.openDialog();
  if (ref == "passwordRef") passwordRef.value?.openDialog();
  if (ref == "AvatarDrawerRef") mittBus.emit(MittEnum.AvatarDrawer);
};
</script>

<style scoped lang="scss">
.avatar-divider {
  // margin-left: 10px;
  // margin-right: 20px;
  margin-left: 0;
  margin-right: 10px;
}
.avatar {
  // margin: 0 8px;
  // padding: 0 16px;
  // margin-left: 20px;
  // width: 40px;
  // height: 40px;
  // overflow: hidden;
  cursor: pointer;
  // border-radius: 20px;
  // background-color: $color-gray-3;
  // img {
  //   width: 100%;
  //   height: 100%;
  // }
  // &:hover {
  //   background-color: $color-gray-5;
  // }
  .iconfont {
    font-size: 18px;
    margin-right: 8px;
  }
  .usercode {
    line-height: unset;
    color: $color-white;
  }

  &.small {
    padding: 0 10px;
    height: 34px;

    .iconfont {
      font-size: 18px;
      margin-right: 4px;
    }
  }
}
</style>
