<template>
  <el-drawer v-model="visible" title="查看用户" width="500px">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="ID">{{ detail.id || "-" }}</el-descriptions-item>
      <el-descriptions-item label="账号">{{ detail.account || "-" }}</el-descriptions-item>
      <el-descriptions-item label="姓名">{{ detail.name || "-" }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{ genderText }}</el-descriptions-item>
      <el-descriptions-item label="生日">{{ detail.birthday || "-" }}</el-descriptions-item>
      <el-descriptions-item label="隶属单位">{{ detail.affiliate_unit_name || detail.affiliate_unit || "-" }}</el-descriptions-item>
      <el-descriptions-item label="部门">{{ detail.department_name || detail.department || "-" }}</el-descriptions-item>
      <el-descriptions-item label="职位">{{ detail.position || "-" }}</el-descriptions-item>
      <el-descriptions-item label="学历">{{ detail.education || "-" }}</el-descriptions-item>
      <el-descriptions-item label="民族">{{ detail.nation || "-" }}</el-descriptions-item>
      <el-descriptions-item label="手机">{{ detail.phone || "-" }}</el-descriptions-item>
      <el-descriptions-item label="微信">{{ detail.wechat || "-" }}</el-descriptions-item>
      <el-descriptions-item label="邮箱">{{ detail.email || "-" }}</el-descriptions-item>
      <el-descriptions-item label="家庭住址">{{ detail.home_address || "-" }}</el-descriptions-item>
      <el-descriptions-item label="账号状态">
        <el-tag :type="statusValue === 1 ? 'success' : 'danger'">
          {{ statusText }}
        </el-tag>
      </el-descriptions-item>
    </el-descriptions>

    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { ElMessage } from "element-plus";
import { getEmployeeDetail } from "@/api/erp";

const visible = ref(false);
const detail = ref<any>({});

const genderValue = computed(() => {
  const value = detail.value.sex ?? detail.value.gender ?? 0;
  return Number(value);
});

const genderText = computed(() => {
  if (genderValue.value === 1) {
    return "男";
  }
  if (genderValue.value === 2) {
    return "女";
  }
  return "未知";
});

const statusValue = computed(() => {
  const value = detail.value.account_status ?? detail.value.status ?? 0;
  return Number(value);
});

const statusText = computed(() => {
  if (statusValue.value === 1) {
    return "启用";
  }
  if (statusValue.value === 2) {
    return "离职";
  }
  return "禁用";
});

const loadUserData = async (user: any) => {
  try {
    const userId = typeof user === "number" ? user : user?.id || user?.userId;
    if (!userId) {
      throw new Error("未提供有效的用户 ID");
    }

    const res = await getEmployeeDetail(userId);
    detail.value = res.data || res || {};
  } catch (e: any) {
    const errorMsg = e?.response?.data?.message || e?.message || "加载用户失败";
    ElMessage.error(errorMsg);
    throw e;
  }
};

const openView = async (user: any) => {
  visible.value = true;
  await loadUserData(user);
};

defineExpose({
  loadUserData,
  openView,
  open: openView,
});
</script>

<style lang="less" scoped></style>
