@extends('layouts.base')
@section('title', '认证详情')
@section('content')
    <style>
        .panel{
            margin-bottom:10px!important;
            border-radius: 10px;
            padding-left: 20px;
        }
        .panel .active a {
            background-color: #29ba9c!important;
            border-radius: 18px!important;
            color:#fff;
        }
        .panel a{
            border:none!important;
            background-color:#fff!important;
        }
        .content{
            background: #eff3f6;
            padding: 10px!important;
        }
        .con{
            padding-bottom:20px;
            position:relative;
            border-radius: 8px;

            min-height: 100vh;
            background: #fff;
        }
        .con .setting .block{
            padding:10px;
            background-color:#fff;
            border-radius: 8px;
            margin-bottom:10px;
        }
        .con .setting .block .title{
            font-size:18px;
            margin-bottom:32px;
            display:flex;
            align-items:center;
            justify-content:space-between;
        }
        .confirm-btn{
            width: 100%;
            position:absolute;
            bottom:0;
            left:0;
            line-height:63px;
            background-color: #ffffff;
            box-shadow: 0px 8px 23px 1px
            rgba(51, 51, 51, 0.3);
            background-color:#fff;
            text-align:center;
        }
        .add{
            width: 154px;
            height: 36px;
            border-radius: 4px;
            border: solid 1px #29ba9c;
            color:#29ba9c;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .el-table--fit{
            margin-top:-10px;
        }
        b{
            font-size:14px;
        }
        .el-table--border::after, .el-table--group::after, .el-table::before{
            background-color:#fff;
        }
    </style>
    <div id='re_content' >
        <div class="con">
            <div class="setting">
                <div style="background: #eff3f6;width:100%;height:15px;"></div>
                <div class="block">
                    <div class="title">
                        <div style="display:flex;align-items:center;">
                            <span style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;">
                            </span><b>认证详情</b>
                        </div>
                    </div>
                </div>
                <el-form ref="form" label-width="20%">
                    <div class="vue-head">
                        <div class="vue-main-form">
                            <el-form-item label="认证姓名" prop="">
                                <div>[[detail.name]]</div>
                            </el-form-item>
                            <el-form-item label="手机号" prop="">
                                <div>[[detail.mobile]]</div>
                            </el-form-item>
                            <el-form-item label="认证方式" prop="">
                                <div v-if="detail.auth_type==1">刷脸认证</div>
                                <div v-if="detail.auth_type==2">手机号认证</div>
                                <div v-if="detail.auth_type==3">银行卡认证</div>
                            </el-form-item>
                            <el-form-item label="身份证号" prop="">
                                <div>
                                    [[detail.id_card]]
                                    <el-button style="margin-left: 20px" size="mini" type="primary" @click="setPhone()">查看完整号码</el-button>
                                </div>
                            </el-form-item>
                            <el-form-item label="认证状态" prop="">
                                <div v-if="detail.auth_status==1" style="color: #0ad76d">已认证</div>
                                <div v-else>未认证</div>
                            </el-form-item>
                            <el-form-item label="认证手机号" prop="">
                                <div>[[detail.auth_mobile]]</div>
                            </el-form-item>
                            <el-form-item label="认证银行卡号" prop="">
                                <div>[[detail.bank]]</div>
                            </el-form-item>
                            <el-form-item label="开始认证时间" prop="">
                                <div>[[detail.created_at]]</div>
                            </el-form-item>
                            <el-form-item label="完成认证时间" prop="">
                                <div>[[detail.finish_time]]</div>
                            </el-form-item>
                        </div>
                    </div>
                </el-form>
                <el-dialog :visible.sync="phone_show" width="450px" center title="验证手机号">
                    <div>
                        <el-form ref="form1" label-width="15%">
                            <el-form-item label="手机号">
                                <el-input v-model="form1.phone" style="width:60%" placeholder="请输入手机号"></el-input>
                                <el-button size="small" type="primary" @click="getVerifyCode()" :disabled="form1.verify_code_disabled">
                                    获取验证码[[form1.last_time]]
                                </el-button>
                            </el-form-item>
                            <el-form-item label="验证码">
                                <el-input v-model="form1.verify_code" style="width:60%" placeholder="请输入短信验证码"></el-input>
                            </el-form-item>
                            <div style="text-align: center">
                                <el-button type="primary" @click="submitVerify()">提交</el-button>
                                <el-button type="danger" @click="cancel()">取消</el-button>
                            </div>
                        </el-form>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#re_content",
            delimiters: ['[[', ']]'],
            data() {
                let detail = {!! json_encode($detail) ?: '{}' !!};
                return {
                    loading:false,
                    all_loading:false,
                    detail: detail,
                    phone_show:false,
                    phone_close:false,
                    form1:{
                        phone:'',
                        verify_code:'',
                        verify_code_disabled:false,
                        last_time:'',
                    },
                }
            },
            mounted () {

            },
            methods: {
                setPhone() {
                    this.phone_show = true;
                },
                cancel() {
                    this.phone_show = false;
                },
                //获取验证码
                getVerifyCode() {
                    let json;
                    if (!this.form1.phone) {
                        this.$message({message: '请填写手机号',type: 'error'});
                        return;
                    }
                    json = {
                        phone : this.form1.phone,
                    };
                    if (this.timer1) {
                        return;
                    } else {
                        this.form1.verify_code_disabled = true;
                        this.form1.last_time = 60;
                        this.timer1 = setInterval(() => {
                            if (this.form1.last_time > 0 && this.form1.last_time <= 60) {
                                this.form1.last_time--;
                            } else {
                                this.form1.verify_code_disabled = false;
                                this.form1.last_time = "";
                                clearInterval(this.timer1);
                                this.timer1 = null;
                            }
                        }, 1000)
                    }
                    let loading = this.$loading({target: document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post("{!! yzWebFullUrl('plugin.real-name-auth.admin.controllers.list.sendCode') !!}",json).then(function(response) {
                        if (response.data.result) {
                            console.log(response.data.data)
                            this.$message({message: response.data.msg,type: 'success'});
                        } else {
                            this.$message({message: response.data.msg,type: 'error'});
                            this.form1.last_time = '';
                        }
                        loading.close();
                    }, function(response) {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                    })
                },
                //提交验证
                submitVerify() {
                    let loading = this.$loading({target: document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    let json;
                    json = {
                        phone : this.form1.phone,
                        code : this.form1.verify_code,
                        auth_mobile : this.detail.auth_mobile,
                    };
                    this.$http.post("{!! yzWebFullUrl('plugin.real-name-auth.admin.controllers.list.checkCode') !!}",json).then(function(response) {
                        if (response.data.result) {
                            this.$message({message: response.data.msg,type: 'success'});
                            this.phone = this.form1.phone;
                            this.phone_show = false;
                            this.detail.id_card = response.data.data.data.id_card;
                        } else {
                            this.$message({message: response.data.msg,type: 'error'});
                        }
                        loading.close();
                    }, function(response) {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                    })
                },
                //
            },
        });
    </script>
@endsection