<template>
  <div class="r-6">
    <div class="header">
      <el-page-header @back="jumpBack">
        <template #content>
          <span class="text-large font-600 mr-3"> 退休/离职详情 </span>
        </template>
      </el-page-header>
    </div>

    <div class="content" v-loading="loading">

      <div class="item">
        <el-form-item label="出库编号：" :label-width="labelWidth">
          <span>{{ dataObj.id }}</span>
        </el-form-item>
        <el-form-item label="专家姓名：" :label-width="labelWidth">
          <span>{{ dataObj.expertName }}</span>
        </el-form-item>
        <el-form-item label="联系方式：" :label-width="labelWidth">
          <span>{{ dataObj.contact }}</span>
        </el-form-item>
        <el-form-item label="身份证号：" :label-width="labelWidth">
          <span>{{ dataObj.idCard }}</span>
        </el-form-item>
        <el-form-item label="工作单位：" :label-width="labelWidth">
          <span>{{ dataObj.workUnit }}</span>
        </el-form-item>
        <el-form-item label="专家状态：" :label-width="labelWidth">
          <span>{{ expert_status[parseInt(dataObj.expertStatus)]?.label }}</span>
        </el-form-item>
        <el-form-item label="专家退休/离职时间：" :label-width="labelWidth">
          <span>{{ dataObj.retirementTime }}</span>
        </el-form-item>
        <el-form-item label="退休/离职原因：" :label-width="labelWidth">
          <span>{{ dataObj.reason }}</span>
        </el-form-item>

      </div>

    </div>
  </div>
</template>

<script lang="ts" setup>

import { getRetirementRecords } from '@/api/expert/retirementRecords';

const labelWidth = ref('10vw');
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { expert_status } = toRefs<any>(proxy?.useDict('expert_status'));
const _id = computed(() => proxy.$route.query.id);
const router = useRouter();
const jumpBack = () => {
  router.back();
};
const loading = ref(false);
const dataObj = ref({
  id:undefined,
  expertName:undefined,
  contact:undefined,
  idCard:undefined,
  workUnit:undefined,
  expertStatus:undefined,
  retirementTime:undefined,
  reason:undefined,
});
const getData = async ()=>{
  loading.value = true;
  const res = await getRetirementRecords(_id.value.toString()).finally(()=>{loading.value = false});
  dataObj.value = res.data;


}

onActivated(()=>{
  getData();
})

onMounted(()=>{
  getData();
})
</script>

<style lang="scss" scoped>
.header {
  margin: 1vh 0 1vh 2vw;

}
.content{
  margin-top: 35px;
  margin-left: 20px;
}
:deep(.el-form-item--default){
  // margin-bottom: 1vh;
}
</style>