<template>
    <view>
        <!-- 优惠券分类 -->
        <view class="header">
        	<view class="tabs">
        		<view class="item" :class="{'show': tabsType == ''}" @click="onTabs('')">全部 <block v-if="counts.all != 0">({{ counts.all}})</block></view>
        		<view class="item" :class="{'show': tabsType == '1'}" @click="onTabs('1')">服务券 <block v-if="counts.services != 0">({{ counts.services}})</block></view>
        		<view class="item" :class="{'show': tabsType == '2'}" @click="onTabs('2')">代金券 <block v-if="counts.reductions != 0">({{ counts.reductions}})</block></view>
        		<view class="item" :class="{'show': tabsType == '3'}" @click="onTabs('3')">提货券 <block v-if="counts.exchanges != 0">({{ counts.exchanges}})</block></view>
        	</view>
            <scroll-view class="tabs-type" scroll-x="true" scroll-with-animation="true">
            	<view class="item" :class="{'show': tabsStatus == ''}" @click="onTabsType('')">全部 <block v-if="statusCount.all != 0">({{ statusCount.all}})</block></view>
            	<view class="item" :class="{'show': tabsStatus == '1'}" @click="onTabsType('1')">未使用 <block v-if="statusCount.unused != 0">({{ statusCount.unused}})</block></view>
            	<view class="item" :class="{'show': tabsStatus == '2'}" @click="onTabsType('2')">已使用 <block v-if="statusCount.used != 0">({{ statusCount.used}})</block></view>
                <view class="item" :class="{'show': tabsTime == 'expire'}" @click="onTabsTime('expire')">即将到期 <block v-if="statusCount.expire != 0">({{ statusCount.expire}})</block></view>
                <view class="item" :class="{'show': tabsTime == 'new'}" @click="onTabsTime('new')">新到 <block v-if="statusCount.new != 0">({{ statusCount.new}})</block></view>
            	<view class="item" :class="{'show': tabsStatus == '3'}" @click="onTabsType('3')">已过期 <block v-if="statusCount.over != 0">({{ statusCount.over}})</block></view>
            </scroll-view>
        </view>
        
        <view class="couponsMargin" v-if="coupons.length > 0">
            <view class="coupons" v-for="(item, index) in coupons" :key="index" @click="$Router.push({name: 'myCouponsDte', params: {couponId: item.coupon_grant_id}})">
                <view class="coupons-flex" :class="{active : item.coupon_count > 1}">
                    <view class="item cover" v-if="item.type.value == 2">
                        <view class="cover-price" :class="{active : item.type.value == 2}">
                            {{ item.price }}
                        </view>
                        <view class="cover-text">
                            {{ item.type.text }}
                        </view>
                    </view>
                    <view class="item cover" v-else-if="item.type.value == 1">
                        <image class="cover-tips" src="/static/imgs/coupon-fu.png" mode=""></image>
                    </view>
                    <view class="item cover" v-else>
                        <image class="cover-tips" src="/static/imgs/coupon-ti.png" mode=""></image>
                    </view>
                    <view class="item mian">
                        <view class="title nowrap">{{ item.title }}</view>
                        <view class="time nowrap" v-if="item.type.value == 2">
                            {{ item.price_text }}
                        </view>
                        <view class="time nowrap">
                            {{ item.time.interval }}
                        </view>
                    </view>
                    <image v-if="item.status.status == 2" class="coupons-tips" src="/static/imgs/coupon_tips_00.png" mode="aspectFill"></image>
                    <image v-else-if="item.status.status == 3" class="coupons-tips" src="/static/imgs/coupon_tips_01.png" mode="aspectFill"></image>
                </view>
                <view class="couponMore" v-if="item.coupon_count > 1">
                    <view class="couponMore-text" @click.stop="$Router.push({name: 'myCouponsList', params: {couponId: item.coupon_id, status: tabsStatus}})">
                        <view class="couponMore-title">查看全部{{ item.coupon_count }}张优惠券</view>
                        <view class="couponMore-arrow">
                            <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        
        <block v-else>
        	<view class="list-null">
        		<no-list name='no-counpon' txt="没有任何相关优惠券~" />
        	</view>
        </block>
    </view>
</template>

<script>
    import { userCoupon } from '@/apis/interfaces/user'
	export default {
		data() {
            return {
                coupons     : [] ,// 列表
                counts      : '',
                tabsType    : '',
                tabsStatus  : '',
                tabsTime    : '',
                statusCount : '',
                
                // 分页
                pages    : {}
            }
        },
        onShow() {
        	this.getCoupons()
        },
        methods:{
            // 数据列表
            getCoupons(){
            	userCoupon({
            		type	: this.tabsType,
            		status	: this.tabsStatus,
                    time    : this.tabsTime
            	}).then(res => {
            		this.coupons        = res.lists
                    this.counts         = res.count.type
                    this.statusCount    = res.count.status
            		this.pages          = res.lists.page
            	}).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon : 'none'
            		})
            	})
            },
            
            // 选择类型
            onTabs(value){
            	if(value == this.tabsType) return
            	this.tabsType = value
            	this.getCoupons()
            },
            // 状态筛选
            onTabsType(val){
            	if(this.tabsStatus === val) return
            	this.tabsStatus = val
                this.tabsTime = null
            	this.getCoupons()
            },
            // 新状态筛选
            onTabsTime(val) {
                if(this.tabsTime === val) return
                this.tabsTime = val
                this.tabsStatus = null
                this.getCoupons()
            }
        }
    }
