<template>
    <div class="lwl-dy-home-bg" :style="{backgroundImage:`url(${homeImg})`}">
        <div class="masking" v-if="isShowResult">
            <img @click="close" class="close" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/lwl/close.png">
            <div class="popup-box success" v-if="amount">
                <img class="gold gold1" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/lwl/gold.png">
                <img class="gold gold2" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/lwl/gold.png">
                <img class="popup-slogan" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/lwl/popup-slogan.png">
                <p class="success-text">恭喜您获得</p>
                <div class="amount">
                    <div class="amount_cnt">
                        <span class="amount_number">{{amount}}</span>
                        <span class="amount_text">元预红包</span>
                    </div>
                </div>
                <img @click="close" class="got-it" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/lwl/got-it.png">
                <p class="success-tips">消费者扫码后发放</p>
            </div>
            <div class="popup-box error" v-else>
                <img v-if="errorType === 'error'" class="error-img" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/lwl/error.png">
                <img v-else class="error-img" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/lwl/waring.png">
                <div class="error-cnt" v-html="resultText"></div>
                <img @click="close" class="got-it" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/lwl/got-it.png">
            </div>
        </div>
    </div>
</template>

<script>
    import actMixin from '@/assets/js/actMixin'
    import channelHelper from '@/assets/js/channelHelper'

    export default {
        name: 'Comp',
        mixins: [actMixin],
        data() {
            return {
                amount: null,
                resultText: null,
                isShowResult: false,
                errorType: 'waring'
            }
        },
        computed: {
            homeImg() {
                return this.compProps.homeImg.val || 'https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/lwl/lwl-home-bg.png';
            }
        },
        methods: {
            close() {
                this.$wx.closeWindow();
            },
            lotteryCallback(res) {
                this.isShowResult = true;
                this.$layerLite.loading.close();
                if (this.isRunEnv) {
                    const {WiningRecords, IsNewJoin} = res.data;
                    if (res.flag) {
                        const {GiftUnitPoints, RecordUser} = WiningRecords[0];
                        if (this.sup8.context.userId !== RecordUser) {
                            this.errorType = 'waring';
                            this.resultText = `<p>数码已被其他导购扫描!</p>`;
                        } else {
                            if (IsNewJoin) {
                                this.amount = GiftUnitPoints;
                            } else {
                                this.errorType = 'waring';
                                this.resultText = `<p>数码已参与活动!</p>`;
                            }
                        }
                    } else {
                        this.errorType = 'error';
                        this.resultText = res.errorCode === '2' ? `<p>很遗憾</p><p>您本次未中奖!</p>` : decodeURIComponent(res.msg);
                    }
                } else {
                    this.amount = 18.8;
                }
                this.isShowResult = true;
            },
            init() {
                this.ActivityType = 10;
                this.TargetPeople = 1;
                this.$layerLite.loading.open();
                this.checkIsRegister().then(() => {
                    this.onLottery();
                });
            }
        },
    }
</script>

<style scoped>
    .lwl-dy-home-bg {
        width: 100%;
        min-height: 100vh;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center center;
        position: relative;
        text-align: center;
    }

    .env-design .lwl-dy-home-bg {
        min-height: 554px;
    }

    .masking {
        background: rgba(0, 0, 0, .8);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100vh;
    }

    .close {
        width: 0.57rem;
        height: 0.58rem;
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .popup-box {
        background: url("https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/lwl/popup-bg.png") no-repeat center center;
        width: 5.83rem;
        height: 5.48rem;
        background-size: 100% 100%;
        position: absolute;
        left: 0.8rem;
        top: 3rem;
    }

    .popup-box.success {
        position: relative;
    }

    .popup-box.success .gold {
        position: absolute;
        width: 0.9rem;
        height: 0.94rem;
    }

    .popup-box.success .gold.gold1 {
        right: -.4rem;
        top: -.3rem;
    }

    .popup-box.success .gold.gold2 {
        left: -.3rem;
        bottom: 0.5rem;
    }

    .popup-box.success .popup-slogan {
        width: 4.1rem;
        height: 0.88rem;
        display: block;
        margin-left: 1rem;
        position: relative;
        top: -.45rem;
    }

    .success-text {
        color: #ffe5c4;
        font-weight: bold;
        font-size: 0.38rem;
        letter-spacing: 2px;
    }

    .amount {
        background: url("https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/lwl/amount.png") no-repeat center center;
        width: 6.91rem;
        height: 5.43rem;
        background-size: 100% 100%;
        position: absolute;
        top: 0;
        left: -.35rem;
        text-align: center;
    }

    .amount_number {
        color: #ffe5c4;
        font-weight: bold;
        font-size: 1rem;
    }

    .amount_text {
        color: #ffe5c4;
        font-weight: bold;
        font-size: 0.26rem;
    }

    .amount_cnt {
        padding-top: 2rem;
    }

    .got-it {
        width: 1.29rem;
        height: 0.4rem;
        position: relative;
        z-index: 1;
    }

    .success .got-it {
        top: 2.2rem;
    }

    .success-tips {
        color: #741401;
        font-size: 0.26rem;
        position: absolute;
        bottom: 0.25rem;
        left: 2rem;
    }

    .error-img {
        margin: 0.36rem auto;
        width: 1.99rem;
        height: 1.99rem;
    }

    .error-cnt {
        color: #ffe5c4;
        font-weight: bold;
        font-size: 0.32rem;
        width: 80%;
        margin: 0 auto 0 auto;
        min-height: 1rem;
    }
</style>
