<template>
    <div class="pl-30 pt-30 pb-30">
        <div class="info-out">
            <img :src="props.info?.avatar" alt="" class="av-img" />
            <div class="info">
                <div>{{ props.info?.name }}</div>
                <div>
                    <span v-for="(item, index) in props.info?.personType.length" :key="index">{{ selectDictLabel(dm_person_type, item) }}</span>
                </div>
                <div>专业品种：{{ props.info?.variety }}</div>
                <div>工作单位：{{ props.info?.workUnit }}</div>
                <div>技术职称/职务：{{ props.info?.post }}</div>
            </div>
        </div>
        <div class="flex-container">
            <el-descriptions :column="4">
                <el-descriptions-item label="性别:">{{ selectDictLabel(sys_sex_type, props.info?.sex) || '-' }}</el-descriptions-item>
                <el-descriptions-item label="民族:">{{ props.info?.nation || '-'}}</el-descriptions-item>
                <el-descriptions-item label="身份证号:">{{ props.info?.idCard || '-'}}</el-descriptions-item>
                <el-descriptions-item label="政治面貌:">{{ props.info?.politicalStatus|| '-' }}</el-descriptions-item>
                <el-descriptions-item label="最高学历:">{{ selectDictLabel(dm_educational_type,props.info?.educationalBg )|| '-' }}</el-descriptions-item>
                <el-descriptions-item label="所学专业:">{{ props.info?.major|| '-' }}</el-descriptions-item>
                <el-descriptions-item label="从事专业:">{{ props.info?.job|| '-' }}</el-descriptions-item>
                <el-descriptions-item label="通讯地址:">{{ props.info?.address|| '-' }}</el-descriptions-item>
                <el-descriptions-item label="联系电话:">{{ props.info?.phone || '-'}}</el-descriptions-item>
                <el-descriptions-item label="传真电话:">{{ props.info?.faxPhone || '-'}}</el-descriptions-item>
                <el-descriptions-item label="邮箱:">{{ props.info?.email || '-'}}</el-descriptions-item>
                <el-descriptions-item label="微信号:">{{ props.info?.wxNum || '-'}}</el-descriptions-item>
                <el-descriptions-item label="岗位状态:">{{ selectDictLabel(dm_position_status,props.info?.status) || '-' }}</el-descriptions-item>
                <el-descriptions-item label="创建人:">{{ props.info?.createByName|| '-' }}</el-descriptions-item>
                <el-descriptions-item label="创建时间:">{{ props.info?.createTime || '-'}}</el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="jianjie">
            <div class="f-s-14 c-#303133 mb-10">简介：</div>
            <div v-html="props.info?.brief"></div>
        </div>

        <div class="pt-30">
            <div v-if="props.info?.attachment" class="flex1 pt-20">
                <div class="c-333 mb-10">附件:</div>
                <FileLook v-model="props.info.attachment" :span="6"></FileLook>
            </div>
            <div v-if="info?.images" class="flex1 pt-20">
                <div class="c-333 mb-10">图片:</div>
                <div class="d-flex flex-w">
                    <template v-for="(item, index) in info?.images.split(',')" :key="index">
                        <ImagePreview class="mr-20" :src="item" width="120px" height="120px"></ImagePreview>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup name="ExpertInfo" lang="ts">
import {ref} from 'vue'
import { FileLook } from '@/views/models';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const dict = proxy?.useDict('dm_person_type',  'sys_sex_type', 'dm_position_status','dm_educational_type');
const { dm_person_type,  sys_sex_type,dm_position_status,dm_educational_type } = toRefs<any>(dict);
const props = defineProps({
  info: {
    type: Object, // 指定类型
    required: true, // 是否必传
    default: () => ({}) // 默认值
  }
})
const formatBytes = (bytes, decimals = 2)=> {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));

  // Handle Bytes case separately to avoid decimals
  if (i === 0) return `${bytes} ${sizes[i]}`;

  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(decimals))} ${sizes[i]}`;
}
</script>
<style scoped>
.av-img{
    height: 150px;
    width: 150px;
}
.info-out {
    display: flex;
    margin-bottom: 30px;
}
.info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 20px;
}
.info span{
    border-style: solid;
    border-width: 1px;
    border-color: var(--el-color-primary);
    border-radius: 4px;
    margin-right: 10px;
    color: var(--el-color-primary);
    padding: 3px;
    background-color: #59a6f645;
}
.jianjie{
    /* border: 1px solid; */
}
.jianjie-fist{
 background-color: aliceblue;
 height: 30px;
 padding: 4px;
 border-bottom: 1px solid;
}
.fujian{
    border: 1px solid aliceblue;
    width: 400px;
    height: 70px;
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    cursor: pointer;
}
.file{
    display: flex;
    align-items: stretch;
    flex-direction: column;
    justify-content: space-around;
}
.down{
    background-color: var(--el-color-primary);
    width: 50px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}
</style>
