<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="top-brand-wrap">
            <h1 class="title">5G 赛道</h1>
        </div>
        <div class="info-card flex-container">
            <div class="form">
                <van-field required v-model="formData.Name" clearable  placeholder="请输入姓名" />
                <van-field required type='number' v-model="formData.Phone" clearable placeholder="请输入手机号" />
            </div>
            <div class="button register" @click="onRegister">注册</div>
            <div class="button" @click="onLogin">登陆</div>
        </div>
        <!-- <div class="hint">
            已使用“5G赛道”小程序完成人脸注册的用户，请直接输入注册时的姓名和手机号码，登陆并领取照片。
        </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 { Field, Toast, CellGroup, Dialog } from 'vant';
import { Login } from 'api/home'

import imgs1 from '@/assets/image/imgs-01.jpg'
import imgs2 from '@/assets/image/imgs-02.jpg'

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

    },
    watch:{
        Code(val){
            sessionStorage.Code = val
        }
    },
    data(){
        return {
            photo:'',
            formData:{
                Name:'',
                Phone:'',
            },
            Code:null,            //存入本地的code
        }
    },
    methods:{
        onLogin(){
            if(!this.formData.Name){
                this.$Toast.error('请填写姓名！')
                return 
            }else if(!this.formData.Phone || this.formData.Phone.length != 11){
                this.$Toast.error('请填写正确的手机号！')
                return 
            }else{
                this.$Loading.show('正在登陆...')
                Login(this.formData).then(res => {
                    if(res.code === 0){
                        this.$Toast.success('登陆成功！')
                        this.$router.push('/photos')
                        localStorage.images = JSON.stringify(res.data)
                        // localStorage.images = JSON.stringify([imgs1,imgs2,imgs1,imgs2])
                    }else{
                        this.$Toast.error('登陆失败：' + res.msg)
                    }
                    this.$Loading.hidden()
                }).catch(err => {
                    this.$Loading.hidden()
                })
            }
        },
        onRegister(){
            this.$router.push('/home')
        }
    }
}
</script>