<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="flex-container">
            <template v-if="!hintFlag">
                <div class="top-brand-wrap">
                    <h1 class="title">您的 5G 纪念册</h1>
                </div>
                <div class="main">
                    <div class="imgs-wrap">
                        <div class="imgs-item" v-for="(item,index) in imgs" :key="index">
                            <img :src="item" alt="" >
                        </div>
                    </div>
                    <div class="hint" v-show='showHint'>
                        <span>您没有任何纪念照哦！</span>
                    </div>
                </div>
            </template>
            <div class="button" @click="onRegister">重新注册</div>
            <template v-if="hintFlag">
                <div class="title">您的5G纪念册为空</div>
                <div class="hint-wrap">
                    <div class="main">
                        <div class="info-title">温馨提示</div>
                        <div class="info">
                            <p>1、为保证识别效果，请使用只有自己正面头像的清晰照片注册；</p>
                            <p>2、若之前上传的照片效果不佳，没有匹配到照片，可以使用新的手机号码和头像照片，重新注册。</p>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <!-- <img class="bottom-img" src="@/assets/image/bgimg-bottom.png" alt=""> -->
        <!-- <van-image-preview v-model="showPreview" :images="imgs"> </van-image-preview> -->
    </div>
</template>

<script>
import { Field, CellGroup, Dialog } from 'vant';
// import { ImagePreview} from 'vant'
// import Vue from 'vue';
// Vue.use(ImagePreview);
import { GetUserAttestation } from 'api/home'
import drawAndShareImage from '@/utils/waterMark'

export default {
    name:'Home',
    components:{
        [Field.name]:Field,
        [CellGroup.name]:CellGroup,
        [Dialog.name]:Dialog,
    },
    activated(){
        this.hintFlag = this.$route.query.type
        if(this.hintFlag) return 
        let imgs = JSON.parse(localStorage.images)
        if(imgs){
            console.log(imgs,47)
            if(imgs.length === 0){
                this.showHint = true
            }
            this.handlerMark(imgs)
        }
    },
    data(){
        return {
            imgs:[],
            hintFlag:false,       //空白页提示flag
            // showPreview:false,
            showHint:false
        }
    },
    methods:{
        onRegister(){
            Dialog.alert({
                title: '温馨提示',
                message: '请务必使用新的手机号码重新注册！'
            }).then(() => {
                this.$router.replace('/home')
            });
        },
        handlerMark(arr){
            this.imgs = []
            arr.forEach(ele => {
                this.$Loading.show('正在处理图片...')
                drawAndShareImage(ele).then(res =>{
                    this.imgs.push(res)
                    this.$Loading.hidden()
                })
            })
        }
    }
}
</script>