<template>
    <div>
        <el-form
            :model="addAndEditForm"
            :rules="addAndEditRules"
            ref="addAndEditFormRef"
            label-width="0px"
            label-position="top"
        >
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="addAndEditForm.name" placeholder="请输入姓名" clearable> </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="身份证号" prop="idCard">
                        <el-input v-model="addAndEditForm.idCard" placeholder="请输入身份证号" clearable> </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <div style="display: flex; align-items: center; padding: 8px 0">
                <div> 公司业绩 </div>
                <el-button icon="el-icon-circle-plus" type="text">添加</el-button>
            </div>

            <el-table stripe style="width: 100%">
                <el-table-column label="序号" width="55" type="index" />
                <el-table-column align="center" label="项目名称" show-overflow-tooltip />
                <el-table-column align="center" label="电压等级" show-overflow-tooltip />
                <el-table-column align="center" label="变电站座数" show-overflow-tooltip />
                <el-table-column align="center" label="线路建设规模(折单公里)" show-overflow-tooltip />
                <el-table-column align="center" label="竣工日期" show-overflow-tooltip />
                <el-table-column align="center" label="承包范围" show-overflow-tooltip />
                <el-table-column align="center" label="业主单位" show-overflow-tooltip />
                <el-table-column align="center" label="业主单位联系方式" show-overflow-tooltip />
                <el-table-column align="center" label="操作" show-overflow-tooltip />
            </el-table>

            <div style="display: flex; align-items: center; padding: 8px 0">
                <div> 公司关键人员 </div>
                <el-button icon="el-icon-circle-plus" type="text">添加</el-button>
            </div>

            <el-table stripe style="width: 100%">
                <el-table-column label="序号" width="55" type="index" />
                <el-table-column align="center" label="姓名" show-overflow-tooltip />
                <el-table-column align="center" label="职称" show-overflow-tooltip />
                <el-table-column align="center" label="职业资格证书/身份证" show-overflow-tooltip />
                <el-table-column align="center" label="在本施工队伍中的职责分工" show-overflow-tooltip />
                <el-table-column align="center" label="计划入场时间" show-overflow-tooltip />
                <el-table-column align="center" label="计划退场时间" show-overflow-tooltip />
                <el-table-column align="center" label="近年同类工程业绩" show-overflow-tooltip />
                <el-table-column align="center" label="操作" show-overflow-tooltip />
            </el-table>
            <div style="display: flex; align-items: center; padding: 8px 0">
                <div> 公司其他人员 </div>
                <el-button icon="el-icon-circle-plus" type="text">添加</el-button>
            </div>

            <el-table stripe style="width: 100%">
                <el-table-column label="序号" width="55" type="index" />
                <el-table-column align="center" label="在本次标书中的职务" show-overflow-tooltip />
                <el-table-column align="center" label="姓名" show-overflow-tooltip />
                <el-table-column align="center" label="职称" show-overflow-tooltip />
                <el-table-column align="center" label="证书名称" show-overflow-tooltip />
                <el-table-column align="center" label="级别" show-overflow-tooltip />
                <el-table-column align="center" label="证号" show-overflow-tooltip />
                <el-table-column align="center" label="专业" show-overflow-tooltip />
                <el-table-column align="center" label="操作" show-overflow-tooltip />
            </el-table>
            <div style="display: flex; align-items: center; padding: 8px 0">
                <div> 分包商 </div>
                <el-button icon="el-icon-circle-plus" type="text">添加</el-button>
            </div>

            <el-table stripe style="width: 100%">
                <el-table-column label="序号" width="55" type="index" />
                <el-table-column align="center" label="项目名称" show-overflow-tooltip />
                <el-table-column align="center" label="电压" show-overflow-tooltip />
                <el-table-column align="center" label="时间" show-overflow-tooltip />
            </el-table>

            <el-form-item>
                <el-row style="text-align: right; border-top: 1px solid #e5e5e5; padding-top: 10px">
                    <el-button size="mini" @click="onCancel">取消</el-button>
                    <el-button type="primary" size="mini" @click="onConfirm">确定</el-button>
                </el-row>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import UploadImg from '@/components/UploadImg'
export default {
    components: {
        UploadImg,
    },
    props: {
        // 1新增 2详情 3编辑
        formType: {
            type: Number,
            default: 1,
        },
    },
    data() {
        return {
            uploadOuterVisible: false,
            addAndEditForm: {
                name: '', // 姓名
                idCard: '', // 身份证号码
                age: '', // 年龄
                idCardFront: '', //身份证正面
                idCardBack: '', // 身份证反面
                qualification: '', // 学历
                endTime: '', // 毕业日期
                title: '', // 职称
                position: '', // 职务
                major: '', // 专业
                credentials: '', // 资格证书
                code: '', // 证书编码
                level: '', // 级别
                pensionInsurance: '', // 养老保险
                credentialsImg: '', // 上述资格证书照片
                otherImg: '', // 其他资质照片
            },
            addAndEditRules: {
                name: [
                    {
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur',
                    },
                ],
                idCard: [
                    {
                        required: true,
                        message: '请输入身份证号码',
                        trigger: 'blur',
                    },
                ],
                age: [
                    {
                        required: true,
                        message: '请输入年龄',
                        trigger: 'blur',
                    },
                ],
                qualification: [
                    {
                        required: true,
                        message: '请输入学历',
                        trigger: 'blur',
                    },
                ],
                endTime: [
                    {
                        required: true,
                        message: '请输入毕业日期',
                        trigger: 'blur',
                    },
                ],
                title: [
                    {
                        required: true,
                        message: '请输入职称',
                        trigger: 'blur',
                    },
                ],
                credentials: [
                    {
                        required: true,
                        message: '请输入资格证书',
                        trigger: 'blur',
                    },
                ],
                code: [
                    {
                        required: true,
                        message: '请输入证书编码',
                        trigger: 'blur',
                    },
                ],
                pensionInsurance: [
                    {
                        required: true,
                        message: '请选择养老保险',
                        trigger: 'blur',
                    },
                ],
                credentialsImg: [
                    {
                        required: true,
                        message: '请上传上述资格证书照片',
                        trigger: 'blur',
                    },
                ],
                idCardFront: [
                    {
                        required: true,
                        message: '请上传身份证正面照片',
                        trigger: 'blur',
                    },
                ],
                idCardBack: [
                    {
                        required: true,
                        message: '请上传身份证反面照片',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    methods: {
        onCancel() {
            this.$emit('closeDialogOuter')
        },
        onConfirm() {
            this.$refs.addAndEditFormRef.validate((valid) => {
                if (valid) {
                    console.log(this.addAndEditForm)
                }
            })
        },
    },
}
</script>
