<template>
  <el-dialog title="调动记录详情" :visible.sync="visibleProxy" width="900px" append-to-body>
    <div class="detail-container">
      <el-divider content-position="left">基本信息</el-divider>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="员工姓名">{{ detail.staffName || "-" }}</el-descriptions-item>
        <el-descriptions-item label="调动类型">{{ detail.transferType || "-" }}</el-descriptions-item>
        <el-descriptions-item label="调动子类型">{{ detail.transferSubType || "-" }}</el-descriptions-item>
        <el-descriptions-item label="调动日期">{{ formatDate(detail.transferDate) }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">调动前信息</el-divider>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="调动前部门">{{ detail.deptNameBefore || "-" }}</el-descriptions-item>
        <el-descriptions-item label="调动前职级">{{ detail.gradeBefore || "-" }}</el-descriptions-item>
        <el-descriptions-item label="调动前岗位">{{ detail.positionBefore || "-" }}</el-descriptions-item>
        <el-descriptions-item label="调动前薪酬等级">{{ detail.salaryLevelBefore || "-" }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">调动后信息</el-divider>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="调动后部门">{{ detail.deptNameAfter || "-" }}</el-descriptions-item>
        <el-descriptions-item label="调动后职级">{{ detail.gradeAfter || "-" }}</el-descriptions-item>
        <el-descriptions-item label="调动后岗位">{{ detail.positionAfter || "-" }}</el-descriptions-item>
        <el-descriptions-item label="调动后薪酬等级">{{ detail.salaryLevelAfter || "-" }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">审计信息</el-divider>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="创建人">{{ detail.createdBy || "-" }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatDate(detail.createTime) }}</el-descriptions-item>
        <el-descriptions-item label="更新人">{{ detail.updatedBy || "-" }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ formatDate(detail.updateTime) }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visibleProxy = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "ExtendedTransferDetailDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    detail: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    visibleProxy: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit("update:visible", value);
      },
    },
  },
  methods: {
    formatDate(value) {
      return value ? this.parseTime(value) : "-";
    },
  },
};
</script>
