<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'">
                <img class="text1" src="../../assets/icon-xiugaichengg@3x.png" alt="" />
                <div class="text2">已提交企业认证</div>
                <div class="text3">等待后台审核信息，预计1-3个工作日内完成</div>
                <div class="botn" @click="Jump">返回</div>
            </div>
            <div v-if="userInfo.authStatus === 'NOT_AUTH' || userInfo.authStatus === 'SUCCESS'">
                <el-form ref="form" :label-position="labelPosition" :model="sizeForm" :rules="registerRule">
                    <el-form-item label="法人姓名" prop="nickname">
                        <el-input
                            style="width: 300px"
                            placeholder="请输入您的真实姓名"
                            v-model="sizeForm.nickname"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="法人身份证号" prop="IDs">
                        <el-input
                            style="width: 300px"
                            placeholder="请输入18位身份证号"
                            v-model="sizeForm.IDs"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="法人身份证 (正面图)" prop="photoFront">
                        <single-upload class="upload" v-model="sizeForm.photoFront"></single-upload>
                    </el-form-item>
                    <div class="description">{{ explain }}</div>
                    <el-form-item label="法人身份证 (反面图)" prop="photoBackside">
                        <single-upload class="upload" v-model="sizeForm.photoBackside"></single-upload>
                    </el-form-item>
                    <div class="description">{{ explain }}</div>
                    <el-form-item label="企业名称" prop="name">
                        <el-input style="width: 300px" placeholder="请输入企业名称" v-model="sizeForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="工商营业执照注册号/统一社会信用代码" prop="uscc">
                        <el-input
                            style="width: 300px"
                            placeholder="工商营业执照注册号/统一社会信用代码"
                            v-model="sizeForm.uscc"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="establishedAt" label="工商营业执照有效日期截止时间">
                        <el-date-picker
                            v-model="sizeForm.establishedAt"
                            type="date"
                            style="width: 300px"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <div class="description">证照有效截止日期需大于60天，如证照上日期为长期或无，请勾选长期</div>
                    <el-form-item label="营业执照" prop="businessLicense">
                        <single-upload class="upload" v-model="sizeForm.businessLicense"></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>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            labelPosition: 'right',
            sizeForm: {
                nickname: '',
                uscc: '',
                photoFront: '',
                businessLicense: '',
                photoBackside: '',
                name: '',
                establishedAt: '',
                // phone: '',
                IDs: ''
            },
            typeFl: {},
            registerRule: {
                uscc: { required: true, min: 18, max: 18, message: '请输入18位统一社会信用代码', trigger: 'blur' },
                IDs: { required: true, min: 18, max: 18, message: '请输入18位身份证号', trigger: 'blur' },
                nickname: { required: true, message: '请输入您的真实姓名', trigger: 'blur' },
                establishedAt: { required: true, message: '请选择', trigger: 'blur' },
                name: { required: true, message: '请输入企业名称', trigger: 'blur' },
                // phone: { required: true, message: '请输入您的联系方式', trigger: 'blur' },
                email: { type: 'email', required: true, message: '请输入您的邮箱', trigger: 'blur' },
                photoFront: { required: true, message: '请添加您的法人身份证（正面）', trigger: 'blur' },
                photoBackside: { required: true, message: '请添加您的法人身份证（反面）', trigger: 'blur' },
                businessLicense: { 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';
            });
        }
    },
    // created() {
    //     this.$http
    //         .get('/personal/my')
    //         .then(res => {
    //             this.sizeForm = {
    //                 ...res,
    //                 nickname: this.userInfo.nickname,
    //                 phone: this.userInfo.phone,
    //                 avatar: this.userInfo.avatar,
    //                 email: this.userInfo.email
    //             };
    //         })
    //         .catch(e => {
    //             console.log(e);
    //         });
    // },
    methods: {
        Jump() {
            this.$router.go(-1);
        },
        onSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.$confirm('提交资料需要审核，确定吗?', '提示', { type: 'warning' }).then(() => {
                        this.preservation();
                    });
                }
            });
        },
        preservation() {
            let data = { ...this.sizeForm };
            delete data.nickname;
            delete data.phone;
            delete data.email;
            data.userId = this.userInfo.id;
            this.saving = true;
            let userInfo = {
                ...this.userInfo,
                nickname: this.sizeForm.nickname,
                phone: this.sizeForm.phone,
                avatar: this.userInfo.avatar,
                email: this.sizeForm.email
            };
            userInfo.authorities = [
                ...userInfo.authorities,
                {
                    name: 'ROLE_INSTITUTION'
                }
            ];
            console.log(userInfo);
            // this.$http
            //     .post('user/save', userInfo, {
            //         body: 'json'
            //     })
            //     .then(res => {
            //         this.sizeForm.avatar = res.avatar;
            //         this.$store.dispatch('getUserInfo');
            //         return this.$http.post('/institution/save', data, { body: 'json' }).then(res => {
            //             this.sizeForm = res;
            //             this.saving = false;
            //             this.$store.dispatch('getUserInfo');
            //         });
            //     })
            //     .catch(e => {
            //         console.log(e);
            //         this.saving = false;
            //         this.$message.error(e.error);
            //     });
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    /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 {
        margin-left: 294px;
    }
    /deep/ .el-button {
        width: 130px;
        height: 36px;
        background: linear-gradient(133deg, #00ffcb 0%, #006eff 100%);
        border-radius: 4px;
        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;
        }
    }
    .title {
        height: 42px;
        font-size: 32px;
        font-weight: 400;
        color: #ffffff;
        line-height: 42px;
        padding: 60px 0;
    }
    .description {
        font-size: 14px;
        font-weight: 400;
        color: #494a4d;
        line-height: 24px;
        margin: -11px 0 20px 294px;
    }
    .box {
        background: #1c1e26;
        padding: 17px 16px;
        padding-bottom: 200px;
        .border {
            height: 1px;
            background: #494a4d;
            margin: 17px 0 60px;
        }
        .fail {
            text-align: center;
            .text1 {
                width: 68px;
                height: 68px;
            }
            .text2 {
                font-size: 20px;
                font-weight: bold;
                color: #00ffcb;
                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: #ffffff;
                cursor: pointer;
                line-height: 36px;
                text-align: center;
                background: linear-gradient(133deg, #00ffcb 0%, #006eff 100%);
                border-radius: 4px;
                margin: 87px 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, #00ffcb 0%, #006eff 100%);
            border-radius: 4px;
            margin-top: 60px;
            color: #ffffff;
        }
    }
}
</style>
