{extend name="public/base"/}
{block name="css"}
<style>
    .idcard-box {
        background:white;
        padding:10px 0;
    }
    .van-uploader,.van-uploader__input-wrapper {
        width:100%;
    }
    .image-tips {font-size:12px;color:#666;text-align:center;margin-top:5px;}
    .error {color:#ed6a0c;background:#FFFBE8;padding:5px 16px;font-size:14px;}
</style>
{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
        left-text="返回"
        left-arrow
        @click-left="onBack"
>
    <template #title>
        <span class="text-white">实名认证</span>
    </template>
</van-nav-bar>
<van-notice-bar
        :scrollable="false"
        text="{$user.is_auth_text}"
        color="#1989fa"
        background="#ECF9FF"
></van-notice-bar>
<div class="error" v-if="user.is_auth == 3">
    {$user.auth_check}
</div>
<van-cell-group v-if="user.is_auth == 2 || user.is_auth == 4">
    <van-field
            v-model="user.realname"
            readonly
            label="姓名"
    ></van-field>
    <van-field
            v-model="user.idcard"
            readonly
            label="身份证号"
    ></van-field>
    <div class="idcard-box">
        <van-row >
            <van-col span="9" offset="2">
                <van-image style="width:100%;height:90px;" :src="user.idcard_front_pic"></van-image>
            </van-col>
            <van-col span="9" offset="2">
                <van-image style="width:100%;height:90px;" :src="user.idcard_back_pic"></van-image>
            </van-col>
        </van-row>
    </div>
</van-cell-group>

<van-form @submit="onSubmit" v-if="user.is_auth == 1 || user.is_auth == 3">
    <van-cell-group>
        <van-field
                v-model="user.realname"
                required
                label="真实姓名"
                placeholder="请输入真实姓名"
                :rules="[{ required: true, message: '请输入真实姓名' }]"
        ></van-field>
        <van-field
                v-model="user.idcard"
                required
                label="身份证号"
                placeholder="请输入身份证号"
                :rules="[{ required: true, message: '请输入身份证号' }]"
        ></van-field>
        <div class="idcard-box">
            <van-row>
                <van-col span="9" offset="2">
                    <van-uploader style="width:100%;" :after-read="afterRead" :before-read="uploadFront" :max-size="2 * 1024 * 1024" @oversize="onOversize">
                        <van-image style="width:100%;height:90px;display:block;" :src="user.idcard_front_pic"></van-image>
                    </van-uploader>
                    <div class="image-tips">上传身份证（头像页）</div>
                </van-col>
                <van-col span="9" offset="2">
                    <van-uploader style="width:100%;" :after-read="afterRead" :before-read="uploadBack" :max-size="2 * 1024 * 1024" @oversize="onOversize">
                        <van-image style="width:100%;height:90px;display:block;" :src="user.idcard_back_pic"></van-image>
                    </van-uploader>
                    <div class="image-tips">上传身份证（国徽页）</div>
                </van-col>
            </van-row>
        </div>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                提交
            </van-button>
        </div>
    </van-cell-group>
</van-form>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        //基础
        let user = {$user};
        base.birthday = Vue.ref(user.birthday ? user.birthday.split('-') : []);
        base.has_account = (user.account !== '');
        base.user = Vue.reactive(user);
        base.onBack = () => {
            location.href = "{:url('my/index')}";
        };

        //头像
        base.avatar = Vue.computed(()=>{
            return base.user.avatar ? base.user.avatar : "__COMMON_IMAGES__/default_avatar.png";
        });
        base.beforeRead = (file) => {
            if (file.type.indexOf('image/') === -1) {
                vant.showToast('请上传图片');
                return false;
            }

            return true;
        };
        base.onOversize = () => {
            vant.showToast('文件大小不能超过2MB');
            return false;
        };
        base.uploadFront = (file) => {
            console.log(file);
            const formData = new FormData();
            formData.append("file", file);

            postFile("upload/image",formData).then(({data})=>{
                base.user.idcard_front_pic = data.src;
            });

            return true;
        };
        base.uploadBack = (file) => {
            const formData = new FormData();
            formData.append("file", file);

            postFile("upload/image",formData).then(({data})=>{
                base.user.idcard_back_pic = data.src;
            });

            return true;
        };

        //表单提交
        base.onSubmit = () => {
            if (base.user.idcard_front_pic === '') {
                vant.showToast('请上传身份证（头像页）');
                return false;
            }
            if (base.user.idcard_back_pic === '') {
                vant.showToast('请上传身份证（国徽页）');
                return false;
            }

            postJson('/my/authPost',base.user).then(() => {
                location.reload();
            });
        };

        return base;
    }
</script>
{/block}