<template>
    <div class="container center-content">
        <div class="title">认证信息</div>
        <div class="box">
            <div class="name">企业认证 <span>账户实名认证后不能修改</span></div>
            <div class="border"></div>
            <div
                class="fail"
                v-if="
                    userInfo.authStatus === 'PENDING' ||
                    userInfo.authStatus === 'FAIL' ||
                    userInfo.authStatus === 'SUCCESS'
                "
            >
                <img
                    class="text1"
                    v-if="userInfo.authStatus !== 'FAIL'"
                    src="../../assets/user/icon-xiugaichengg@3x (1).png"
                    alt=""
                />
                <img
                    class="text1"
                    v-if="userInfo.authStatus === 'FAIL'"
                    src="../../assets/user/icon-shibai@3x.png"
                    alt=""
                />
                <div class="text2" v-if="userInfo.authStatus === 'PENDING'">已提交企业认证</div>
                <div class="text2" v-if="userInfo.authStatus === 'FAIL'">企业认证失败</div>
                <div class="text2" v-if="userInfo.authStatus === 'SUCCESS'">企业认证成功</div>
                <div class="text3" v-if="userInfo.authStatus === 'PENDING'">
                    等待后台审核信息，预计1-3个工作日内完成
                </div>
                <div class="text3" v-if="userInfo.authStatus === 'SUCCESS'">账户实名认证后不能修改</div>
                <div class="text3" v-if="userInfo.authStatus === 'FAIL'">
                    很遗憾，您的资料审核失败，请检查您填写的资料是否正确以及上传照片是否清晰
                </div>
                <div class="botn" v-if="userInfo.authStatus !== 'FAIL'" @click="all('accountdata')">返回</div>
                <div class="botn" v-if="userInfo.authStatus === 'FAIL'" @click="Jump2">重新认证</div>
            </div>
            <div>
                <div v-if="userInfo.authStatus === 'NOT_AUTH'">
                    <el-form ref="form" :label-position="labelPosition" :model="sizeForm" :rules="registerRule">
                        <el-form-item label="法人姓名" prop="realName">
                            <el-input
                                style="width: 300px"
                                placeholder="请输入您的真实姓名"
                                v-model="sizeForm.realName"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="法人身份证号" prop="idNo">
                            <el-input
                                style="width: 300px"
                                placeholder="请输入18位身份证号"
                                v-model="sizeForm.idNo"
                            ></el-input>
                        </el-form-item>

                        <el-form-item label="法人身份证 (正面图)" prop="idFront">
                            <single-upload class="upload" v-model="sizeForm.idFront"></single-upload>
                        </el-form-item>
                        <div class="description">{{ explain }}</div>
                        <el-form-item label="法人身份证 (反面图)" prop="idBack">
                            <single-upload class="upload" v-model="sizeForm.idBack"></single-upload>
                        </el-form-item>
                        <div class="description">{{ explain }}</div>
                        <el-form-item label="企业名称" prop="orgName">
                            <el-input
                                style="width: 300px"
                                placeholder="请输入企业名称"
                                v-model="sizeForm.orgName"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="工商营业执照注册号/统一社会信用代码" prop="orgNo">
                            <el-input
                                style="width: 300px"
                                placeholder="工商营业执照注册号/统一社会信用代码"
                                v-model="sizeForm.orgNo"
                            ></el-input>
                        </el-form-item>
                        <div class="content">
                            <el-form-item @change="Price" prop="orgLicenseExpire" label="工商营业执照有效日期截止时间">
                                <el-date-picker
                                    v-model="sizeForm.orgLicenseExpire"
                                    :disabled="sizeForm.negotiateDirectly"
                                    type="date"
                                    style="width: 300px"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期"
                                >
                                </el-date-picker>
                            </el-form-item>
                            <el-checkbox @change="Directly" v-model="sizeForm.negotiateDirectly">长期</el-checkbox>
                        </div>
                        <div class="description">证照有效截止日期需大于60天，如证照上日期为长期或无，请勾选长期</div>
                        <el-form-item label="营业执照" prop="orgLicense">
                            <single-upload class="upload" v-model="sizeForm.orgLicense"></single-upload>
                        </el-form-item>
                        <div class="description">请上传清晰图片，格式JPG或PNG，大小不得超过 2 M</div>
                    </el-form>
                    <div class="btn">
                        <el-button type="primary" @click="onSubmit">提交审核</el-button>
                        <div class="btn1" @click="Jump">返回</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
    data() {
        return {
            loading: true,
            labelPosition: 'right',
            IDPattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
            sizeForm: {
                realName: '',
                orgLicenseExpire: '',
                negotiateDirectly: false,
                idFront: '',
                orgLicense: '',
                idBack: '',
                orgName: '',
                orgNo: '',
                idNo: '',
                radio: '1'
            },
            typeFl: {},
            registerRule: {
                orgNo: {
                    required: true,
                    min: 18,
                    max: 18,
                    message: '请输入18位统一社会信用代码',
                    trigger: 'blur'
                },
                orgLicenseExpire: [
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            if (!this.sizeForm.negotiateDirectly) {
                                if (!this.sizeForm.orgLicenseExpire) {
                                    callback(new Error('请选择日期截止方式'));
                                } else {
                                    callback();
                                }
                            } else {
                                callback();
                            }
                        }
                    }
                ],
                idNo: { pattern: this.IDPattern, message: '请输入您的身份证号', trigger: 'blur' },
                realName: { required: true, message: '请输入', trigger: 'blur' },
                orgName: { required: true, message: '请输入企业名称', trigger: 'blur' },
                idFront: { required: true, message: '请添加您的法人身份证（正面）', trigger: 'blur' },
                idBack: { required: true, message: '请添加您的法人身份证（反面）', trigger: 'blur' },
                orgLicense: { required: true, message: '请添加营业执照', trigger: 'blur' }
            }
        };
    },
    computed: {
        ...mapState(['userInfo', 'personalInfo']),
        explain() {
            const list = [
                '请上传身份证图片，格式JPG或PNG或JPEG，大小不超过1M',
                '请上传证件照图片，格式JPG或PNG或JPEG，大小不超过1M'
            ];
            return list[this.typeFl == 'ID_CARD' ? 0 : 1];
        },
        type() {
            return this.userInfo.authorities.find(item => {
                return item.name == 'ROLE_INSTITUTION' || item.name == 'ROLE_PERSONAL';
            });
        }
    },
    methods: {
        Price() {
            if (this.sizeForm.orgLicenseExpire) {
                this.sizeForm.negotiateDirectly = false;
            }
        },
        Directly() {
            if (this.sizeForm.negotiateDirectly == true) {
                this.$set(this.sizeForm, 'orgLicenseExpire', undefined);
            }
            this.$forceUpdate();
        },
        Jump() {
            this.$router.go(-1);
        },
        Jump2() {
            let status = 'NOT_AUTH';
            this.$http
                .post(
                    '/user/save',
                    {
                        ...this.$store.state.userInfo,
                        authStatus: status
                    },
                    {
                        body: 'json'
                    }
                )
                .then(() => {
                    this.$store.dispatch('getUserInfo');
                    this.$router.push('/authentication');
                })
                .then(() => {
                    return Promise.resolve();
                })
                .catch(e => {
                    if (e) {
                        this.$message.error(e.error);
                    }
                    return Promise.reject();
                });
        },
        onSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.$confirm(
                        '保证提交的所有资料证真实有效且确属本人，如有假冒信息，一切法律后果自行承担！',
                        '提示',
                        { type: 'warning' }
                    ).then(() => {
                        this.loading = false;
                        this.preservation();
                    });
                }
            });
        },
        preservation() {
            let form = { ...this.sizeForm };
            delete form.negotiateDirectly;
            form.userId = this.userInfo.id;
            form.status = 'PENDING';
            form.org = true;
            // console.log(form);
            this.$http
                .post('/identityAuth/apply', {
                    ...form
                })
                .then(res => {
                    this.$store.dispatch('getUserInfo', res);
                })
                .catch(e => {
                    if (e) {
                        this.$message.success(e.error);
                    }
                });
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    /deep/ .el-form-item__content {
        line-height: 0 !important;
        display: flex;
    }
    /deep/ .el-form-item__label {
        width: 294px;
        text-align: right;
        color: #ffffff;
    }
    /deep/ .el-form {
        padding-left: 175px;
    }
    /deep/ .el-input__inner {
        border: 1px solid #494a4d;
        background: #1c1e26;
        color: #ffffff;
    }
    /deep/ .el-form-item__error {
        padding-top: 3px;
        // margin-left: 194px;
    }
    /deep/ .el-checkbox {
        margin-top: 12px;
        border-radius: 50%;
    }
    /deep/ .el-checkbox__inner {
        border-radius: 50%;
    }
    /deep/ .el-button {
        width: 130px;
        height: 36px;
        color: #1a1a1a;
        background: linear-gradient(133deg, @prim 0%, @warn 100%);
        border-radius: 4px;
        border: 0;
        margin: 0 !important;
    }
    .btn {
        display: flex;
        justify-content: center;
        margin: 65px 0 0 58px;
        .btn1 {
            width: 130px;
            height: 36px;
            background: #c4c7cc;
            cursor: pointer;
            border-radius: 4px;
            color: #ffffff;
            font-size: 13px;
            text-align: center;
            line-height: 36px;
            margin-left: 20px;
        }
    }
    .content {
        display: flex;
        width: 670px;
        justify-content: space-between;
    }
    .title {
        height: 30px;
        font-size: 30px;
        font-weight: 400;
        font-family: ZhenyanGB-Regular, ZhenyanGB;
        color: #ffffff;
        line-height: 30px;
        padding: 60px 0;
    }
    .description {
        font-size: 14px;
        font-weight: 400;
        color: #494a4d;
        line-height: 24px;
        margin: -7px 0 2px 294px;
    }
    .box {
        background: #1c1e26;
        padding: 17px 16px;
        padding-bottom: 120px;
        .border {
            height: 1px;
            background: #494a4d;
            margin: 17px 0 80px;
        }
        .fail {
            text-align: center;
            .text1 {
                width: 68px;
                height: 68px;
            }
            .text2 {
                font-size: 20px;
                font-weight: bold;
                color: @prim;
                line-height: 26px;
                margin: 20px 0 10px;
            }
            .text3 {
                font-size: 14px;
                font-weight: 400;
                color: #ffffff;
                line-height: 24px;
            }
            .botn {
                width: 130px;
                height: 36px;
                font-size: 13px;
                color: #1a1a1a;
                cursor: pointer;
                line-height: 36px;
                text-align: center;
                background: linear-gradient(133deg, @prim 0%, @warn 100%);
                border-radius: 4px;
                margin: 80px 0 0 518px;
            }
        }
        .name {
            font-size: 16px;
            font-weight: bold;
            color: #ffffff;
            line-height: 26px;
            span {
                font-size: 12px;
                font-weight: 400;
                color: #939599;
                line-height: 22px;
            }
        }
        /deep/ .el-button {
            width: 130px;
            height: 36px;
            background: linear-gradient(133deg, @prim 0%, @warn 100%);
            border-radius: 4px;
            margin-top: 60px;
            color: #1a1a1a;
            border: 0;
        }
    }
}
</style>
