<template>
  <el-descriptions
    title="个人信息"
    style="padding: 15px"
    border
    size="large"
    :column="2"
    v-loading="loading"
    element-loading-text="正在初始化数据...">
    <el-descriptions-item>
      <template #label>
        <el-icon>
          <User />
        </el-icon>
        姓名 </template
      >{{ user.name }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <el-icon>
          <Female v-if="user.sex === 0 || user.sex === '女'" />
          <Male v-if="user.sex === 1 || user.sex === '男'" />
        </el-icon>
        性别 </template
      >{{ user.sex }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <el-icon>
          <Iphone />
        </el-icon>
        电话 </template
      >{{ user.phone }}</el-descriptions-item
    >
    <el-descriptions-item>
      <template #label>
        <el-icon> <Avatar /> </el-icon>状态
      </template>
      <el-tag type="success" v-if="user.userState || user.userState === 1"
        >正常</el-tag
      >
      <el-tag type="danger" v-if="!user.userState || user.userState === 0"
        >未启用</el-tag
      >
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <el-icon> <UserFilled /> </el-icon>角色
      </template>
      <el-tag>
        {{
          roles.find((item) => Number(item.id) === Number(user.role))?.name ||
          "无"
        }}
      </el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <el-icon> <TakeawayBox /> </el-icon>生日 </template
      >{{ dayjs(user.birthday).format("YYYYH-MM-DD") }}</el-descriptions-item
    >
    <!-- <el-descriptions-item label="年龄">{{ user.age }}</el-descriptions-item> -->
    <el-descriptions-item>
      <template #label>
        <el-icon> <OfficeBuilding /> </el-icon>所在省市区
      </template>
      {{ user.province + "/" + user.city + "/" + user.area }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <el-icon><LocationInformation /></el-icon>详细地址
      </template>
      {{ user.address }}
    </el-descriptions-item>
  </el-descriptions>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { userType } from "@/types/user";
import dayjs from "dayjs";
import { roleDataList } from "@/lib/api/publicApiList";
import { roleType } from "@/types/role";
const props = defineProps<{
  data: userType;
}>();
const user = props.data;
let roles = ref<roleType[]>([]);
let loading = ref(true);

onMounted(async () => {
  roles.value = await roleDataList();
  loading.value = false;
});
</script>
<style lang="scss" scoped>
:deep(.el-descriptions__label) {
  display: flex;
  align-items: center;
  .el-icon {
    margin: 0 5px;
  }
}
</style>
