<template>
    <div>
        <div class="content-head">
            <dataBreadcrumb :breads="breads"></dataBreadcrumb>
            <h3>编辑</h3>
            <h5>编辑基本信息、企业资质文件</h5>
        </div>
        <div class="othercontent">
            <div>
                <div class="describe">基本信息</div>
                <div style="margin-left: 30px">
                    <el-form ref="form" :model="form" :rules="rules" label-width="120px" inline>
                        <el-form-item label="单位名称" prop="companyName" class="item">
                            <el-input
                                v-model="form.companyName"
                                placeholder="请输入单位名称"
                                style="width: 240px"
                                maxlength="30"
                                @keyup.native="$event.target.value = $event.target.value.replace(/^\s+|\s+$/gm, '')"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="注册角色" prop="type" class="item" >
                            <el-select v-model="form.type" placeholder="请输入选择" disabled>
                                <el-option label="采购商" :value="1"></el-option>
                                <el-option label="供应商" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="法人姓名" prop="legalPersonName" class="item">
                            <el-input
                                v-model="form.legalPersonName"
                                placeholder="请输入"
                                style="width: 240px"
                                maxlength="30"
                                @keyup.native="$event.target.value = $event.target.value.replace(/^\s+|\s+$/gm, '')"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="法人电话" prop="legalPersonPhone" class="item">
                            <el-input
                                v-model="form.legalPersonPhone"
                                placeholder="请输入"
                                style="width: 240px"
                                maxlength="11"
                                @keyup.native="$event.target.value = $event.target.value.replace(/^\s+|\s+$/gm, '')"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="统一社会信用代码" prop="socialCode" class="item">
                            <el-input
                                v-model="form.socialCode"
                                placeholder="请输入"
                                style="width: 240px"
                                maxlength="18"
                                @keyup.native="$event.target.value = $event.target.value.replace(/^\s+|\s+$/gm, '')"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="单位性质" prop="companyNature" class="item">
                            <el-select v-model="form.companyNature" placeholder="请选择">
                                <el-option v-for="item in companyNatures" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="单位所在地" prop="location" class="item">
                            <el-input
                                v-model="form.location"
                                placeholder="请输入"
                                style="width: 240px"
                                maxlength="30"
                                @keyup.native="$event.target.value = $event.target.value.replace(/^\s+|\s+$/gm, '')"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="行业类型" prop="industryType" class="item">
                            <el-select v-model="form.industryType" placeholder="请选择">
                                <el-option v-for="item in belongTypes" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="开户银行名称" prop="bankName" class="item">
                            <el-input
                                v-model="form.bankName"
                                placeholder="请输入"
                                style="width: 240px"
                                maxlength="30"
                                @keyup.native="$event.target.value = $event.target.value.replace(/^\s+|\s+$/gm, '')"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="结算账号" prop="bankAccount" class="item">
                            <el-input
                                v-model="form.bankAccount"
                                placeholder="请输入"
                                style="width: 240px"
                                minlength="12"
                                maxlength="30"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="结算账号名" prop="bankAccountName" class="item">
                            <el-input
                                v-model="form.bankAccountName"
                                placeholder="请输入"
                                style="width: 240px"
                                minlength="2"
                                maxlength="30"
                                @keyup.native="$event.target.value = $event.target.value.replace(/^\s+|\s+$/gm, '')"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="注册资本(万元)" prop="registeredCapital" class="item">
                            <el-input
                                v-model="form.registeredCapital"
                                placeholder="请输入"
                                style="width: 240px"
                                maxlength="10"
                                onkeyup="value=value.replace(/[^\d]/g,'')"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="联系地址" prop="contactAddress" class="item">
                            <el-input
                                v-model="form.contactAddress"
                                placeholder="请输入"
                                style="width: 240px"
                                minlength="4"
                                maxlength="30"
                                @keyup.native="$event.target.value = $event.target.value.replace(/^\s+|\s+$/gm, '')"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="管理员" class="item">
                            <el-input v-model.trim="form.contacts.userName" disabled style="width: 240px" maxlength="30"></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话" class="item">
                            <el-input v-model.trim="form.contacts.phoneNumber" disabled style="width: 240px" maxlength="30"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证" class="item">
                            <el-input v-model.trim="form.contacts.idNumber" disabled style="width: 240px" maxlength="30"></el-input>
                        </el-form-item>
                        <el-form-item label="电子邮箱" class="item">
                            <el-input v-model.trim="form.contacts.email" disabled style="width: 240px" maxlength="30"></el-input>
                        </el-form-item>
                        <div>
                            <el-form-item label="经营范围" prop="businessScope" class="item">
                                <el-input
                                    v-model.trim="form.businessScope"
                                    :rows="4"
                                    type="textarea"
                                    placeholder="请输入内容"
                                    style="width: 600px"
                                    maxlength="300"
                                ></el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label="法人身份证正反面" prop="identity" class="item">
                                <imgUpload :limit="1" :max="10" @input="getJustimg" :fileList="justimg" tip=""></imgUpload>
                                <imgUpload :limit="1" :max="10" @input="getBackimg" :fileList="backimg" tip=""></imgUpload>
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label="三证合一扫描件" prop="cardimg" class="item">
                                <imgUpload
                                    :limit="3"
                                    :max="10"
                                    @input="getCardimg"
                                    tip="只可上传三张图片，大小不能超过10MB，此项为必填项"
                                    :fileList="cardimg"
                                ></imgUpload>
                            </el-form-item>
                        </div>
                        <el-form-item prop="file" class="item" margin-left="-1.8rem">
                            <div class="else">
                                <div>
                                    其他资料
                                    <span class="red"
                                        >用于上传其他证明性材料如法人变更证明，报名资料请勿在此上传，单个附件建议不超过2M。</span
                                    >
                                </div>
                            </div>
                            <Upload :limit="5" :max="10" @input="getfile" :fileList="files" tip="最多上传五份文件,每份不超过10M"></Upload>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="bottomButton">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="submit">提交审核</el-button>
            </div>
        </div>
        <el-dialog :visible.sync="dialogFormVisible" title="提交审核">
            <el-form ref="dialogform" :model="form1" :rules="rules">
                <el-form-item label="修改位置" prop="modifyLocation" class="item">
                    <el-input v-model.trim="form.modifyLocation" style="width: 240px" maxlength="30"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="backButton">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sure">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { companyDetail, industryList, companyNatureList } from '@api/common/list';
