<template>
    <!-- <TopNavigation/> -->
    <div class="content">
        <div class="real_name_authentication">实名认证</div>
        <div class="real_name_authentication_tip">认证成功后不能修改，请使用本人身份信息完成认证</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.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">
                        <img v-if="form.idFront === ''" :src="require('@assets/png-shangchuan@3x.png')" alt="" class="img-content_con"/>
                        <van-image v-else :src="form.idFront" fit="cover" width="160px" height="160px"/>
                        <div class="img-content_con_text" v-if="form.idFront === ''">点击上传</div>
                        <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">
                        <img v-if="form.idBack === ''" :src="require('@assets/png-shangchuan@3x.png')" alt="" class="img-content_con"/>
                        <van-image v-else :src="form.idBack" fit="cover" width="160px" height="160px"/>
                        <div class="img-content_con_text" v-if="form.idBack === ''">点击上传</div>
                        <van-uploader name="idBack" result-type="file" :after-read="afterRead" />
                    </div>
                </template>
            </van-field> -->
            <div class="next_step" ref="btn">
                <div @click="submit" class="next_step_con">
                    提交审核
                </div>
            </div>
        </van-form>
        <!-- <van-field
        v-model="userName"
        name="姓名"
        label="姓名"
        placeholder="请输入您真实姓名"
        />
        <van-field
        v-model="userPhone"
        name="手机号码"
        label="手机号码"
        placeholder="请输入您的手机号码"
        :rules="[{ required: true, message: '请填写手机号码' }]"
        />
        <van-field
        v-model="userId"
        name="身份证号"
        label="身份证号"
        placeholder="请输入18位身份证号"
        :rules="[{ required: true, message: '请填写身份证号' }]"
        /> -->
    </div>
    <!-- <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, ${$colors.prim}, ${$colors.warn})`"
                    class="sure"
                >
                    提交审核
                </van-button>
            </div>
        </van-form>
    </div> -->
</template>

<script>
import { mapState } from 'vuex';
import phone from '../../mixins/phone';
// import TopNavigation from "../../components/TopNavigation.vue"
export default {
    computed: {
        ...mapState(['userInfo'])
    },
    components: {
        // TopNavigation
    },
    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(() => {
                    this.$toast.loading({
                        message: '加载中...',
                        forbidClick: true
                    });
                    let form = { ...this.form };
                    form.userId = this.userInfo.id;
                    form.status = 'PENDING';
                    form.org = false;
                    this.$http
                        .post('/identityAuth/apply', {
                            ...form
                        })
                        .then(() => {
                            this.$toast.clear();
                            this.$router.replace('/Waiting');
                        })
                        .catch(e => {
                            this.$toast(e.error || '提交失败，请稍后再试');
                        });
                })
                .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>
.content{
        width: 100%;
        height: 100%;
        position: absolute;
        background: #0F0F27;
        // margin-top: 44px;
        padding: 16px;
        padding-bottom: 0;
        box-sizing: border-box;
        .real_name_authentication{
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            margin-bottom: 6px;
        }
        .real_name_authentication_tip{
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFCA5E;
            margin-bottom: 30px;
        }
}
/deep/ .van-form {
    // margin-top: 28px;
    .van-cell {
        padding: 0px 0;

        .van-field__left-icon {
            margin-right: 8px;
        }
    }
    .van-field__body {
        height: 56px;
        align-items: center;
        border-bottom: 1px solid rgba(95, 100, 111,.2);
    }
    .van-field__body:nth-of-type(4){
        margin-top: 22px;
        border-bottom: none;
        width: 160px;
        height: 160px;
        border-radius: 8px;
        opacity: 0.2;
        border: 1px solid #5F646F;
    }
    .van-field__label {
        font-size: 14px;
        // font-weight: bold;
        color: #FFFFFF;
        line-height: 24px;
        margin-top: 16px;
    }
    .van-field__control{
        color: #FFFFFF;
        background-color: #0F0F27;
    }
}
/deep/ .van-cell:after{
    border-bottom: none;
}
@bottom: 6px;
.next_step{
        width: 100%;
        height: 56px;
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 8px 16px;
        box-sizing: border-box;
        background: #15152D;
        padding-bottom: calc(@bottom+ constant(safe-area-inset-bottom));
        padding-bottom: calc(@bottom + env(safe-area-inset-bottom));
        .next_step_con{
            width: 100%;
            height: 40px;
            background: #28B6FF;
            border-radius: 8px;
            line-height: 40px;
            text-align: center;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
        }
    }
/deep/ .van-button{
    background-color: #28B6FF;
}
.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;
    }
}
/deep/ .van-uploader__input{
    border-radius: 8px;
}
.img-content {
    position: relative;
    width: 160px;
    height: 160px;
    // background-color: #5F646F;
    // border-radius: 8px;
    // opacity: 0.2;
    // border: 1px dashed #5F646F;
    /deep/.van-uploader {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        .van-uploader__upload {
            width: 160px;
            height: 160px;
        }
    }
    .iD_card_upload_con_img{
        width: 24px;
        height: 24px;
        margin: 56px 0 6px 68px;
    }
    .iD_card_upload_con_text{
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #5F646F;
        margin-left: 56px;
    }
    .img-content_con{
        width: 160px;
        height: 160px;
    }
    .img-content_con_text{
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #5F646F;
            position: absolute;
            top: 87px;
            left: 57px;
        }
}
/deep/.img {
    &.van-cell {
        margin-top: 10px;
        .van-field__body {
            height: 160px;
            border-bottom: none;
            margin-top: 10px;
        }
        .van-field__label {
            margin-top: 0px;
        }
    }
}

</style>
