<template>
  <div class="user-info">
    <div class="flex justify-between padding-lg solid-bottom">
      <div class="flex justify-between flex-direction">
        <div class="text-bold text-xl text-el-primary">
          {{ userInfo.nickName }}
        </div>
        <div>{{ userInfo.dept ? userInfo.dept.deptName : "暂无" }}</div>
      </div>
      <div>
        <el-image
          class="pointer radius"
          style="width: 60px; height: 60px"
          :src="avatar"
          :preview-src-list="[avatar]"
          fit="cover"
        />
      </div>
    </div>
    <div class="padding-lg">
      <el-descriptions direction="vertical" :column="1">
        <el-descriptions-item label="姓名">
          {{ userInfo.nickName || "暂无" }}
        </el-descriptions-item>
        <el-descriptions-item label="电话">
          {{ userInfo.phonenumber || "暂无" }}
        </el-descriptions-item>
        <el-descriptions-item label="邮箱">
          {{ userInfo.email || "暂无" }}
        </el-descriptions-item>
        <el-descriptions-item label="部门">
          {{ userInfo.dept ? userInfo.dept.deptName : "暂无" }}
        </el-descriptions-item>
        <!-- <el-descriptions-item label="职位">asd</el-descriptions-item> -->
      </el-descriptions>
      <!-- {{userInfo}} -->
    </div>
  </div>
</template>

<script setup>
import defAva from "@/assets/images/profile.jpg";

const prop = defineProps({
  userInfo: {
    type: Object,
    default: { dept: {} },
  },
});
const { userInfo } = toRefs(prop);
const avatar =
  userInfo.value.avatar == "" || userInfo.value.avatar == null
    ? defAva
    : import.meta.env.VITE_APP_BASE_API + userInfo.value.avatar;
</script>
