<template>
    <div class="periodExchange">
        <m-header v-if="headerStatus" />

        <van-cell-group>
            <van-cell :center="true">
                <template slot="icon">
                    <img class="logo" v-if="userInfo.avatar" :src="userInfo.avatar" alt="">
                    <img class="logo" v-else src="@/assets/images/icon_student.png" alt="">
                </template>
                <template slot="title">
                    <p class="exchangeText">{{ userInfo.realName }}</p>
                </template>
                <template slot="label">
                    <p class="info">剩余时长：{{ availableMinutes }}</p>
                </template>
            </van-cell>
        </van-cell-group>

        <div class="activeList" v-if="dataShow">
            <h2>优惠活动：</h2>

            <div class="active" @click="onPayOrder(item)" v-for="(item, index) in dataList" :key="index">
                <van-icon name="question-o" v-if="imageStatus" @click.stop="onMore(item)" class="icon_question" />
                <!-- <img :src="item.coverImg" alt=""> -->
                <van-image :src="item.coverImg" @load="onImageLoad">
                    <template v-slot:loading>
                        <van-loading type="spinner" size="20" />
                    </template>
                </van-image>
            </div>
        </div>
        <div class="activeList" v-else>
            <h2>优惠活动：</h2>
            <m-empty class="empty" msg="暂无优惠活动"  key="data" />
        </div>

        <!-- <div class="pay_btn" >确认兑换</div> -->
        <van-popup v-model="popupShow" closeable position="bottom"
        :style="{ minHeight: '30%', maxHeight: '60%' }" >
            <div class="popupContent" v-html="popupContent"></div>
        </van-popup>

        <m-payment :closeStatus="isStatus" :amount="payMoney" :payment="payment" @onChangeStatus="onChangeStatus" />
    </div>
</template>
<script>
/* eslint-disable */
import MHeader from '@/components/MHeader'
import MEmpty from '@/components/MEmpty'
import MPayment from '@/components/MPayment'
import { browser, calcMinute }  from '@/common/common'
import { tenantEntryActivitesList, queryUserInfo, sysTenantAccountGet, createOrder } from '@/api/app'

