<template>
    <div>
        <el-form
            label-width="0px"
            label-position="top"
            ref="addAndEditFormRef"
            :model="addAndEditForm"
            :rules="addAndEditRules"
            :disabled="formType === 2"
        >
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="分包商名称" prop="subName">
                        <el-input
                            clearable
                            maxlength="30"
                            show-word-limit
                            placeholder="请输入分包商名称"
                            v-model="addAndEditForm.subName"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="公司地址" prop="address">
                        <el-input
                            clearable
                            maxlength="100"
                            type="textarea"
                            show-word-limit
                            :autosize="{ minRows: 1, maxRows: 4 }"
                            placeholder="请输入公司地址"
                            v-model="addAndEditForm.address"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="负责人" prop="userName">
                        <el-input
                            clearable
                            maxlength="10"
                            show-word-limit
                            placeholder="请输入负责人"
                            v-model="addAndEditForm.userName"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系方式" prop="userPhone">
                        <el-input
                            clearable
                            maxlength="11"
                            show-word-limit
                            placeholder="请输入联系方式"
                            v-model="addAndEditForm.userPhone"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item>
                        <template #label>
                            <span>公司资质</span>
                            <span style="color: #999; font-size: 12px">
                                (请上传公司营业执照、生产许可证以及其他相关资质证书图片、最多上传20张，仅支持jpg、png格式)
                            </span>
                        </template>
                        <UploadImg
                            :limit="20"
                            :file-size="10"
                            :multiple="true"
                            @deleteFile="deleteFile"
                            :file-type="['jpg', 'png', 'jpeg']"
                            :upload-file-url="uploadFileUrl"
                            :file-list.sync="addAndEditForm.fileList"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row style="text-align: right; border-top: 1px solid #e5e5e5; padding-top: 10px">
            <el-button @click="onCancel">{{ formType !== 2 ? '取消' : '关闭' }}</el-button>
            <el-button type="primary" @click="onConfirm" v-if="formType !== 2">确定</el-button>
        </el-row>
    </div>
</template>

<script>
import UploadImg from '@/components/UploadImg'
import { addSubManageAPI, editSubManageAPI } from '@/api/sub-manage/sub-manage'
import { deleteImgAPI } from '@/api/common'
export default {
    components: {
        UploadImg,
    },
    props: {
        // 1新增 2详情 3编辑
        formType: {
            type: Number,
            default: 1,
        },
        // 编辑行
        editRow: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            uploadOuterVisible: false,
            uploadFileUrl: process.env.VUE_APP_BASE_API + '/system/file/uploadFiles',
            addAndEditForm: {
                subName: '',
                address: '',
                userName: '',
                userPhone: '',
                fileList: [],
                id: '',
            },
            addAndEditRules: {
                subName: [
                    {
                        required: true,
                        message: '请输入分包商名称',
                        trigger: 'blur',
                    },
                ],
                userPhone: [
                    {
                        pattern: /^1[3-9]\d{9}$/,
                        message: '请输入正确的手机号码',
                        trigger: 'blur',
                    },
                ],
            },
            addTableList: [],
            fileList: [],
            deleteFileList: [],
        }
    },
    methods: {
        onCancel() {
            this.$emit('closeDialogOuter')
        },
        deleteFile(filePath) {
            this.deleteFileList.push(filePath)
        },
        deleteFileListFun() {
            const { fileList } = this.addAndEditForm
            const deleteFileList = []
            this.deleteFileList.forEach((item) => {
                if (item.isNew) {
                    deleteFileList.push(item.filepath)
                }
            })

            fileList.forEach((item) => {
                if (item.response && item.response.code === 200) {
                    const { data } = item.response
                    const { filePath } = data[0]

                    deleteFileList.push(filePath)
                }
            })

            if (deleteFileList.length > 0) {
                deleteImgAPI({ filePaths: deleteFileList.join(',') })
            }
        },
        onConfirm() {
            this.$refs.addAndEditFormRef.validate(async (valid) => {
                if (valid) {
                    // 组装参数
                    const { subName, address, userName, userPhone, fileList, id } = this.addAndEditForm

                    const tbFileSourceVoList = []
                    // fileType 1.身份证正面 2.身份证反面 3.资格证书照片 4.其他资质照片
                    if (fileList.length > 0) {
                        fileList.forEach((item) => {
                            if (item.response && item.response.code === 200) {
                                const { data } = item.response
                                const { fileSuffix, filePath, fileName } = data[0]
                                tbFileSourceVoList.push({
                                    fileSuffix,
                                    filePath,
                                    fileName,
                                    fileType: 1,
                                })
                            } else {
                                tbFileSourceVoList.push({
                                    fileSuffix: item.fileSuffix,
                                    filePath: item.filePath,
                                    fileName: item.fileName,
                                    fileType: 1,
                                })
                            }
                        })
                    }

                    const params = {
                        subName,
                        address,
                        userName,
                        userPhone,
                        tbFileSourceVoList,
                    }

                    if (this.formType === 3) {
                        params.id = id
                    }
                    const filePaths = this.deleteFileList.map((item) => item.filepath)

                    if (filePaths.length > 0) {
                        deleteImgAPI({ filePaths: filePaths.join(',') })
                    }
                    const API = this.formType === 1 ? addSubManageAPI : editSubManageAPI
                    const res = await API(params)
                    if (res.code === 200) {
                        this.$modal.msgSuccess(this.formType === 1 ? '新增成功' : '编辑成功')
                        this.$emit('closeDialogOuter', true)
                    }
                }
            })
        },
    },

    watch: {
        editRow: {
            handler(newVal) {
                if (newVal && Object.keys(newVal).length > 0) {
                    Object.assign(this.addAndEditForm, { ...newVal })
                    this.addAndEditForm.fileList = this.addAndEditForm.tbFileSourceVoList
                        .filter((item) => item.fileType == 1)
                        .map((e) => {
                            return {
                                ...e,
                                url: e.filePath,
                            }
                        })
                }
            },
            deep: true,
            immediate: true,
        },
    },
}
</script>

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