<script setup lang="ts">
import { toRefs } from 'vue';

import { Avatar, Descriptions, Space } from 'ant-design-vue';

// const fileList = ref([
//   {
//     uid: '-1',
//     name: 'image.png',
//     status: 'done',
//     url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
//   },
// ]);

const props = defineProps({
  userInfo: {
    type: Object,
    default: () => ({}),
  },
  permissions: {
    type: String,
    default: '',
  },
});
const { userInfo, permissions } = toRefs(props);
</script>

<template>
  <Space :size="64" class="p-4">
    <!-- 用户头像上传组件 -->
    <!--    <Upload-->
    <!--      list-type="picture-card"-->
    <!--      :file-list="fileList"-->
    <!--      :show-upload-button="false"-->
    <!--    >-->
    <!--      &lt;!&ndash; 自定义显示头像 &ndash;&gt;-->
    <!--    </Upload>-->
    <Avatar :size="64">
      {{ userInfo.username }}
    </Avatar>

    <!-- 用户信息展示 -->
    <Descriptions title="" size="middle">
      <Descriptions.Item label="用户名">
        {{ userInfo.username }}
      </Descriptions.Item>
      <Descriptions.Item label="邮箱">{{ userInfo.email }}</Descriptions.Item>
      <Descriptions.Item label="角色">{{ permissions }}</Descriptions.Item>
      <Descriptions.Item label="部门">
        {{ userInfo.dept?.name }}
      </Descriptions.Item>
      <Descriptions.Item label="联系电话">
        {{ userInfo.phone }}
      </Descriptions.Item>
    </Descriptions>
  </Space>
</template>

<style scoped>
/* 可以添加一些样式让组件更美观 */
.ant-upload-list-picture-card-container img {
  object-fit: cover;
}
</style>
