<template>
    <div class="add-edit-dialog-container">
        <el-dialog
            title="详情"
            :visible.sync="visible"
            width="600px"
            :before-close="close"
            :close-on-click-modal="false"
        >
            <el-form :model="formData" ref="formData" label-width="90px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名:">
                            <span>{{ formData.name }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年龄:">
                            <span>{{ formData.age }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="性别:">
                            <span v-if="formData.gender === 1">男</span>
                            <span v-if="formData.gender === 2">女</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号:">
                            <span>{{ formData.mobile }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户id:">
                            <span>{{ formData.userId }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="身份证号:">
                            <span>{{ formData.idNumber }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="学历:">
                            <span v-if="formData.eduLevel === 1">小学</span>
                            <span v-if="formData.eduLevel === 2">初中</span>
                            <span v-if="formData.eduLevel === 3">中专</span>
                            <span v-if="formData.eduLevel === 4">高中</span>
                            <span v-if="formData.eduLevel === 5">大专</span>
                            <span v-if="formData.eduLevel === 6">本科</span>
                            <span v-if="formData.eduLevel === 7">硕士研究生</span>
                            <span v-if="formData.eduLevel === 8">博士研究生</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="专业:">
                            <span>{{ formData.professional }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="从业时长:">
                            <span>{{ formData.workDate }}</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="公司:">
                            <span>{{ formData.company }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="工作岗位:">
                            <span>{{ formData.job }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="常驻地点:">
                            <span>{{ formData.residentPlace }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="工作经历:">
                            <span>{{ formData.workExperience }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目经历:">
                            <span>{{ formData.projectExperience }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="专业技能证书:">
                            <span @click="imgOpen(formData.skillsCertificate)">
                                <el-image v-if="formData.skillsCertificate" :src="formData.skillsCertificate | pathPipe" style="width:100px;height:100px;cursor:pointer;"></el-image>
                                <span v-else>暂无图片</span>
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="其他证书:">
                            <span @click="imgOpen(formData.otherCertificates)">
                                <el-image v-if="formData.otherCertificates" :src="formData.otherCertificates | pathPipe" style="width:100px;height:100px;cursor:pointer;"></el-image>
                                <span v-else>暂无图片</span>
                            </span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="身份证照片:">
                            <span @click="imgOpen(formData.cardPicture)">
                            <el-image
                                v-if="formData.cardPicture"
                                style="width: 100px; height: 50px; cursor: pointer"
                                :src="formData.cardPicture"
                                fit="fit"
                            ></el-image>
                            <span v-else>暂无图片</span>
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="证书:">
                            <span @click="imgOpen(formData.degreeCertificate)">
                            <el-image
                                v-if="formData.degreeCertificate"
                                style="width: 100px; height: 50px; cursor: pointer"
                                :src="formData.degreeCertificate"
                                fit="fit"
                            ></el-image>
                            <span v-else>暂无图片</span>
                            </span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="擅长品牌:">
                            <span>{{ formData.proficiencyBrandName }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="擅长电气:">
                            <span>{{ formData.goodElectrical }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="擅长机械:">
                            <span>{{ formData.goodMechanical }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="创建时间:">
                            <span>{{ formData.createTime | formatTimePipe }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            formData: {},
            visible: false,
        };
    },
    methods: {
        open(data) {
            this.formData = Object.assign({}, data);
            this.visible = true;
        },
        close() {
            this.formData = {};
            this.visible = false;
        },
        imgOpen(imgs) {
            window.open(imgs);
        },
    },
};
</script>
<style lang="stylus" scoped>
.add-edit-dialog-container {
    ::v-deep .el-form-item {
        margin-bottom: 0;
    }

    .images {
        margin-right: 5px;
    }
}
</style>