export default {
    name: 'courseApply',
    components: { MHeader, MEmpty, MPayment },
    data() {
        return {
            userInfo: {},
            availableMinutes: 0,
            headerStatus: true,
            result: {}, // 生成订单的数据
            dataList: [],
            isClick: false,
            popupShow: false,
            popupContent: null,
            dataShow: true, // 是否有数据
            imageStatus: false,
            isStatus: false,
            payment: {}, // 支付对象
            payMoney: 0,
        }
    },
    mounted() {
        let params = this.$route.query
        if(params.Authorization) {
            localStorage.setItem('Authorization', decodeURI(params.Authorization))
            localStorage.setItem('userInfo', decodeURI(params.Authorization))
        }

        document.title = '课时兑换'
        if(browser().android || browser().iPhone) {
            this.headerStatus = false
        }

        this.__init()
    },
    methods: {
        async __init() {
            let loadingStatus = true
            this.$toast.loading({
                duration: 0,
                message: '加载中...',
                forbidClick: true,
                loadingType: 'spinner'
            })
            await queryUserInfo().then(res => {
                let result = res.data
                if(result) {
                    this.userInfo = result
                }
            })

            await sysTenantAccountGet().then(res => {
                let result = res.data
                if(result.code == 200) {
                    let tempResult = result.data
                    if(tempResult) {
                        this.availableMinutes = calcMinute(tempResult.availableMinutes ? tempResult.availableMinutes : 0)
                    }
                } else {
                    loadingStatus = false
                    this.$toast(result.msg)
                }
            })

            await tenantEntryActivitesList().then(res => {
                let result = res.data
                if(result.code == 200) {
                    this.dataList = result.data.rows ? result.data.rows :  []
                } else {
                    loadingStatus = false
                    this.$toast(result.msg)
                }
                if(this.dataList.length <= 0) {
                    this.dataShow = false
                }
            })
            if(loadingStatus) {
                this.$toast.clear()
            }
        },
        onImageLoad() {
            this.imageStatus = true
        },
        onPayOrder(item) {
            // activitiesId
            if(this.isClick) {
                return
            }
            this.$toast.loading({
                duration: 0,
                message: '加载中...',
                forbidClick: true,
                loadingType: 'spinner'
            })
            this.isClick = true
            createOrder({ activitiesId: item.id }).then(res => {
                let result = res.data
                this.$toast.clear()
                this.isClick = false
                if(result.code == 200) {
                    this.result = result.data
                    this.onSubmit()
                } else if(result.code == 100) {
                    this.$dialog.confirm({
                        // title: '提示',
                        message: result.data,
                        confirmButtonColor: '#269a93',
                        cancelButtonText: '取消',
                        confirmButtonText: '继续付款'
                    }).then(() => {
                        this.$toast.loading({
                            duration: 0,
                            message: '加载中...',
                            forbidClick: true,
                            loadingType: 'spinner'
                        })
                        // 继续支付
                        createOrder({ activitiesId: item.id, isContinuePay: true }).then(res => {
                            let result = res.data
                            this.$toast.clear()
                            if(result.code == 200) {
                                this.result = result.data
                                this.onSubmit()
                            } else {
                                this.$toast(result.msg)
                            }
                        })
                    })
                } else {
                    this.$toast(result.msg)
                }
            })
        },
        onChangeStatus(val) {
            this.isStatus = val
        },
        onSubmit() {
            // submit 提交
            let result = this.result
            let f = result.payMap
            this.payMoney = Number(f.amount)
            if(result.type == "YQPAY") {
                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 if(result.type == "ADAPAY") {
                // 汇付天下
				this.payment = result
				// 开始支付窗口
				this.isStatus = true
            }
        },
        onMore(item) {
            this.popupContent = item.detail
            this.popupShow = true
        }
    }
}
</script>
<style lang='less' scoped>
@import url("../../assets/commonLess/variable.less");
.periodExchange {
    min-height: 100vh;
    position: relative;
    background: #fff;
    .logo {
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        overflow: hidden;
        margin-right: .13rem;
    }
    /deep/.van-cell {
        margin-top: -1px;
        padding: .26rem .16rem .15rem;
        // background: #14928A;
        line-height: .24rem;
    }
    .exchangeText {
        font-size: .21rem;
        color: #1A1A1A;
        font-weight: 500;
    }
    .info {
        font-size: .14rem;
        color: #808080;
    }
    [class*='van-hairline']{
         &::after{
             border: 0 solid #fff;
         }
    }
}
.activeList {
    padding: .15rem .16rem 0;
    // margin-top: -.6rem;
    position: relative;
    z-index: 49;
    h2 {
        font-size: .16rem;
        color: #444;
        padding-left: .15rem;
        padding-bottom: .15rem;
        position: relative;
        &::before {
            content: ' ';
            width: .04rem;
            height: .15rem;
            background:@mColor;
            border-radius: .02rem;
            position: absolute;
            left: .02rem;
            top: .04rem;
        }
        span {
            float: right;
        }
    }
    .active {
        position: relative;
        margin-bottom: .15rem;
        line-height: 0;
        // box-shadow:0px 0px 16px 0px rgba(155,145,41,0.19);
    }
    img {
        width: 100%;
    }
    .icon_question {
        position: absolute;
        z-index: 10;
        bottom: .06rem;
        right: .12rem;
        color: #E94A47;
        font-size: .18rem;
    }
}
.popupContent {
    padding: .4rem .16rem .1rem;
}
.van-image {
    display: block;
    width: 100%;
    min-width: 1rem;
}
.pay_btn {
    background: @mColor;
    line-height: 0.45rem;
    color: #fff;
    font-size: 0.18rem;
    border-radius: 0.5rem;
    text-align: center;
    position: absolute;
    width: 90%;
    margin-left: 5%;
    bottom: .2rem;
}
</style>