<template>
    <div class='home-wrap'>
        <div class="background-wrap">
            <img class="background-image" src="@/assets/image/track.jpg" />
        </div>
        <!-- <div class="top-bgimg-wrap">
            <img class="top-img" src="@/assets/image/bgimg-top.png"/>
            <div class="logo-wrap">
                <img class="yidong-img" src="@/assets/image/yidong.png"/>
                <img class="fiveG-img" src="@/assets/image/5g.png"/>
            </div>
        </div> -->
        <div class="info-card flex-container">
            <add-photo @changePhoto="changePhoto" @readyHandle='readyHandle'></add-photo>
            <div class="form">
                <van-field required v-model="formData.Name" clearable  placeholder="请输入姓名" />
                <van-field required type='number' v-model="formData.Phone" clearable placeholder="请输入手机号" />
                <!-- <van-field required type='text' v-model="formData.Code" clearable placeholder="请输入参赛编号" /> -->
            </div>
            <div class="button" @click="onSubmit">提交</div>
        </div>
        <!-- <div class="hint">
            温馨提示：请使用只包含本人正面头像的清晰照片进行注册
        </div> -->
        <!-- <img class="bottom-img" src="@/assets/image/bgimg-bottom.png" alt=""> -->
        <!-- <van-image-preview v-model="showPreview" :images="images"> </van-image-preview> -->
    </div>
</template>

<script>
import addPhoto from "./components/addPhoto"
import { Field, Dialog } from 'vant';
import { Runnerverify} from 'api/home'

export default {
    name:'Home',
    components:{
        addPhoto,
        [Field.name]:Field,
        [Dialog.name]:Dialog 
    },
    activated(){

    },
    watch:{
        Code(val){
            sessionStorage.Code = val
        }
    },
    data(){
        return {
            photo:'',
            formData:{
                Name:'',
                Phone:'',
                Code:''
            },
            Code:null,            //存入本地的code
        }
    },
    methods:{
        changePhoto(imgBase64){
            this.photo = imgBase64
            this.$Loading.hidden()
        },
        readyHandle(){
            this.$Loading.show('正在处理图片...')
        },
        onSubmit(){
            if(this.verifyForm()){
                let data = {
                    Name: this.formData.Name,
                    facePic: this.photo,
                    Phone:this.formData.Phone
                }
                this.$Loading.show('正在注册...')
                Runnerverify(data).then(res => {
                    if(res.code === 0){
                        this.$Toast.success('注册成功！')
                        this.$router.push('/photos')
                        localStorage.images = JSON.stringify(res.data)
                    }else if(res.code === 2004){     //号码已被使用
                        Dialog.alert({
                            title: '温馨提示',
                            message: '号码已被占用，请使用新的手机号码进行注册！'
                        });
                    }else if(res.code == 2021){      //如果返回没有照片则提示用户
                        localStorage.images = []
                        this.$router.push({
                            path:'/photos',
                            query:{
                                type:'hintPage'
                            }
                        })
                    }else{
                        this.$Toast.error('注册失败：' + res.msg)
                    }
                    this.$Loading.hidden()
                }).catch(err => {
                    this.$Loading.hidden()
                })
            }
        },
        verifyForm(){                   //表单校验
            // let idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[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|x)$/;
            // let IDcardFlag = idcardReg.test(this.formData.IDcard) ? true : false;
            let NameFlag = this.formData.Name.length && this.formData.Name.length > 0 ? true : false
            if(!this.photo){
                this.$Toast.error('请上传人脸照片！')
                return
            }else if(!NameFlag){
                this.$Toast.error('请填写姓名！')
                return
            }else if(this.formData.Phone.length !== 11){
                this.$Toast.error('请填写正确的手机号码！')
                return
            }else{
                return true
            }
        }
    }
}
</script>