import { companyedit } from '@api/purchaser/organization';

import dataBreadcrumb from '@components/dataBreadcrumb.vue';
import Upload from '@components/Upload/Upload.vue';
import imgUpload from '@components/Upload/imgUpload.vue';
export default {
    components: {
        dataBreadcrumb,
        Upload,
        imgUpload
    },
    data() {
        // 测试省份
        let islocal = (rule, value, callback) => {
            console.log('1');
            if (!this.form.provinceId) {
                callback(new Error('请选择省份'));
            } else if (!this.form.cityId) {
                callback(new Error('请选择市'));
            } else if (!this.form.districtId) {
                callback(new Error('请选择区'));
            } else {
                callback();
            }
        };
        // 测试正反图片是否上传
        let checkidentity = (rule, value, callback) => {
            if (this.justimg.length === 0) {
                callback(new Error('请上传正面照片'));
            } else if (this.backimg.length === 0) {
                callback(new Error('请上传反面照片'));
            } else {
                callback();
            }
        };

        // 测试三证合一是否上传
        let checkcardimg = (rule, value, callback) => {
            if (this.cardimg.length === 0) {
                callback(new Error('请上传三证合一'));
            } else {
                callback();
            }
        };
        let checkPhone = async (rule, value, callback) => {
            if (!value) {
                return callback(new Error('手机号不能为空'));
            } else {
                const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
                console.log(reg.test(value));
                if (reg.test(value)) {
                    callback();
                } else {
                    return callback(new Error('请输入正确的手机号'));
                }
            }
        };

        //名字校验
        let validateRealName = (rule, value, callback) => {
            const realnameReg = /^[\u4E00-\u9FA5]{1,30}$/;
            if (!realnameReg.test(value)) {
                return callback(new Error('您的输入有误,请重新输入!'));
            } else {
                callback();
            }
        };

        //身份证号校验
        let validateRealId = (rule, value, callback) => {
            const realnameReg = /(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/;
            if (!realnameReg.test(value)) {
                return callback(new Error('您的输入有误,请重新输入!'));
            } else {
                callback();
            }
        };
        //邮箱号校验
        let validateEmailId = (rule, value, callback) => {
            const realnameReg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
            if (!realnameReg.test(value)) {
                return callback(new Error('您的输入有误,请重新输入!'));
            } else {
                callback();
            }
        };
        //结算账号校验
        let validateAccount = (rule, value, callback) => {
            const realnameReg = /^([1-9]{1})(\d{14}|\d{17})$/;
            if (!realnameReg.test(value)) {
                return callback(new Error('您的输入有误,请重新输入!'));
            } else {
                callback();
            }
        };
        return {
            files: [],
            justimg: [],
            backimg: [],
            cardimg: [],
            dialogFormVisible: false,
            breads: ['组织管理', '单位信息'],
            form: {},
            form1: {
                modifyLocation: ''
            },
            rules: {
                companyName: [
                    {
                        required: true,
                        message: '请输入单位名称',
                        trigger: 'blur'
                    },
                    {
                        validator: validateRealName
                    }
                ],
                local: [
                    {
                        required: true,
                        validator: islocal,
                        trigger: 'blur'
                    }
                ],
                type: [
                    {
                        required: true,
                        message: '请选择角色',
                        trigger: 'blur'
                    }
                ],
                name: [
                    {
                        required: true,
                        message: '请输入管理者姓名',
                        trigger: 'blur'
                    },
                    {
                        validator: validateRealName
                    }
                ],
                idNumber: [
                    {
                        required: true,
                        message: '请输入身份证',
                        trigger: 'blur'
                    },
                    {
                        validator: validateRealId
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    },
                    {
                        pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
                        message: '密码需由8-16位数字字母组合'
                    }
                ],
                email: [
                    {
                        required: true,
                        message: '请输入电子邮箱',
                        trigger: 'blur'
                    },
                    {
                        validator: validateEmailId
                    }
                ],
                phonenumber: [
                    {
                        required: true,
                        message: '请输入正确的验证码',
                        trigger: 'blur'
                    },
                    {
                        pattern: /^1[0-9]{10}$/,
                        message: '你的输入有误,请重新输入!'
                    }
                ],
                code: [
                    {
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur'
                    }
                ],
                phonecode: [
                    {
                        required: true,
                        message: '请输入短信验证码',
                        trigger: 'blur'
                    }
                ],
                legalPersonPhone: [
                    {
                        required: true,
                        message: '请输入法人电话',
                        trigger: 'blur'
                    },
                    {
                        pattern: /^1[0-9]{10}$/,
                        message: '你的输入有误,请重新输入!'
                    }
                ],

                legalPersonName: [
                    {
                        required: true,
                        message: '请输入法人姓名',
                        trigger: 'blur'
                    },
                    {
                        validator: validateRealName
                    }
                ],
                location: [
                    {
                        required: true,
                        message: '请输入单位所在地',
                        trigger: 'blur'
                    },
                    {
                        validator: validateRealName
                    }
                ],
                bankAccount: [
                    {
                        required: true,
                        message: '请输入结算账号',
                        trigger: 'blur'
                    },
                    {
                        validator: validateAccount
                    }
                ],
                bankAccountName: [
                    {
                        required: true,
                        message: '请输入结算账号名',
                        trigger: 'blur'
                    },
                    {
                        validator: validateRealName
                    }
                ],
                contactAddress: [
                    {
                        required: true,
                        message: '请输入联系地址',
                        trigger: 'blur'
                    },
                    {
                        validator: validateRealName
                    }
                ],

                socialCode: [
                    {
                        required: true,
                        message: '请输入社会信用码',
                        trigger: 'blur'
                    },
                    {
                        pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
                        message: '您的输入有误,请重新输入!'
                    }
                ],
                companyNature: [
                    {
                        required: true,
                        message: '请输入行业类型',
                        trigger: 'blur'
                    }
                ],
                industryType: [
                    {
                        required: true,
                        message: '请选择行业类型',
                        trigger: 'blur'
                    }
                ],
                bankName: [
                    {
                        required: true,
                        message: '开户银行名称',
                        trigger: 'blur'
                    },
                    {
                        validator: validateRealName
                    }
                ],
                registeredCapital: [
                    {
                        required: true,
                        message: '请输入注册资本',
                        trigger: 'blur'
                    } /* {
            pattern: /^[1-9]d*$/,
            message: "你的输入有误,请重新输入!",
          } */
                ],
                businessScope: [
                    {
                        required: true,
                        message: '请输入经营范围',
                        trigger: 'blur'
                    },
                    {
                        pattern: /[\u4e00-\u9fa5]|[\（\）\《\》\——\；\，\。\“\”\<\>\！]/,
                        message: '你得输入有误,请重新输入!'
                    }
                ],
                identity: [
                    {
                        required: true,
                        validator: checkidentity,
                        trigger: 'blur'
                    }
                ],
                cardimg: [
                    {
                        required: true,
                        validator: checkcardimg,
                        trigger: 'blur'
                    }
                ]
            },
            companyNatures: [],
            belongTypes: []
        };
    },
    methods: {
        cancel() {
            this.$router.go(-1);
        },
        sure() {
            this.dialogFormVisible = false;
        },
        // 获取单位性质
        async getCompanyNatureList() {
            const res = await companyNatureList();
            this.companyNatures = res;
        },
        //获取所属行业
        async getIndustryList() {
            const res = await industryList();
            this.belongTypes = res;
        },
        getJustimg(val) {
            console.log(val);
            this.justimg = val;
        },
        getBackimg(val) {
            console.log(val);
            this.backimg = val;
        },
        getCardimg(val) {
            console.log(val);
            this.cardimg = val;
        },
        getfile(val) {
            console.log(val);
            this.files = val;
        },
        async getcompanyDetail() {
            try {
                let companyId = localStorage.getItem('companyId');
                const { data, code } = await companyDetail(companyId);
                if (code === 200) {
                    for (let item of data.fileList) {
                        item.name = item.fileName;
                        item.url = item.fileUrl;
                        if (item.type == 1) {
                            this.justimg.push(item);
                        } else if (item.type == 2) {
                            this.backimg.push(item);
                        } else if (item.type == 3) {
                            this.cardimg.push(item);
                        } else if (item.type == 4) {
                            this.files.push(item);
                        }
                    }
                    this.form = data;
                }
            } catch (e) {
                console.log(e);
            }
        },
        async submit() {
            try {
                const valid = await this.$refs['form'].validate();
                if (valid) {
                    let form = this.form;
                    let justimg = this.justimg;
                    let backimg = this.backimg;
                    let cardimg = this.cardimg;
                    let files = this.files;
                   console.log(justimg)
                   console.log(backimg)
                   console.log(cardimg)
                   console.log(files)
                    justimg.forEach(function (item, index) {
                        item.type = 1;
                    });
                    backimg.forEach(function (item, index) {
                        item.type = 2;
                    });
                    cardimg.forEach(function (item, index) {
                        item.type = 3;
                    });
                    files.forEach(function (item, index) {
                        item.type = 4;
                    });
                    form.fileList = justimg.concat(backimg).concat(cardimg).concat(files);
                    const { code, msg } = await companyedit(form);
                    if (code == 200) {
                        this.$message({
                            message: msg,
                            type: 'success',
                            duration: 1500
                        });
                        setTimeout(() => {
                            history.go(0)
                            // this.$router.go(-1);
                        }, 1500);
                    } else {
                        this.$message.error(msg);
                    }
                }
            } catch (e) {}
        }
    },
    created() {
        this.getcompanyDetail();
        this.getIndustryList();
        this.getCompanyNatureList();
    }
};
</script>


<style scoped>
.upload > div {
    color: rgba(102, 102, 102, 1);
    font-weight: 400;
}

.label-form {
    font-size: 16px;
    margin-top: 30px;
    margin-bottom: 1opx;
    font-weight: 400;
}

.company h4 {
    font-size: 22px;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
    margin-top: 62px;
    margin-bottom: 50px;
}

.el-input {
    width: 240px;
    height: 40px;
}

.nextButton {
    width: 300px;
    height: 48px;
    background: rgba(4, 134, 254, 1);
    border-radius: 0.4px;
    line-height: 46px;
    margin-top: 45px;
    margin-bottom: 8px;
    color: #fff;
}

.item .el-form-item__label {
    font-weight: bold;
}

.password-tips {
    margin-bottom: 0;
    color: rgba(144, 147, 153, 1);
    font-weight: 400;
    font-size: 12px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    background: rgba(247, 247, 247, 1);
}

.avatar {
    width: 120px;
    height: 120px;
    display: block;
}

.getcode,
.getphonecode {
    position: relative;
}

.getcode > .code {
    /*margin: 400px auto;*/
    width: 68px;
    height: 32px;
    /*border: 1px solid red;*/
    position: absolute;
    top: 0;
    left: 330px;
}

.getphonecode > .phonecode {
    font-size: 14px;
    font-weight: 400;
    color: rgba(51, 136, 255, 1);
    position: absolute;
    top: 13px;
    left: 400px;
}

.else .red {
    color: #ff6161;
    font-size: 14px;
}

.perfect-head {
    width: 9px;
    margin-top: 66px;
    margin-bottom: 37px;
}

.perfect-head > div > text {
    font-weight: bold;
}

.result {
    width: 100%;
    height: 300px;
}

.result h4 {
    font-size: 30px;
    font-weight: 600;
    color: rgba(75, 193, 103, 1);
    margin-top: 100px;
    margin-bottom: 20px;
}

.result h5 {
    font-size: 18px;
    font-weight: 400;
    color: rgba(128, 128, 128, 1);
    line-height: 30px;
    text-align: center;
}

.othercontent > div {
    background: #fff;
}

.margin-left {
    margin-left: 30px;
}
</style>
