<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="flex-container container-wrap">
            <template v-if="!hintFlag">
                <div v-for="(item,index) in imgs" :key="index">
                    <van-image :src="item" fit="cover" alt="" />
                </div>
                <div v-show='showHint'>
                    <span>您没有任何纪念照哦！</span>
                </div>
            </template>
            <template v-if="hintFlag">
                <div class="title">未找到和您匹配的纪念照</div>
                <p>为保证识别效果，请使用只有自己正面头像的清晰照片注册；</p>
                <p>若之前上传的照片效果不佳，没有匹配到照片，可以重新注册。</p>
            </template>
            <div class="button-wrap">
                <van-button type="primary" block round @click="onShare">分享</van-button>
                <van-button type="primary" block round class="register" @click="onRegister">重新注册</van-button>
            </div>
        </div>
    </div>
</template>

<script>
import { Field, CellGroup, Dialog, Image, Button, Toast, Lazyload } from 'vant';
// import { GetUserAttestation } from 'api/home'
import drawAndShareImage from '@/utils/waterMark'

export default {
    name: 'Home',
    components: {
        [Field.name]: Field,
        [CellGroup.name]: CellGroup,
        [Dialog.name]: Dialog,
        [Image.name]: Image,
        [Button.name]: Button,
        [Toast.name]: Toast,
        [Lazyload.name]: Lazyload,
    },
    created(){ // 此处用 activated 则不会被调用，不知道为啥
        this.hintFlag = this.$route.query.type
        if (this.hintFlag) return
        let imgs = JSON.parse(localStorage.images)
        if (imgs){
            console.log(imgs)
            if (imgs.length === 0){
                this.showHint = true
            }
            // this.handlerMark(imgs)
            // console.log(imgs)
            this.imgs = imgs
        } else {
            this.showHint = true
        }
    },
    data(){
        return {
            imgs: [],
            hintFlag: false, // hintFlag: 未找到该用户匹配的纪念照
            // showPreview:false,
            showHint: false
        }
    },
    methods: {
        onRegister(){
            Dialog.alert({
                title: '提示',
                message: '请使用新的手机号码重新注册。'
            }).then(() => {
                this.$router.replace('/home')
            });
        },
        onShare(){
            Dialog.alert({
                title: '提示',
                message: '分享功能尚未开发完善。'
            }).then(() => {
                // this.$router.replace('/home')
            });
        },
        handlerMark(arr){
            this.imgs = []
            arr.forEach(ele => {
                Toast.loading({
                    message: '正在处理图片……',
                    forbidClick: true,
                });
                drawAndShareImage(ele).then(res => {
                    this.imgs.push(res)
                    Toast.clear()
                })
            })
        }
    }
}
</script>