<template>
    <div class="reward" @click="_toggleReward(true)">
        <div class="reward-box" v-transfer-dom v-show="isShow">
            <div class="box" @click.stop>
                <ul class="tab-box" v-if="channelInfo.rewardGiftStatus == 1 && channelInfo.rewardStatus == 1">
                    <li :class="{'z-active': tabIndex == 0}" @click="_tabIndex(0)">礼物打赏</li>
                    <li :class="{'z-active': tabIndex == 1}" @click="_tabIndex(1)">现金打赏</li>
                </ul>
                <ul class="list-box">
                    <!-- 礼物打赏 -->
                    <li class="gift-box" :class="{'z-active': tabIndex == 0 || (channelInfo.rewardGiftStatus == 1 && channelInfo.rewardStatus != 1)}" v-if="channelInfo.rewardGiftStatus == 1">
                        <ul class="gift-list">
                            <li
                                class="item"
                                :class="{'z-active': giftId === item.id}"
                                v-for="(item,index) in rewardGiftList"
                                :key="index"
                                @click="_changeGift(item.id)"
                            >
                                <img v-if="item.imgUrl" class="img" :src="item.imgUrl">
                                <img v-else class="img" :src="require(`@/assets/reward/gift-${index+1}.png`)" alt="">
                                <div class="name">{{item.name}}</div>
                                <div class="price">{{item.price}}</div>
                            </li>
                        </ul>
                        <div class="operation" v-show="giftId !== ''">
                            <div class="sum-box">
                                数量：
                                <span class="count" @click="_setCount(-1)">-</span>
                                <input class="sum" type="number" min="1" max="999" step="1" v-model="giftNum">
                                <span class="count" @click="_setCount(1)">+</span>
                            </div>
                            <div class="total-box">
                                合计：<span class="total">{{giftPriceSum}}</span>
                                <a href="javascript:;" class="send" @click="_giftReward">发送</a>
                            </div>
                        </div>
                    </li>
                    <!-- 现金打赏 -->
                    <li class="cash-box" :class="{'z-active': tabIndex == 1 || (channelInfo.rewardGiftStatus != 1 && channelInfo.rewardStatus == 1)}" v-if="channelInfo.rewardStatus == 1">
                        <div class="head-box">
                            <img class="head" :src="channelInfo.rewardPhotoUrl || channelInfo.chatAdminAvaUrl" alt="">
                        </div>
                        <div class="title">{{channelInfo.rewardName || ''}}</div>
                        <ul class="reward-btn-list">
                            <li
                                class="item"
                                v-for="(item,index) in channelInfo.rewardConfig"
                                :key="index"
                                @click="_cashReward(item)"
                            >
                                {{item}}
                                <span class="unit">元</span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import {getRewardGiftList,rewardGift,reward} from '@/plugins/API/apiReward'
    import {mapGetters} from 'vuex'
    import UserAgent from '@/plugins/UserAgent/index'
    export default {
        data(){
            return {
                isShow: false,
                tabIndex: 0,
                giftId: '',
                giftNum: 1,
                rewardGiftList: []
            }
        },
        computed: {
            ...mapGetters({
                'channelInfo': 'channelInfo',
                'userInfo': 'userInfo',   
            }),
            giftPriceSum(){
                if(this.giftId == ''){
                    return 0;
                }else{
                    for (let i = 0; i < this.rewardGiftList.length; i++){
                        if(this.rewardGiftList[i].id == this.giftId){
                            return (this.rewardGiftList[i].price * this.giftNum).toFixed(2);
                        }
                    }
                }
            },
        },
        mounted(){
            this.$Bus.$on('bus-showReward', this._toggleReward)
            this._getRewardGiftList()
        },
        methods: {
            _toggleReward(bol){
                if(!this.userInfo.id && bol){
                    this.$layer.msg('请先登录');
                    this.$Bus.$emit('bus-showLogin', true);
                    return false;
                }
                this.isShow = bol;
            },
            //获取礼物打赏
            async _getRewardGiftList(){
                if(this.channelInfo.rewardGiftStatus == 1){
                    const res = await getRewardGiftList({
                        id: this.channelInfo.id,
                        uin: this.channelInfo.uin
                    })
                    if(res.code == 200 && res.errorCode == 0){
                        this.rewardGiftList = res.data
                    }
                }
            },
            _tabIndex(index){
                this.tabIndex = index;
            },
            _changeGift(id){
                if(this.giftId === id){
                    this.giftId = '';
                }else{
                    this.giftId = id;
                }
            },
            _setCount(a){
                let num = parseInt(this.giftNum + a);
                num = num >= 999 ? 999 : num <= 1 ? 1 : num;
                this.giftNum = num;
            },
            async _giftReward(){
                if(!this.userInfo.id){
                    this.$layer.msg('请先选择登录!~');
                    this.$Bus.$emit('bus-showLogin', true);
                    return false;
                }
                const res = await rewardGift({
                    uin: this.channelInfo.uin,
                    channelId: this.channelInfo.id,
                    giftId: this.giftId,
                    num: this.giftNum,
                    backUrl: window.location.href,
                    payType: UserAgent.isWx() ? 1 : 2
                })
                if(res.code == 200 && res.errorCode == 0){
                    let url = '';
                    if(res.data.payType == 1){
                        url = '//web.guangdianyun.tv/pay/wxpay?payconfig=' + encodeURIComponent(JSON.stringify(res.data))
                    }else if(res.data.payType == 2){
                        url = '//web.guangdianyun.tv/pay/alipay?form='+encodeURIComponent(res.data.result.result)
                    }
                    window.location.href = url;
                }
            },
            async _cashReward(cash){
                if(!this.userInfo.id){
                    this.$layer.msg('请先选择登录!~');
                    this.$Bus.$emit('bus-showLogin', true);
                    return false;
                }
                const res = await reward({
                    uin: this.channelInfo.uin,
                    channelId: this.channelInfo.id,
                    money: cash,
                    backUrl: window.location.href,
                    payType: UserAgent.isWx() ? 1 : 2
                })
                if(res.code == 200 && res.errorCode == 0){
                    let url = '';
                    if(res.data.payType == 1){
                        url = '//web.guangdianyun.tv/pay/wxpay?payconfig=' + encodeURIComponent(JSON.stringify(res.data))
                    }else if(res.data.payType == 2){
                        url = '//web.guangdianyun.tv/pay/alipay?form='+encodeURIComponent(res.data.result.result)
                    }
                    window.location.href = url;
                }
            },
        },
        watch: {
            giftNum(){
                let num = this.giftNum >= 999 ? 999 : this.giftNum <= 1 ? 1 : this.giftNum;
                this.giftNum = num;
            },
        },
        beforeDestroy(){
            this.$Bus.$off('bus-showReward', this._toggleReward)
        },
    }
