<template>
    <div class="xnf-home-bg">
        <div class="xnf-head">
            <img class="logo" :src="compProps.logo.val">
            <div class="xnf-head-right" v-if="checkDigitCodeChannelFlag && ProductId">
                <span @click="ruleVisible = true">活动规则</span>
                <span @click="toShop">积分商城</span>
            </div>
        </div>
        <img class="homeImg" :src="compProps.homeImg.val">
        <div class="codeInfo" v-if="productName">
            <p>产品名称：{{productName}}</p>
            <p>防&nbsp;&nbsp;伪&nbsp;码：<span class="code">{{code}}</span></p>
        </div>
        <p class="result-text">{{resultFW}}</p>
        <div v-show="checkDigitCodeChannelFlag && ProductId" class="lqjf" @click="toResult">领取积分</div>
        <rule v-model="ruleVisible" :rule-content="actRuleContent"></rule>
    </div>
</template>

<script>
    import actMixin from '@/assets/js/actMixin'
    import channelHelper from '@/assets/js/channelHelper'
    import Rule from "../../temp005/components/Rule";

    export default {
        name: 'Comp',
        mixins: [actMixin],
        components: {Rule},
        data() {
            return {
                ruleVisible: false,
                resultFW: '',
                productName: '',
                checkDigitCodeChannelFlag: false
            }
        },
        methods: {
            toResult() {
                this.checkIsRegister().then(() => {
                    this.$parent.changeSelectedPage('3-3');
                });
            },
            toShop() {
                window.open(this.compProps.shopURL.val);
            },
            CheckDigitCodeChannel() {
                if (!this.isRunEnv) return Promise.resolve({flag: true});
                return new Promise(resolve => {
                    channelHelper.CheckDigitCodeChannel({
                        EnterpriseNo: this.enterpriseNo,
                        ActivityId: this.activityId,
                        DigitCode: this.code
                    }, res => {
                        resolve(res);
                    });
                });
            },
            init() {
                this.$layerLite.loading.open();
                Promise.all([this.getAntifakeInfo(), this.getProductInfo(), this.CheckDigitCodeChannel()]).then(([AntifakeInfo, ProductInfo, {flag: checkDigitCodeChannelFlag}]) => {
                    this.resultFW = AntifakeInfo.data.Content;
                    const {data: productInfoData} = ProductInfo;
                    const {Name: productName = '未查询到产品'} = productInfoData || {};
                    this.productName = productName;
                    this.checkDigitCodeChannelFlag = checkDigitCodeChannelFlag;
                    this.$layerLite.loading.close();
                }).catch((error) => {
                    this.$layerLite.toast(error);
                    this.$layerLite.loading.close();
                });
            },
        },
        mounted() {
            // this.$parent.changeSelectedPage('3-3');
            this.$layerLite.loading.open();

        }
    }
</script>

<style scoped>
    .xnf-home-bg {
        min-height: 100vh;
    }

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

    .xnf-head {
        background: #3c3c41;
        height: 1.4rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo {
        width: 2.29rem;
        height: 0.57rem;
        margin-left: 0.6rem;
    }

    .xnf-head-right {
        margin-right: 0.6rem;
    }

    .xnf-head-right > span {
        color: #00e696;
        font-size: 0.28rem;
        margin-left: 5px;
    }

    .homeImg {
        width: 100%;
        height: 2.63rem;
    }

    .codeInfo {
        text-align: left;
        color: #3c3c41;
        font-size: 0.3rem;
        font-weight: bold;
        padding: 0.35rem 0.55rem 0 0.55rem;
        line-height: 1.5;
    }

    .code {
        color: #1432ff;
    }

    .result-text {
        padding: 0.8rem 0.55rem;
        font-size: 0.35rem;
        color: #3c3c41;
    }

    .lqjf {
        width: 6.3rem;
        height: 1rem;
        background-image: linear-gradient(to right, #00e696, #05e1a0, #0adbab, #10d7b5, #12d3bb);
        margin: auto;
        text-align: center;
        line-height: 1rem;
        color: #ffffff;
        font-size: 0.36rem;
    }
</style>
