<template>
    <div class='home-wrap'>
        <div class="background-wrap">
            <img class="background-image" src="@/assets/image/track.jpg" />
        </div>
        <div class="top-brand-wrap">
            <h1 class="title">注册</h1>
        </div>
        <div class="card flex-container">
            <!-- <add-photo @changePhoto="changePhoto" @readyHandle='readyHandle'></add-photo> -->
            <van-form>
                <van-cell-group inset>
                    <van-field required name="uploader" label="照片">
                        <template #input>
                            <van-uploader v-model="photoList" :after-read="readyHandle" :max-count="1" />
                        </template>
                    </van-field>
                    <van-field required v-model="formData.Name" name="姓名" label="姓名" clearable placeholder="请输入姓名" />
                    <van-field required type='number' v-model="formData.Phone" name="手机号" label="手机号" clearable placeholder="请输入手机号" />
                </van-cell-group>
                <van-button type="primary" block round @click="onSubmit">提交</van-button>
            </van-form>
        </div>
    </div>
</template>

<script>
import { Form, Field, CellGroup, Dialog, Toast, Button, Uploader } from 'vant'
import { JudgeCompress, RotateImage, CheckFile, FiletoDataURL } from '@/utils/handleImage'
import { Runnerverify } from 'api/home'

export default {
    name: 'Home',
    components:{
        [Form.name]: Form,
        [Field.name]: Field,
        [Dialog.name]: Dialog,
        [Toast.name]: Toast,
        [CellGroup.name]: CellGroup,
        [Button.name]: Button,
        [Uploader.name]: Uploader
    },
    activated(){

    },
    watch: {
        Code(val){
            sessionStorage.Code = val
        }
    },
    data(){
        return {
            photo: '',
            formData: {
                Name: '',
                Phone: '',
                Code: ''
            },
            Code: null,
            photoList: []
        }
    },
    methods: {
       readyHandle(file) {
            let _this = this
            if (file.file){
                var imageFile = CheckFile(file.file)
                if (!imageFile){
                    Toast.fail('图片文件格式错误！')
                    return
                } else {
                    RotateImage(imageFile).then(res => {         //传入文件，旋转后返回文件进行压缩
                        JudgeCompress(res, this.compressSize,0.95).then(res => {    //传入文件，压缩返回压缩后的文件
                            FiletoDataURL(res).then(res => {    //传入文件，返回base64 DataURL
                                _this.photo = res
                                _this.photoList = [{url: res, isImage: true}]
                            })
                        })
                    })
                    Toast.success('上传成功')
                }
            }
        },
        onSubmit(){
            if (this.verifyForm()){
                let data = {
                    Name: this.formData.Name,
                    facePic: this.photo,
                    Phone: this.formData.Phone
                }
                Toast.loading({
                    message: '正在注册……',
                    forbidClick: true,
                });
                Runnerverify(data).then(res => {
                    if (res.code === 0){
                        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 {
                        Toast.fail('注册失败：' + res.msg)
                    }
                    Toast.clear()
                }).catch(err => {
                    Toast.fail('错误：' + err)
                    Toast.clear()
                })
            }
        },
        verifyForm(){
            if (!this.photo){
                Toast.fail('请上传人脸照片！')
                return
            } else if (!this.formData.Name.length){
                Toast.fail('请填写姓名！')
                return
            } else if (this.formData.Phone.length !== 11){
                Toast.fail('请填写正确的手机号码！')
                return
            } else {
                return true
            }
        }
    }
}
</script>