<template>
    <div class="login">
        <div class="tabs">
            <div class="text1">个人认证</div>
            <div class="text2">
                <span>账户实名认证后不能修改，</span>
                <span>请使用本人身份信息完成认证</span>
            </div>
        </div>

        <van-form @submit="submit" @failed="failed" ref="form">
            <van-field
                label="姓名"
                name="姓名"
                placeholder="请输入您真实姓名"
                v-model="form.realName"
                :rules="[{ required: true, message: '请输入您真实姓名' }]"
            >
            </van-field>

            <van-field
                type="tel"
                label="手机号码"
                name="手机号码"
                placeholder="请输入您的手机号码"
                v-model="form.phone"
                :maxlength="11"
                :rules="[
                    { required: true, message: '请输入您的手机号码' },
                    {
                        pattern: phonePattern,
                        message: '手机号码格式错误'
                    }
                ]"
            >
            </van-field>

            <van-field
                label="电子邮箱"
                name="电子邮箱"
                placeholder="请输入电子邮箱"
                v-model="form.email"
                :rules="[
                    { required: true, message: '请输入电子邮箱' },
                    {
                        pattern: emailPattern,
                        message: '电子邮箱格式错误'
                    }
                ]"
            >
            </van-field>

            <van-field
                label="身份证号"
                name="身份证号"
                placeholder="请输入身份证号"
                v-model="form.idNo"
                :rules="[
                    { required: true, message: '请输入身份证号' },
                    {
                        pattern: IDPattern,
                        message: '身份证号格式错误'
                    }
                ]"
            >
            </van-field>

            <van-field
                label="身份证照片（正面照）"
                name="正面照"
                v-model="form.idFront"
                class="img"
                :rules="[
                    {
                        validator: val => {
                            return !!this.form.idFront;
                        },
                        message: '请上传身份证正面照片'
                    }
                ]"
            >
                <template #input>
                    <div class="img-content">
                        <van-image
                            :src="form.idFront || require('../../assets/svgs/bg-png.svg')"
                            fit="cover"
                            radius="20"
                        />
                        <van-uploader name="idFront" result-type="file" :after-read="afterRead" />
                    </div>
                </template>
            </van-field>
            <van-field
                label="身份证照片（反面照）"
                name="反面照"
                v-model="form.idBack"
                class="img"
                :rules="[
                    {
                        validator: val => {
                            return !!this.form.idBack;
                        },
                        message: '请上传身份证反面照片'
                    }
                ]"
            >
                <template #input>
                    <div class="img-content">
                        <van-image
                            :src="form.idBack || require('../../assets/svgs/bg-png.svg')"
                            fit="cover"
                            radius="20"
                        />
                        <van-uploader name="idBack" result-type="file" :after-read="afterRead" />
                    </div>
                </template>
            </van-field>

            <div class="button" ref="btn">
                <van-button
                    round
                    block
                    @click="submit"
                    color="linear-gradient(to right, #FDFB60, #FF8F3E)"
                    class="sure"
                >
                    提交审核
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import phone from '../../mixins/phone';
export default {
    computed: {
        ...mapState(['userInfo'])
    },

    mixins: [phone],
    data() {
        return {
            active: 'phone',
            emailPattern: /^([a-zA-Z0-9]+[_|_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,6}$/,
            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)$/,
            form: {
                realName: '',
                phone: '',
                email: '',
                idNo: '',
                idFront: '',
                idBack: '',
                status: ''
            },
            btn: null
        };
    },
    mounted() {
        this.btn = this.$refs.btn;
    },
    methods: {
        submit() {
            this.$refs.form
                .validate()
                .then(() => {
                    let form = { ...this.form };
                    form.userId = this.userInfo.id;
                    form.status = 'PENDING';
                    form.org = false;
                    this.$http
                        .post('/identityAuth/apply', {
                            ...form
                        })
                        .then(() => {
                            this.$router.replace('/Waiting');
                        });
                })
                .catch(() => {
                    this.bs.value.refresh();
                });
        },
        afterRead(file, e) {
            this.updateFile(file).then(img => {
                this.form[e.name] = img;
            });
        },
        failed() {
            console.log('验证失败');
        }
    }
};
</script>

<style lang="less" scoped>
.login {
    padding: 10px 16px 150px;
}

.tabs {
    padding-bottom: 12px;
    .text1 {
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
        line-height: 30px;
    }
    .text2 {
        font-size: 12px;
        color: @text3;
        line-height: 22px;
        margin-top: 4px;
        span {
            &:last-child {
                color: @prim;
            }
        }
    }
}
.van-cell::after {
    border-bottom-color: #202122;
}

.icon {
    display: block;
    margin-top: 12px;
}
/deep/ .van-form {
    // margin-top: 28px;
    .van-cell {
        padding: 0px 0;

        .van-field__left-icon {
            margin-right: 8px;
        }
    }

    .van-field__body {
        height: 70px;
        align-items: center;
    }

    .van-field__label {
        font-size: 14px;
        font-weight: bold;
        color: #ffffff;
        line-height: 24px;
        margin-top: 25px;
    }
}
.button {
    margin-top: 60px;

    .del {
        margin-top: 20px;
        border-color: #ffffff;
    }

    .sure {
        color: @bg !important;
    }

    .van-button {
        font-weight: bold;
    }
}

.sub-code {
    padding-right: 0;
    border-width: 0;
}

.img {
    display: flex;
    padding: 20px 0 10px;

    .img-label {
        font-size: 14px;
        font-weight: bold;
        color: #ffffff;
        line-height: 20px;
        margin: 5px 12px 5px 0;
        min-width: 86px;
    }
}

.img-content {
    position: relative;
    /deep/.van-uploader {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        .van-uploader__upload {
            width: 160px;
            height: 160px;
        }
    }
}

.button {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: @bg2;
    padding: 6px 42px;
    z-index: 20;
}

/deep/.img {
    &.van-cell {
        margin-top: 20px;
        .van-field__body {
            height: 160px;
        }
        .van-field__label {
            margin-top: 5px;
        }
    }
}
</style>
