<template>
    <div class="klkl-home-bg">
        <img class="logo" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/klkl/logo.png">
        <div class="hr"></div>
        <p class="fwquery">防伪查询</p>
        <div class="result-icon">
            <img src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/klkl/success.png">
        </div>
        <p class="result-text">{{resultFW}}</p>
        <img @click="toTurntable" class="lq-button" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/klkl/lq-button.png">
        <div class="rule-button" @click="ruleVisible=true">
            <i class="el-icon-warning-outline"></i>
            <span>活动规则</span>
        </div>
        <rule v-model="ruleVisible" :rule-content="actRuleContent"></rule>
    </div>
</template>

<script>
    import mobileInit from '@/assets/js/mobile-init'
    import apiHelper from '@/assets/js/apiHelper.js'
    import eventBus from '@/assets/js/eventBus.js'
    import 'element-ui/lib/theme-chalk/icon.css'
    import Rule from '@/components/marketing/temp004/components/Rule'

    export default {
        name: 'Comp',
        components: {Rule},
        props: ['comp', 'cfg', 'selectedPage'],
        data() {
            return {
                ruleVisible: false,
                resultFW: '感谢您购买Karihealth凯睿海恩产品'
            }
        },
        computed: {
            compProps() {
                return this.comp.props
            },
            isRunEnv() {
                return this.sup8._def.env.run.val === this.sup8.env.val
            },
            isPreviewEnv() {
                return this.sup8._def.env.preview.val === this.sup8.env.val
            },
            actRuleContent() {
                const {actRuleContent = null} = this.compProps
                if (!actRuleContent) return ''
                try {
                    return decodeURIComponent(actRuleContent.val)
                } catch (e) {
                    return actRuleContent.val || ''
                }
            },
        },
        methods: {
            toTurntable() {
                this.$parent.changeSelectedPage('3-3')
            },
            //获取防伪结果
            getAntifakeInfo() {
                const {codeInfo, UA, context} = this.sup8
                apiHelper.getAntifakeInfo(
                    codeInfo.EnterpriseNo,
                    codeInfo.ProductId,
                    codeInfo.Code,
                    context.geo.latitude + ',' + context.geo.longitude ||
                    UA.ip.cip,
                    context.decodestatus,
                    codeInfo.LabelNo,
                    codeInfo.SkuLogisticCode,
                    (res) => {
                        this.$nextTick(() => {
                            if (res.flag) {
                                // this.resultFW = res.data.Content
                            }
                            this.$layerLite.loading.close()
                        })
                    },
                    () => {
                        this.$layerLite.loading.close()
                        this.$layerLite.toast('网络开小差了，请稍后再试')
                    }
                )
            },
            init() {
                //校验是否注册
                this.$layerLite.loading.open()
                apiHelper.checkIsRegister(this.getUserInfo(),
                    (res) => {
                        if (res.flag) {
                            const {UserId = null} = res.data
                            this.sup8.context.userId = UserId
                        }
                        this.getAntifakeInfo()
                    },
                    () => {
                        this.$layerLite.loading.close()
                        this.$layerLite.toast('网络开小差了，请稍后再试')
                    }
                )
            },
        },
        created: function () {
            const that = this
            that.mergeCompProps(that.comp)

            switch (that.sup8.env) {
                case that.sup8._def.env.design:
                    that.env = '设计器模式'
                    this.envType = 'design'
                    break
                case that.sup8._def.env.preview:
                    that.env = '预览模式'
                    break
                case that.sup8._def.env.run:
                    that.env = '运行模式'
                    sessionStorage.removeItem('prizeInfo')
                    break
                default:
                    break
            }
        },
        mounted() {
            mobileInit()
            // if (this.isRunEnv) {
            // 	if (this.sup8.context.geo) {
            // 		this.init()
            // 	} else {
            // 		eventBus.subscribe('gpsDone', data => {
            // 			this.init()
            // 		})
            // 	}
            // }
        }
    }
</script>

<style scoped>
    .klkl-home-bg {
        width: 100%;
        min-height: 100vh;
        background: url("https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/klkl/home-bg.png") no-repeat center center;
        background-size: 100% 100%;
        position: relative;
        text-align: center;
    }

    #part_phone .klkl-home-bg {
        width: 320px;
        height: 540px;
    }

    .logo {
        width: 4.35rem;
        margin: 1rem auto 0.7rem auto;
    }

    .hr {
        height: 10px;
        width: 93%;
        border-bottom: dashed 1px #90c6ff;
        margin: auto;
    }

    .fwquery {
        font-size: 0.4rem;
        color: #ffffff;
        text-align: left;
        padding-left: 0.25rem;
        padding-top: 0.25rem;
    }

    .result-icon {
        background: #ffffff;
        border: 5px solid #90c6ff;
        width: 1.9rem;
        height: 1.9rem;
        /*width: 40px;*/
        /*height: 40px;*/
        border-radius: 100%;
        margin: 0.58rem auto 0.45rem auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .result-icon > img {
        /*width: 0.97rem;*/
        /*height: 0.83rem;*/
        width: 60%;
        height: 50%;
    }

    .result-text {
        font-size: 0.35rem;
        color: #ffffff;
        padding-bottom: 9vh;
    }

    .lq-button {
        width: 4rem;
        margin-bottom: 0.1rem;
    }

    .rule-button {
        color: #fbcf7f;
        font-size: 0.33rem;
    }
</style>
