<template>
    <div>
        <el-form
            ref="login"
            label-width="0px"
            label-position="top"
            :model="addAndEditForm"
            :rules="addAndEditRules"
            :disabled="formType === 2"
        >
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="所属分包商" prop="proName">
                        <el-input v-model="addAndEditForm.proName" placeholder="请输入所属分包商" clearable> </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="项目名称(按合同)" prop="level">
                        <el-input v-model="addAndEditForm.level" placeholder="请输入项目名称" clearable> </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="项目建设单位" prop="startTime">
                        <el-input v-model="addAndEditForm.startTime" placeholder="请输入项目建设单位" clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="开竣工日期" prop="endTime">
                        <el-input v-model="addAndEditForm.endTime" placeholder="请输入工程名称" clearable> </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同身份" prop="num">
                        <el-input v-model="addAndEditForm.num" placeholder="请输入工程名称" clearable> </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="分包商合同额(万元)" prop="scale">
                        <el-input v-model="addAndEditForm.scale" placeholder="请输入分包商合同额" clearable> </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

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

        <el-table :data="addTableList" stripe style="width: 100%">
            <el-table-column label="序号" width="55" type="index" />
            <el-table-column align="center" label="担任职务" show-overflow-tooltip>
                <template slot-scope="{ row }">
                    <el-input v-model="row.zhiW" placeholder="请输入职务" clearable />
                </template>
            </el-table-column>
            <el-table-column align="center" label="姓名">
                <template slot-scope="{ row }">
                    <el-select v-model="row.name" clearable>
                        <el-option label="张三" value="1" />
                        <el-option label="李四" value="2" />
                        <el-option label="王五" value="3" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="zhiW" label="身份证号" show-overflow-tooltip />
            <!-- <el-table-column align="center" prop="zhiW" label="电话" show-overflow-tooltip /> -->
            <el-table-column align="center" label="工作内容" show-overflow-tooltip>
                <template slot-scope="{ row }">
                    <el-input v-model="row.content" placeholder="请输入工作内容" clearable />
                </template>
            </el-table-column>
            <el-table-column align="center" prop="zhiW" label="业绩证明材料" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-button @click="uploadOuterVisible = true"> 上传 </el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        style="color: #f56c6c"
                        icon="el-icon-delete-solid"
                        @click="onHandleDelete(scope)"
                    />
                </template>
            </el-table-column>
        </el-table>

        <div style="display: flex; align-items: center; padding: 8px 0">
            <div style="margin-right: 5px; color: #f56c6c">*</div>
            <div> 合同关键页 </div>
        </div>

        <UploadImg
            :limit="4"
            :file-size="10"
            :file-list="fileList"
            :file-type="['jpg', 'png']"
            :upload-file-url="uploadFileUrl"
            @handleSuccess="handleSuccess"
        />

        <el-dialog
            title="上传"
            width="40%"
            :visible.sync="uploadOuterVisible"
            v-if="uploadOuterVisible"
            :before-close="
                () => {
                    uploadOuterVisible = false
                }
            "
            append-to-body
        >
            <div class="upload-title">
                <span> 证明材料 </span>
                最多上传4张，仅支持JPG、PNG格式图片
            </div>
            <UploadImg
                :limit="4"
                :file-size="10"
                :file-list="fileList"
                :file-type="['jpg', 'png']"
                :upload-file-url="uploadFileUrl"
                @handleSuccess="handleSuccess"
            />
        </el-dialog>
    </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,
            uploadFileUrl: process.env.VUE_APP_BASE_API + '/file/upload',
            addAndEditForm: {
                proName: '',
                level: '',
                startTime: [],
                endTime: '',
                num: '',
                scale: '',
                fw: '',
                unit: '',
                unitPhone: '',
            },
            addAndEditRules: {
                proName: [
                    {
                        required: true,
                        message: '请输入输工程名称',
                        trigger: 'blur',
                    },
                ],
                level: [
                    {
                        required: true,
                        message: '请输入电压等级',
                        trigger: 'blur',
                    },
                ],
                startTime: [
                    {
                        required: true,
                        message: '请选择起止时间',
                        trigger: 'blur',
                    },
                ],
                endTime: [
                    {
                        required: true,
                        message: '请选择竣工时间',
                        trigger: 'blur',
                    },
                ],
                fw: [
                    {
                        required: true,
                        message: '请输入承包范围',
                        trigger: 'blur',
                    },
                ],
                unit: [
                    {
                        required: true,
                        message: '请输入业主单位',
                        trigger: 'blur',
                    },
                ],
                unitPhone: [
                    {
                        required: true,
                        message: '请输入业主单位联系方式',
                        trigger: 'blur',
                    },
                ],
            },
            addTableList: [],
            fileList: [],
        }
    },
    methods: {
        onHandleAdd() {
            this.addTableList.push({
                zhiW: '',
                name: '',
                content: '',
            })
        },
        onHandleDelete(row) {
            this.addTableList.splice(row.$index, 1)
        },
        handleSuccess(res) {
            // this.fileList.push(res)
            console.log(res, '---')
        },
    },
}
</script>

<style lang="scss" scoped>
.upload-title {
    margin-bottom: 10px;
    color: #999;
    font-size: 14px;
    span {
        color: #333;
        font-size: 16px;
    }
}
</style>
