<template>
    <div class="login">
        <van-form @submit="submit" @failed="failed" ref="form">
            <van-field
                label="真实姓名"
                name="真实姓名"
                placeholder="请输入您真实姓名"
                v-model="form.name"
                input-align="right"
                :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: '身份证号格式错误'
                    }
                ]"
                input-align="right"
            >
            </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> -->

            <di v class="button" ref="btn">
                <div class="tips">认证成功后不能修改，并且只允许绑定一个账户</div>
                <div>
                    <van-button round block type="primary" @click="submit" class="sure"> 身份验证 </van-button>
                </div>
            </di>
        </van-form>
        <a id="auth" :href="url"></a>
    </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: {
                name: '',
                phone: '',
                email: '',
                idNo: '',
                idFront: '',
                idBack: '',
                status: ''
            },
            btn: null,
            url: ''
        };
    },
    mounted() {
        this.btn = this.$refs.btn;
    },
    methods: {
        submit() {
            this.$refs.form
                .validate()
                .then(() => {
                    this.$toast.loading({
                        message: '等待认证',
                        forbidClick: true
                    });
                    let form = { ...this.form };
                    form.userId = this.userInfo.id;
                    form.status = 'PENDING';
                    form.org = false;
                    this.$http
                        .post('/user/faceAuth', {
                            ...form
                        })
                        .then(res => {
                            console.log(res);
                            if (/micromessenger/i.test(navigator.userAgent)) {
                                document.location.replace(res.url);
                            } else {
                                this.url =
                                    'alipays://platformapi/startapp?appId=20000067&url=' + encodeURIComponent(res.url);
                                this.$nextTick(() => {
                                    document.getElementById('auth').click();
                                });
                            }

                            let timer = setInterval(() => {
                                this.$http.get('/user/my').then(res => {
                                    if (res.authStatus === 'SUCCESS') {
                                        clearInterval(timer);
                                        this.$toast('认证成功');
                                        this.$store.commit('setUserInfo', res);
                                        this.$router.go(-1);
                                    }
                                });
                            }, 3000);
                            setTimeout(() => {
                                clearInterval(timer);
                                this.$toast('认证超时，请稍后重试');
                                this.$router.go(-1);
                            }, 180000);
                        })
                        .catch(e => {});
                })
                .catch(() => {
                    this.bs.value.refresh();
                });
        },
        afterRead(file, e) {
            this.updateFile(file, 'id', 1000).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: @text0;
        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: @tabBorder;
}

.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: #fff;
        line-height: 24px;
        margin-top: 25px;
    }
}
.button {
    margin-top: 60px;

    .tips {
        font-size: 12px;
        color: #6a6d83;
        line-height: 17px;
        text-align: center;
        padding-bottom: 12px;
    }

    .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: @text0;
        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;
        }
    }
}

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

/deep/.van-field__control {
    font-size: @font1 !important;
    color: @text0;
}
#auth {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}
.van-cell {
    &::after {
        border-width: 0;
        height: 1px;
        background: rgba(255, 255, 255, 0.1);
        left: 16px;
        right: 16px;
    }
}
</style>
