<template>
    <div class="xnf-result-bg">
        <img class="logo" :src="compProps.logo.val">
        <template v-if="!getUserId()">
            <div class="register-box">
                <img class="yzsjh" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/xnf/yzsjh.png">
                <div class="register">
                    <div class="inputItem">
                        <input placeholder="请输入手机号" maxlength="11" v-model="mobile"></input>
                    </div>
                    <div class="inputItem">
                        <input placeholder="输入验证码" maxlength="6" v-model="smscode"></input>
                        <div class="yzm">
                            <img class="yzm-img" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/xnf/yzm.png">
                            <span ref="getSMSCode" v-sendsms="mobile">获取验证码</span>
                        </div>
                    </div>
                    <div class="inputItem">
                        <input @click="showAgeSelect = true" placeholder="选择年龄段" v-model="age" readonly></input>
                    </div>
                    <ul v-show="showAgeSelect" class="age_list">
                        <template v-for="item in ageList">
                            <li :class="{selected_li:age===item.value}" @click="selectAge(item.value)" :key="item.value">{{item.label}}</li>
                        </template>
                    </ul>
                    <div class="inputItem">
                        <div class="input">{{sex === null ? "请选择性别" : (sex?"男":"女")}}</div>
                        <div class="select_sex">
                            <span @click="selectSex(1)" :class="{selected_sex:sex==1}">男</span>
                            <span @click="selectSex(0)" :class="{selected_sex:sex==0}">女</span>
                        </div>
                    </div>
                    <div class="register-btn" @click="onRegister">确认</div>
                </div>
            </div>
        </template>
        <img class="result-img" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/xnf/result-img.png">
        <div class="mask" v-if="isShowResult">
            <div class="pop-result">
                <div class="p1" v-html="resultText"></div>
                <p class="p2" v-if="totalScore !== null">已扫码累计{{totalScore}}积分</p>
                <div class="bottom">
                    <div class="scan" @click="scan">继续扫码</div>
                    <div class="toshop" @click="toShop">进入商城</div>
                    <p class="p3">积分可用于积分商城兑换礼品</p>
                </div>
            </div>
        </div>
    </div>
</template>

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

    export default {
        name: "Comp",
        mixins: [actMixin],
        data() {
            return {
                score: 10,
                totalScore: 0,
                isShowResult: false,
                resultText: '',
                ageList: [
                    {label: '20 - 30', value: '20-30'},
                    {label: '30 - 40', value: '30-40'},
                    {label: '40 - 50', value: '40-50'},
                ],
                showAgeSelect: false,
            }
        },
        methods: {
            selectAge(age) {
                this.age = age;
                this.showAgeSelect = false;
            },
            selectSex(sex) {
                this.sex = sex;
            },
            scan() {
                if (this.isRunEnv) {
                    this.$wx.scanQRCode();
                } else {
                    this.isShowResult = false;
                }
            },
            toShop() {
                window.open(this.compProps.shopURL.val);
            },
            registerCallback() {
                this.onLottery();
            },
            lotteryCallback(res) {
                if (this.isRunEnv) {
                    if (!res.flag) {
                        this.resultText = res.msg;
                    } else if (res.data.IsNewJoin) {
                        const {WiningRecords} = res.data;
                        const {GiftUnitPoints} = WiningRecords[0];
                        this.score = GiftUnitPoints;
                        this.resultText = `恭喜您获得${this.score}积分!`;
                    } else {
                        this.resultText = res.msg || `该数码积分已被领走了！`;
                    }
                    this.GetMemberJf();
                } else {
                    this.resultText = `恭喜您获得${this.score}积分!`;
                    this.totalScore = 8888;
                }
                this.isShowResult = true;
            },
            GetMemberJf() {
                apiHelper.GetMemberJf({
                    EnterpriseNo: this.enterpriseNo,
                    UserId: this.getUserId()
                }, (res) => {
                    if (res.flag) {
                        this.totalScore = res.data.TotalPoint;
                    } else {
                        this.totalScore = null;
                    }
                });
            },
            init() {
                this.onLottery();
            },
        },
        mounted() {
        }
    }
</script>

