<template>
    <div id="FullScreen" class="sanyuan">
        <img class="logo" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/sanyuan/logo.png">
        <img @click="isShowRule=true" class="rule-btn" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/sanyuan/rule-btn.png">
        <img class="person" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/sanyuan/person.png">
        <img class="slogan" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/sanyuan/slogan.png">
        <div class="video">
            <div class="video-main">
                <!--<img @click="playVideo = true" v-show="!playVideo" class="video-poster"-->
                <!--     src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/sanyuan/video-poster.png">-->
                <iframe width="100%" height="100%" frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=v09578adthz"
                        allowFullScreen="false"></iframe>
            </div>
        </div>
        <img @click="onLottery" class="start" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/sanyuan/start.png">
        <sanyuan-rule :text="actRuleContent" v-model="isShowRule"/>
        <sanyuan-hb-result v-model="isShowHb" :result="lotteryInfo"/>
        <sanyuan-waring v-model="isWaring" :text="waringText"/>
        <sanyuan-card v-model="isShowCard" :result="lotteryInfo"/>
        <sanyuan-network-error v-model="isShowNetworkError"/>
    </div>
</template>

<script>
    import actMixin from '@/assets/js/actMixin'
    import SanyuanRule from "@/components/marketing/sanyuan/components/SanyuanRule";
    import SanyuanHbResult from "@/components/marketing/sanyuan/components/SanyuanHbResult";
    import SanyuanWaring from "@/components/marketing/sanyuan/components/SanyuanWaring";
    import SanyuanCard from "@/components/marketing/sanyuan/components/SanyuanCard";
    import SanyuanNetworkError from "@/components/marketing/sanyuan/components/SanyuanNetworkError";
    import apiHelper from "@/assets/js/apiHelper";

    export default {
        name: 'Comp',
        components: {SanyuanNetworkError, SanyuanCard, SanyuanWaring, SanyuanHbResult, SanyuanRule},
        mixins: [actMixin],
        data() {
            return {
                playVideo: false,
                isShowRule: false,
                isShowHb: false,
                isWaring: false,
                isShowCard: false,
                isShowNetworkError: false,
                waringText: '',
                giftType: null,
            }
        },
        methods: {
            lotteryError() {
                this.isShowNetworkError = true;
            },
            lotteryCallback(res) {
                const {flag, msg, data} = res;
                if (!flag) {
                    this.isWaring = true;
                    this.waringText = decodeURIComponent(msg);
                    return;
                }
                const noNewJoinText = '该二维码已参与活动!';
                const {WiningRecords, IsNewJoin} = data;
                this.lotteryInfo = WiningRecords[0];
                const {GiftType, Id} = this.lotteryInfo;
                if ((GiftType === '1' || GiftType === '2') && !IsNewJoin) {
                    this.isWaring = true;
                    this.waringText = noNewJoinText;
                    return;
                }
                if (GiftType === '1') {
                    this.isShowCard = true;
                } else if (GiftType === '2') {
                    this.isShowHb = true;
                } else if (GiftType === '3') {
                    this.$layerLite.loading.open();
                    apiHelper.sanyuanExistsReceiveRewards({
                        Winid: Id,
                        EnterpriseNo: this.enterpriseNo
                    }, ({flag}) => {
                        if (flag) {
                            this.isWaring = true;
                            this.waringText = noNewJoinText;
                        } else {
                            this.isShowHb = true;
                        }
                        this.$layerLite.loading.close();
                    }, () => {
                        this.$layerLite.loading.close();
                        this.lotteryError();
                    });
                }
            },
            init() {
                this.checkIsRegister(false);
            }
        },
        mounted() {
        }
    }
</script>

<style scoped>
    .sanyuan {
        background: url("https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/sanyuan/bg.png") center center no-repeat;
        width: 100%;
        height: 100vh;
        background-size: 100% 100%;
        position: relative;
        font-family: "PingFang SC", Microsoft YaHei, sans-serif;
    }

    #part_phone .sanyuan {
        width: 320px;
        height: 540px;
    }

    .logo {
        width: 1.56rem;
        height: 0.91rem;
        position: absolute;
        left: 0.2rem;
        top: 0.2rem;
    }

    .rule-btn {
        width: 0.81rem;
        height: 0.65rem;
        position: absolute;
        right: 0.28rem;
        top: 0.38rem;
    }

    .person {
        width: 5.1rem;
        height: 6.87rem;
        position: absolute;
        left: -1rem;
        top: 1.68rem;
    }

    .slogan {
        width: 6.21rem;
        height: 2.6rem;
        position: absolute;
        right: 0.45rem;
        top: 2.93rem;
    }

    .video {
        background: url("https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/sanyuan/video-bg.png") center center no-repeat;
        width: 6.65rem;
        height: 3.99rem;
        background-size: 6.65rem 3.99rem;
        position: absolute;
        top: 5.66rem;
        left: 0.425rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .video-main, .video-poster {
        width: 6.14rem;
        height: 3.6rem;
    }

    .start {
        width: 6.79rem;
        height: 1.17rem;
        position: absolute;
        left: 0.355rem;
        top: 10rem;
    }
</style>
