<!--
    此模块为c端优惠券
    uin 引用组
    channelId 引用id
    userInfo 用户信息
    type 投票来源(用于统计每一票的来源)
  -->
<template>
    <div class="coupon-container" ref="wrapBox" @scroll="getMore">
        <ul class="list" ref="list">
            <li class="item" v-for="item in list" :key="item.id">
                <div class="coupon-item" :class="{'z-receive': item.isReceive == 1,'z-empty': item.surplusNum == 0}">
                    <div class="rebate-box">
                        <div class="rebate">
                            <div class="rate">
                                <span class="unit">￥</span><span class="num">{{item.waiverAmount}}</span>
                            </div>
                            <div class="condition">满{{item.condition}}元可用</div>
                        </div>
                    </div>
                    <div class="info-box">
                        <div class="info">
                            <div class="type">
                                <span v-if="item.type == 1">代金券</span>
                            </div>
                            <div class="content">
                                <div class="name">{{item.name}}</div>
                                <div class="term">
                                    {{item.startTime*1000 | formatDate('yyyy.MM.dd')}}
                                     ~ 
                                    {{item.endTime*1000 | formatDate('yyyy.MM.dd')}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="state-box">
                        <div class="division"></div>
                        <div class="state" v-if="item.isReceive == 1">
                            <span>已领</span>
                        </div>
                        <div class="state" @click="receiveCoupon(item)" v-else>
                            <span v-if="item.surplusNum">立即<br/>领取</span>
                            <span v-else>已<br/>领<br/>完</span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    import {getCouponInclude,receiveCoupon} from '@/plugins/API/apiCoupon'
    export default {
        props: {
            uin: {},
            channelId: {},
            userInfo: {},
            type: {},
            jumpUrls: {},
        },
        data(){
            return {
                page: 1,
                list: [],
                isMore: true,
            }
        },
        mounted(){
            this._getList();
        },
        methods: {
            async _getList(){
                if(!this.isMore){
                    return false;
                }
                this.isMore = false
                const res = await getCouponInclude({
                    includeId: this.channelId,
                    type: this.type,
                    page: this.page,
                    num: 10,
                })
                this.isMore = true;
                if(res.code == 200 && res.errorCode == 0){
                    if(res.data.length < 10){
                        this.isMore = false;
                    }
                    this.list = [...this.list,...res.data];
                }
            },
            getMore(){
                let wrapT = this.$refs.wrapBox.scrollTop;
                let wrapH = this.$refs.wrapBox.clientHeight;
                if(this.$refs.list){
                    let listH = this.$refs.list.clientHeight;
                    if(listH - wrapH -wrapT < 100){
                        this.page ++;
                        this._getList();
                    }
                }
            },
            async receiveCoupon(info){
                if(!this.userInfo.id){
                    this.$layer.msg('请先登录并绑定手机号!~');
                    this.$Bus.$emit('bus-showLogin', true);
                    return false;
                }
                if(!this.userInfo.phone){
                    window.location.href = this.jumpUrls.login_binding;
                    return false;
                }
                const res = await receiveCoupon({
                    uin: this.uin,
                    couponId: info.id,
                })
                if(res.code == 200 && res.errorCode == 0){
                    info.isReceive = 1;
                    this.$layer.msg('领取成功，请到"个人中心-我的优惠券"查看',2000);
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    @cashColor: #409EFF;  //代金券颜色
    @failureColor: #CACACA; //失效劵颜色
    .coupon-container{
        position: relative;
        height: 100%;
        overflow: auto;

        .list{
            padding: 15px;

            .item{
                margin-bottom: 15px;

                .coupon-item{
                    display: flex;
                    height: 95px;
                    overflow: hidden;
                    background-color: #fff;
                    border-radius: 4px;
                    box-shadow:0px 0px 4px rgba(0,0,0,0.06);
                    .rebate-box{
                        flex: 0 0 auto;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 80px;
                        padding: 10px 0;
                        text-align: center;
                    }
                    .info-box{
                        flex: 1;
                        width: 100%;
                        overflow: hidden;
                        padding: 10px 0;
                    }
                    .state-box{
                        flex: 0 0 auto;
                        position: relative;
                        width: 50px;

                        .division{
                            position: absolute;
                            top: 0;
                            left: -10px;
                            width: 20px;
                            height: 100%;
                            background: url(./img/icon-division.png) no-repeat center center;
                            background-size: auto 100%;
                        }
                    }
                    .rebate{
                        flex: 1;
                        padding: 10px;
                        .rate{
                            line-height: 30px;
                            .unit{
                                font-size: 12px;
                                color: #8E8E8E;
                            }
                            .num{
                                font-size: 25px;
                                color: @cashColor;
                            }
                        }
                        .condition{
                            line-height: 20px;
                            font-size: 11px;
                            color: @cashColor;
                        }
                    }
                    .info{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                        height: 100%;
                        padding: 10px;
                        border-left: 1px dashed #D2D2D2;

                        .type{
                            position: absolute;
                            right: 10px;
                            top: -5px;
                            display: block;
                            height: 16px;
                            line-height: 16px;
                            border-radius: 16px;
                            background-color: @cashColor;
                            padding: 0 6px;
                            font-size: 12px;
                            color: #fff;
                        }
                        .content{
                            flex: 1;
                            max-height: 100%;
                            word-break: break-all;
                            .name{
                                margin-bottom: 10px;
                                max-height: 40px;
                                line-height: 20px;
                                font-size: 14px;
                                color: #131313;
                                display: -webkit-box;
                                box-orient: vertical;
                                -webkit-box-orient: vertical;
                                line-clamp: 2;
                                -webkit-line-clamp: 2;
                                text-overflow: ellipsis;
                                overflow: hidden;
                            }
                            .term{
                                line-height: 15px;
                                font-size: 12px;
                                color: #777777;
                            }
                        }
                    }
                    .state{
                        display: flex;
                        align-items: center;
                        width: 100%;
                        height: 100%;
                        text-align: center;
                        background-color: @cashColor;
                        font-size: 12px;
                        color: #fff;

                        span{
                            flex: 1;
                            vertical-align: middle;
                            line-height: 20px;
                        }
                    }
                    &.z-receive,&.z-empty{
                        .rebate{
                            .unit{
                                color: @failureColor;
                            }
                            .num{
                                color: @failureColor;
                            }
                            .condition{
                                color: @failureColor;
                            }
                        }
                        .info{
                            .type{
                                background-color: @failureColor * 1.07;
                            }
                            .name{
                                color: @failureColor;
                            }
                            .term{
                                color: @failureColor;
                            }
                            .code{
                                color: @failureColor;
                            }
                        }
                        .state{
                            background-color: @failureColor * 0.945;
                        }
                    }
                }
            }
        }
    }
</style>
