<template>
    <div class="admin-wrap">
        <!-- <div class="title">操作中心</div> -->
        <div class="scan-wrap">
            <div class="main" @click="onScan">
                <img src="@/assets/image/scan1.png" alt="" class="outside">
                <img src="@/assets/image/scan2.png" alt="" class="interior">
            </div>
        </div>

        <div class="info">
            <div class="main">
                <div class="detail">
                    <div class="main">
                        <div class="temp">
                            <div class="userInfo">
                                <span>姓名：</span>
                                <span class="value">{{userData.Name}}</span>
                            </div>
                            <div class="userInfo">
                                <span class='type'>身份证号：</span>
                                <span class="value">{{idCard}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="img-wrap">
                    <!-- <div class="imgs" :style="{backgroundImage:`url(${userData.imgUrl})`}" @click="showPreview = true"></div> -->
                    <van-image
                    class="imgs"
                    fit="contain"
                    :src="userData.FaceImgUrl"
                    @click="showPreview = true"
                    />
                </div>
            </div>
        </div>

        <div class="input-wrap">
            <input v-model="code" type="text" placeholder='请输入编号'>
            <div class="button" @click="onSubmit">确认发放</div>
        </div>
        <van-image-preview
        v-model="showPreview"
        :images="images"
        >
        </van-image-preview>
        <img class="bottom-img" src="@/assets/image/logo.png" alt="">
        
    </div>
    
</template>
<script>
import {Icon, ImagePreview, Image,Dialog } from 'vant'
import WeChatScan from 'utils/WeChatScan.js'
import Vue from 'vue';
Vue.use(ImagePreview);
import { GetPeopleData, AddNo } from 'api/admin'


export default {
    name:"Admin",
    data(){
        return {
            userData:{IdCard:'',Name:''},
            showPreview:false,
            code:'',
        }
    },
    components:{
        [Icon.name] :Icon,
        [Image.name]:Image,
        [Dialog.name]:Dialog,
    },
    computed:{
        images(){
            return [this.userData.FaceImgUrl]
        },
        idCard(){
            if(this.userData.IdCard){
                let str = this.userData.IdCard
                let difference = str.length - 5 - 3;
                return str.slice(0, 5) + '*'.repeat(difference) + str.slice(-3)
            }else{
                return ''
            }

            // let replaceStr = new Array(difference + 1).join('*')
            // return this.userData.IdCard.replace(/^(.{5})(?:\d+)(.{3})$/,'$1' + replaceStr + '$2');
        }
    },
    activated(){
        this.$Toast.success('欢迎您！管理员！')
    },
    methods:{
        onScan(){
            WeChatScan(this.handleScanCode)     //调用微信扫一扫一系列流程，传入回调函数
        },
        handleScanCode(ScanCode){
            this.userData = {}
            GetPeopleData(ScanCode).then(res => {
                if(res.code === 0){
                    this.$Toast.success('查询成功！')
                    this.userData = res.data
                    if(res.data.No){
                        Dialog.alert({
                            title: '改用户已经绑定，无需再次绑定',
                            message: '绑定编号为：' + this.userData.No
                        });
                    }
                }else{
                    this.$Toast.error(res.msg)
                }
            })
        },
        onSubmit(){
            var reg =  new RegExp('^[0-9]*$')
            if(this.code){
                if(!reg.test(this.code)){
                    this.$Toast.error('请输入数字！')
                    return 
                }
                AddNo(this.userData.CodeMd5,this.code).then(res=> {
                    if(res.code != 0 && res.code != 2018){        
                        this.$Toast.error('绑定失败：' + res.msg)
                    }
                    if(res.code === 0){
                        this.$Toast.success('绑定成功！')
                    }else if(res.code === 2018){
                        Dialog.alert({
                            title: '改用户已经绑定，请勿重复绑定',
                            message: '绑定编号为：' + this.userData.No
                        });
                    }
                    this.userData = {}     //操作成功清空
                    this.code = ''
                })
            }else{
                this.$Toast.error('请输入编号')
            }
        }
    }
}
</script>


<style>
@keyframes rotate{       
            0%{
                transform: rotate(0deg) scale(1);
            }
            50%{
                transform:rotate(180deg) scale(1.2)
            }
            100%{
                transform: rotate(360deg) scale(1);

            }
        }
</style>


<style lang="stylus" scoped>
.admin-wrap
    width 100%
    .bottom-img
        position absolute 
        bottom 0px
        width 100%
        left 0
    .title
        padding 10px
        font-size 14px
        background rgb(64,158,255)
        text-align center
        color white
    .scan-wrap
        display flex
        justify-content center
        padding 30px 0
        .main
            width 25%
            position relative
            .outside
                width 100%
                animation rotate 5s linear 0s normal infinite
            .interior
                position absolute 
                left 50%
                top 50%
                transform translate(-50%,-50%)
                width 50%
    .info
        width 90%
        border-radius 5px
        margin 0 auto 
        min-height 100px
        background white
        overflow hidden
        .title
            background #eee
            color black
        .main
            width 100%
            padding 10px
            box-sizing border-box
            display flex
            justify-content space-between
            .img-wrap
                width 26%
                height 0
                background rgb(250,250,250)
                padding-bottom 30%
                box-sizing border-box
                position relative
                .imgs
                    position absolute
                    left 5px
                    top 5px
                    right 5px
                    bottom 5px
            .detail
                width 72%
                box-sizing border-box
                vertical-align top
                height 0
                padding-bottom 30%
                background rgb(250,250,250)
                position relative
                font-size 16px
                .main
                    position absolute
                    left 0 
                    right 0
                    top 0
                    bottom 0
                    display flex
                    justify-content center
                    align-items center
                    .temp
                        width 100%
                        .userInfo 
                            color #666 
                            margin 10px 0
                            word-wrap break-word
                            white-space:normal
                            font-size 14px
                            .type
                                width 5em
                                display inline-block
                                vertical-align top
                            .value
                                width calc(100% - 5em)
                                display inline-block
                                color #0086ff
                                font-size 15px
    .input-wrap
        background white
        margin 0 auto
        width 90%
        border-radius 5px
        overflow hidden
        padding 20px 0 
        display flex
        flex-direction column
        align-items center
        margin-top 5px
        box-sizing border-box
        position relative
        z-index 999
        input
            border none 
            border-bottom 1px solid rgb(64,158,255)
            width 110px
            text-align center
            padding 10px
            border-radius 0
            font-size 25px
            color rgb(64,158,255)
            &::-webkit-input-placeholder
                text-align center
                font-size 16px
                color rgba(64,158,255,0.7)
        .button
            Button()
            margin-top 25px
            






</style>


