<template>
    <div class="activepay" :class="[priceList.branchId == 1012 ? 'sh' : '']">

        <div class="coupon-section" v-if="priceList.branchId == 1012" key='branchId'>
            <img src="../assets/couponsh2.png" alt="">
        </div>
        <div class="coupon-section" v-else key='branchId'>
            <img v-if="activePrice == 777 || priceList.activePrice" src="../assets/coupon.png" alt="">
            <img v-else src="../assets/coupon2.png" alt="">
        </div>
        <p class="tip" v-if="priceList.branchId == 1012">
           活动规则： <br/>
            1.使用人群：仅限续费学员使用<br/>
            2.20节课/期，老学员最多可购买2期<br/>
            3.截止日期2019年11月11日24点前<br/>
        </p>
        <p class="tip" v-else>活动详情：充值{{ showPrice }}元抵扣{{ activePrice }}元。20节课原价{{markAmount}}元，抵扣后立减{{ activePrice - showPrice }}元～仅需{{ amount }}元！
        <br/>重点：课程不设有效期，最多可购买两期课程；
        名额有限，仅限77席，先到先得，错过一次等一年！</p>
        <!-- <p class="tip">活动详情：缴费{{ showPrice }}元立刻享有 {{ activePrice }} 元现金券，仅限购买20次vip课，总价值{{ markAmount }}元；即日起至2019年11月11日 ，名额仅限77名，先到先得。</p> -->
        <p class="tip_info">仅限77名学员，额满为止</p>
        <div style="padding: 0 .25rem">
            <div class="btn-group">
                <div class="btn" @click="onPromotionPay">
                    <del>原价：{{ markAmount }}</del>
                    <p>现仅需：{{ amount }}</p>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
/* eslint-disable */
import branchRule from '@/assets/front_active'
import qs from 'qs'
export default {
    name: 'activepay',
    data() {
        return {
            userId: this.$route.query.userId,
            branchId: this.$route.query.branchId,
            priceList: {},
            activePrice: 777,
            showPrice: 11.11,
            amount: 0,
            markAmount: 0
        }
    },
    mounted() {
        // 匹配对应的规则
        branchRule.forEach(item => {
            if(item.branchId == this.branchId) {
                this.priceList = item
                if(item.branchPrice == 180) {
                    this.activePrice = 777
                    this.showPrice = item.activePrice ? item.activePrice : 11.11
                }else if(item.branchPrice == 220 || item.branchPrice == 280) {
                    this.activePrice = 1111
                    this.showPrice = item.activePrice ? item.activePrice : 111
                }

                this.markAmount = 20 * item.branchPrice
                if(item.branchId == 1012) {
                    this.amount = 4000
                } else {
                    this.amount = this.markAmount  - this.activePrice + parseFloat(this.showPrice)
                }
            }
        })

        if(!this.priceList.branchPrice) {
            this.priceList = {
                branchId: 1030,
                branchName: '武汉分部',
                branchType: '一类',
                branchPrice: 180
            }
            this.activePrice = 777
            this.showPrice = 11.11
            this.markAmount = 20 * this.priceList.branchPrice
            this.amount = this.markAmount  - this.activePrice + parseFloat(this.showPrice)
        }
    },
    methods: {
        onPromotionPay() {
            this.$axios.post('/yqpay/promotionPay', 
                qs.stringify({ 
                    userId: this.userId, 
                    branchId: this.branchId,
                    amount: this.amount
            }) ).then(res => {
                let result = res.data
                if(result.code == 200) {
                    let f = result.data
                    document.querySelector('#onSubmit').action = f.host
                    document.querySelector('#apiContent').value = f.apiContent
                    document.querySelector('#merNo').value = f.merNo
                    document.querySelector('#notifyUrl').value = f.notifyUrl
                    document.querySelector('#sign').value = f.sign
                    document.querySelector('#signType').value = f.signType
                    document.querySelector('#timestamp').value = f.timestamp
                    document.querySelector('#version').value = f.version
                    document.querySelector('#onSubmit').submit()
                } else {
                    this.$toast(result.msg)
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.activepay {
    width: 100vw;
    min-height: 100vh;
    background: url('../assets/bg2.png') no-repeat center;
    background-size: cover;
    overflow: hidden;
    &.sh {
        background: url('../assets/shbg.png') no-repeat center;
        background-size: cover;
    }
}
.coupon-section {
    margin-top: 2.8rem;
    padding: 0 .35rem;
    img {
        width: 100%;
    }
}
.tip {
    padding: .22rem .35rem;
    font-size: .13rem;
    color: #FFFFFF;
}
.tip_info {
    padding-bottom: .15rem;
    font-size: .16rem;
    color: #f85043;
    text-align: center;
}


.btn {
    padding: .05rem 0 .08rem;
    border-radius: 1rem;
    // background:linear-gradient(270deg,rgba(242,209,163,1) 0%,rgba(188,130,76,1) 100%);
    background: #f85043;
    border: 0;
    color: #fff;
    font-size: .14rem;
    margin-bottom: .2rem;
    text-align: center;
    del {
        font-size: .12rem;
    }
}

input, textarea {
    -webkit-user-select: auto!important;
    -khtml-user-select: auto!important;
    -moz-user-select: auto!important;
    -ms-user-select: auto!important;
    -o-user-select: auto!important;
    user-select: auto!important;
}
</style>