</script>


<style lang="scss" scoped>
    // tabs
    .header{
    	position: fixed;
    	top: 0;
    	left: 0;
    	right: 0;
    	z-index: 99;
    	.tabs{
    		display: flex;
    		justify-content: space-around;
    		background: white;
    		padding: 15rpx 0;
    		font-size: $title-size-lg;
    		color: $text-gray;
    		.item{
    			height: 60rpx;
    			line-height: 60rpx;
    			&.show{
    				color: $mian-color;
    				border-bottom: solid 4rpx $mian-color;
    			}
    		}
    	}
    	// 类型
    	.tabs-type{
    		display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            box-sizing: border-box;
            white-space: nowrap;
    		padding: 20rpx 30rpx;
    		background: white;
    		.item{
                display: inline-block;
                padding: 0 20rpx;
                text-align: center;
    			font-size: $title-size-sm;
    			height: 46rpx;
    			line-height: 46rpx;
    			border-radius: 23rpx;
    			background: white;
    			margin-right: $margin/2;
    			color: $text-gray;
    			&.show{
    				background-color: rgba($color: $mian-color, $alpha: .1);
    				color: $mian-color;
    			}
    		}
    	}
    }
    
    // 列表
    .couponsMargin {
        padding: 200rpx 0 $padding;
    }
    .coupons {
        padding: 0 $padding;
        box-sizing: border-box;
        margin-bottom: 30rpx;
        @extend .ios-bottom;
        .coupons-flex{
        	position: relative;
            background: white;
            box-shadow: 0 0 20rpx rgba(0, 0,0, .1);
            border-radius: $radius;
        	display: flex;
        	justify-content: space-between;
        	flex-wrap: wrap;
            padding: $padding 40rpx $padding 0;
            &.active {
                border-radius: $radius $radius 0 0;
            }
            .cover{
            	position: relative;
            	border-right: dashed 3rpx $border-color;
            	width: 160rpx;
            	text-align: center;
                .cover-price {
                    font-size: 38rpx;
                    font-weight: 600;
                    color: #ee4c47;
                    &.active {
                        margin-top: 20rpx;
                    }
                }
                .cover-text {
                    font-size: 24rpx;
                }
                .cover-tips {
                    width: 60rpx;
                    height: 60rpx;
                    margin-top: 15rpx;
                }
            }
            .mian{
            	justify-content: center;
            	width: calc(100% - 190rpx);
            	box-sizing: border-box;
            	@extend .vertical;
            	.title{
            		font-size: $title-size-lg;
            		line-height: 50rpx;
            		font-weight: bold;
            	}
            	.time, .tags{
            		color: $text-gray-m;
            		font-size: $title-size-m - 4;
            		line-height: 40rpx;
            	}
            	.tags{
            		margin-top: 10rpx;
            		text{
            			background: $border-color-lg;
            			color: $text-gray;
            			padding: 0 ($padding/2);
            			margin-right: ($margin/2);
            			&:last-child{
            				margin-right: 0;
            			}
            		}
            	}
            }
            
            .coupons-tips {
                position: absolute;
                top: 20rpx;
                right: 20rpx;
                width: 94rpx;
                height: 94rpx;
                z-index: 9;
            }
        }
        
        .couponMore {
            font-size: 28rpx;
            color: #686868;
            position: relative;
            height: 120rpx;
            &::after,
            &::before {
                position: absolute;
                content: '';
                height: 20rpx;
                border-radius: 10rpx;
                background: #fff;
                box-shadow: 0 0 20rpx rgba(0, 0,0, .1);
                z-index: 1;
                height: 30rpx;
            }
            &::after {
                width: calc(100% - 40rpx); 
                top: 70rpx;
                left: 20rpx;
            }
            
            &::before {
                width: calc(100% - 80rpx); 
                top: 90rpx;
                left: 40rpx;
            }
            .couponMore-text {
                display: flex;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                z-index: 1;
                height: 80rpx;
                border-radius: 0 0 10rpx 10rpx;
                line-height: 80rpx;
                padding: 0 30rpx;
                box-sizing: border-box;
                background: #fff;
                box-shadow: 0 0 10rpx rgba(0, 0,0, .1);
            }
            
            .couponMore-title {
                flex: 1;
            }
            
            .couponMore-arrow {
               position: absolute;
               right: $margin;
               top: 0;
               bottom: 0;
               @extend .vertical
            }
        }
    }
</style>