<style scoped>
    .mask {
        position: absolute;
        background: rgba(0, 0, 0, .8);
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 101;
    }

    .xnf-result-bg {
        background: #3c3c41;
        min-height: 100vh;
        position: relative;
    }

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

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

    .register-box {
        position: relative;
        z-index: 1;
    }

    .yzsjh {
        width: 4.88rem;
        height: 0.42rem;
        margin: 0.8rem 0 0.25rem 0.6rem;
    }

    .register {
        width: 6.25rem;
        margin: auto;
        background: #00e487;
        color: #3c3c41;
        font-weight: bold;
    }

    .inputItem {
        width: 6.15rem;
        margin: auto;
        border-top: 0.05rem solid #00e487;
        background: #ffffff;
        position: relative;
        font-weight: bold;
        display: flex;
        align-items: center;
    }

    div.input{
        background: none;
        height: 0.9rem;
        color: #3c3c41;
        font-style: italic;
        font-size: 0.28rem;
        padding-left: 10px;
        font-weight: bold;
        display: flex;
        align-items: center;
        width: 3.8rem;
    }

    .inputItem > input {
        background: none;
        border: none;
        outline: none;
        height: 0.9rem;
        color: #3c3c41;
        font-style: italic;
        font-size: 0.28rem;
        padding-left: 10px;
        font-weight: bold;
    }

    .inputItem > input::placeholder {
        color: #3c3c41;
        font-style: italic;
    }

    .register-btn {
        height: 0.85rem;
        font-size: 0.47rem;
        width: 100%;
        font-style: italic;
        text-align: center;
        line-height: 0.85rem;
        letter-spacing: 2px;
    }

    .yzm {
        color: #05e1a0;
        font-size: 0.28rem;
        font-weight: bold;
        display: inline-flex;
        align-items: center;
        letter-spacing: 2px;
        position: absolute;
        right: 0.3rem;
        top: 0;
        height: 100%;
    }

    .yzm-img {
        width: 0.29rem;
        height: 0.35rem;
        margin-right: 2px;
    }

    .result-img {
        width: 7.3rem;
        height: 6.73rem;
        position: absolute;
        bottom: 0;
        left: 0.2rem;
    }

    .pop-result {
        border-radius: 5px;
        width: 6.45rem;
        height: 6.45rem;
        /*background-image: linear-gradient(to right, #00e696, #05e1a0, #0adbab, #10d7b5, #12d3bb);*/
        background: url("https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/xnf/pop-result.png") center center;
        background-size: 6.45rem 6.45rem;
        text-align: center;
        position: relative;
        margin: 28% auto auto auto;
    }

    @media screen and (max-width: 320px) {
        .pop-result {
            margin: 20% auto auto auto;
        }
    }

    /*.pop-result-img{*/
    /*    width: 5.99rem;*/
    /*    height: 5.67rem;*/
    /*    position: absolute;*/
    /*    bottom: 0;*/
    /*    left: .23rem;*/
    /*}*/

    .p1 {
        color: #ffffff;
        font-size: 0.45rem;
        font-weight: bold;
        padding: .7rem .5rem 0 .5rem;
    }

    .p2 {
        color: #3c3c41;
        font-size: 0.3rem;
        font-weight: bold;
        padding-top: 0.1rem;
    }

    .scan {
        color: #3c3c41;
        font-size: 0.32rem;
        font-weight: bold;
        border: 1px solid #3c3c41;
        height: 0.65rem;
        width: 2.4rem;
        box-sizing: border-box;
        border-radius: 5px;
        letter-spacing: 2px;
        line-height: 0.65rem;
        display: inline-block;
    }

    .toshop {
        color: #ffffff;
        font-size: 0.32rem;
        font-weight: bold;
        border: 1px solid #3c3c41;
        background: #3c3c41;
        height: 0.65rem;
        width: 2.4rem;
        box-sizing: border-box;
        border-radius: 5px;
        letter-spacing: 2px;
        line-height: 0.65rem;
        display: inline-block;
    }

    .bottom {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
    }

    .p3 {
        color: #ffffff;
        font-size: 0.24rem;
        font-weight: bold;
        padding: 5px 0;
    }

    .age_list {
        margin: 0;
        padding: 10px;
        list-style-type: none;
    }

    .age_list > li {
        padding: 5px 0;
        display: flex;
        align-items: center;
    }

    .age_list > li:before {
        content: '';
        display: inline-block;
        width: 0.2rem;
        height: 0.2rem;
        border: 1px solid #3c3c41;
        border-radius: 20px;
        margin-right: 10px;
    }

    .age_list > li.selected_li:before {
        content: '';
        display: inline-block;
        margin-right: 10px;
        width: 0.2rem;
        height: 0.2rem;
        border-radius: 50%;
        border: 1px solid #3c3c41;
        background: -webkit-radial-gradient(circle closest-side, #3c3c41 85%, #00e487);
    }

    .select_sex {
        height: 0.9rem;
        display: inline-flex;
        align-items: center;
    }

    .select_sex > span {
        display: inline-flex;
        align-items: center;
        font-size: 0.28rem;
        font-style: italic;
        font-weight: bold;
    }

    .select_sex > span:first-of-type {
        margin-right: 25px;
    }

    .select_sex > span:before {
        content: '';
        display: inline-block;
        width: 0.2rem;
        height: 0.2rem;
        border: 1px solid #00e487;
        border-radius: 20px;
        margin-right: 5px;
    }

    .select_sex > span.selected_sex:before {
        content: '';
        display: inline-block;
        margin-right: 5px;
        width: 0.2rem;
        height: 0.2rem;
        border-radius: 50%;
        border: 1px solid #00e487;
        background: -webkit-radial-gradient(circle closest-side, #00e487 80%, #ffffff);
    }
</style>