</script>

<style lang="less" scoped>
    .reward{
        margin-bottom: 5px;
        height: 40px;
        background-size: 100% auto;
        background-image: url(./img/reward.png);
        background-repeat: no-repeat;
        background-position: 0 0;
    }
    .reward-box{
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        background-color: #ffffff;

        .box{
            .tab-box{
                padding: 10px;

                li{
                    display: inline-block;
                    margin-right: 10px;
                    vertical-align: top;
                    font-size: 15px;
                    color: #333;

                    &.z-active{
                        color: #008DF6;

                        &:after{
                            content: '';
                            margin: 5px auto 0;
                            display: block;
                            height: 2px;
                            width: 30px;
                            background-color: #008DF6;
                        }
                    }
                }
            }
            .list-box{
                .gift-box, .cash-box{
                    position: relative;
                    display: none;

                    &.z-active{
                        display: block;
                    }
                }
                .gift-box{
                    .gift-list{
                        overflow: hidden;

                        .item{
                            padding: 5px;
                            width: 25%;
                            float: left;
                            border: 1px solid #EAEAEA;
                            text-align: center;

                            .img{
                                display: block;
                                width: 100%;
                                height: calc((25vw - 10px)*9/16);
                            }
                            .name{
                                height: 20px;
                                line-height: 20px;
                                overflow:hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                color: #4F4F4F;
                                font-size: 14px;
                            }
                            .price{
                                height: 20px;
                                line-height: 20px;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow:hidden;
                                color: #F85A30;
                                font-size: 13px;
                            }
                            &.z-active{
                                border-color: #38AAF8;
                            }

                        }
                    }
                    .operation{
                        overflow: hidden;
                        padding: 8px 5px;
                        font-size: 14px;

                        .sum-box{
                            float: left;
                            width: 50%;
                            color: #6C6C6C;

                            span{
                                display: inline-block;
                                width: 20px;
                                height: 20px;
                                line-height: 18px;
                                vertical-align: middle;
                                text-align: center;
                                border: 1px solid #C2C2C2;
                                border-radius: 3px;
                            }
                            input{
                                margin: 0 3px;
                                width: 50px;
                                height: 25px;
                                vertical-align: middle;
                                border: 1px solid #C2C2C2;
                                border-radius: 3px;
                                outline: none;
                                text-align: center;
                            }
                        }
                        .total-box{
                            float: left;
                            width: 50%;
                            text-align: right;
                            color: #6C6C6C;

                            .total{
                                color: #F85A30;
                            }
                            .send{
                                display: inline-block;
                                padding: 0 10px;
                                margin-left: 5px;
                                height: 25px;
                                line-height: 25px;
                                vertical-align: middle;
                                border-radius: 3px;
                                background-color: #29A3F8;
                                color: #fff;
                            }
                        }
                    }
                }
                .cash-box{
                    .head-box{
                        position: relative;
                        background: url(./img/reward-bg.png) no-repeat top center;
                        background-size: 100% auto;padding-top: 10px;

                        .head{
                            display: block;
                            margin: auto;
                            width: 70px;
                            height: 70px;
                            border-radius: 100%;
                        }
                    }
                    .title{
                        padding-top: 5px;
                        line-height: 20px;
                        font-size: 16px;
                        color: #404040;
                        text-align: center;
                    }
                    .reward-btn-list{
                        padding:25px 30px;
                        text-align: center;

                        .item{
                            display: inline-block;
                            margin:0 10px 15px 10px;
                            width: 65px;
                            height:30px;
                            line-height:28px;
                            vertical-align: top;
                            border:1px solid #FF5454;
                            color: #FF5454;
                            border-radius: 3px;
                            font-style:italic;
                            font-size: 16px;
                            font-weight: 700;

                            .unit{
                                font-size: 13px;
                                font-style: normal;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
