<template>
    <view>
        <!-- 我的卡券 -->
        <view class="couponTab">
        	<view class="couponTab-label" :class="{active : label.stateType == item.used}" v-for="(item,index) in label.couponLabel" :key="index" @click="orderTab(item.used)">
        		{{ item.title }}
        		<view v-if="item.used == 0">({{ couponData.count.init }}张)</view>
        		<view v-else-if="item.used == 1">({{ couponData.count.used }}张)</view>
        		<view v-else>({{ couponData.count.pass }}张)</view>
        	</view>
        </view>
        
        <!-- 卡券列表 -->
        <view class="coupon" v-if="couponData.couponArr != ''">
        	<view class="couponCont" :class="{active : item.status != 0}" v-for="(item,index) in couponData.couponArr" :key="index">
        		<view class="couponList" @click="couponUrl(item.coupon_id, item.from, item.status)">
        			<view class="couponList-left">
        				<image class="couponList-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/coupon_img.png"></image>
        
        				<!-- 优惠券 -->
        				<view class="couponList-icon" v-if="item.type == 'physical'">
        					<image src="https://card.ysd-bs.com/storage/materials/2021/09/01/coupon_icon_01.png"></image>
        				</view>
        
        				<!-- 实物 -->
        				<view class="couponList-icon" v-else>
        					<image src="https://card.ysd-bs.com/storage/materials/2021/09/01/coupon_icon_00.png"></image>
        				</view>
        			</view>
        			<view class="couponList-center" :class="{active : item.used_at != '' || item.status == 0}">
        				<view class="nowrap couponList-title">{{ item.name }}</view>
        				<view class="couponList-time">{{ item.startTime }} 至 {{ item.endTime }}</view>
        				<view class="nowrap couponList-used" v-if="item.status == 0">活动来源： {{ item.activity_name }}</view>
        				<view class="couponList-used" v-if="item.used_at != ''">使用时间：{{ item.used_at }}</view>
        			</view>
        			<block v-if="item.status == 0">
        				<view class="couponList-right">
        					去使用
        				</view>
        			</block>
        			<image v-if="item.status == 1" src="https://card.ysd-bs.com/storage/materials/2021/09/01/coupon_tips_00.png" class="coupoTips"></image>
        			<image v-if="item.status == 2" src="https://card.ysd-bs.com/storage/materials/2021/09/01/coupon_tips_01.png" class="coupoTips"></image>
        		</view>
        		<view class="couponMore" v-if="item.count > 1">
        			<view class="couponMore-text" @click="couponTap(item.activityId, item.status)">
        				<view class="couponMore-title">查看全部{{item.count}}张卡券</view>
        				<image class="couponMore-arrow" src="/static/icon/arrow_left.png"></image>
        			</view>
        		</view>
        	</view>
        </view>
        
        <!-- 优惠券为空 -->
        <view class="pack-center pages-hint" v-else>
        	<image src="https://card.ysd-bs.com/storage/materials/2021/09/01/coupon_tips.png"></image>
        	<view>暂无优惠券</view>
        </view>
    </view>
</template>

<script>
    import { coupon, washcarCoupon } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
                label : {
                   stateType   : '0', // 卡券状态
                   couponLabel : [
                        { title : "未使用", used: 0 },
                        { title : "已使用", used: 1 },
                        { title : "已过期", used: 2 }
                    ]
                },
                couponData: {
                    couponArr   : '',   // 卡券列表
                    coupons     : [],
                    count       : '',   // 卡券数量
                }
            }
        },
        onLoad(options) {
            
        },
        onShow () {
            // 获取卡券列表
            this.couponInfo();
        },
        methods:{
            // 卡券列表
            couponInfo() {
                coupon(this.label.stateType).then(res=>{
                    this.couponData.count     = res.count
                    this.couponData.couponArr = res.list
                })
            },
            
            // 卡券tabs
            orderTab(used){
                if(this.label.stateType != used){
                    this.label.stateType = used
                    // 获取卡权益
                    this.couponInfo()
                }
            },
            
            // 跳转优惠券分组
            couponTap(id, status) {
                uni.navigateTo({
                  url: '/pages/couponArr/couponArr?id=' + id + '&status=' + status
                })
            },
            
            // 优惠券跳转
            couponUrl(newId, newFrom, newStatus) {
                if(newStatus == 0) {
                    if(newFrom == 'washcar') {
                        washcarCoupon(newId).then(res=>{
                            const newUrl = res.data
                            let url= encodeURIComponent(newUrl)
                            uni.redirectTo({
                                // 跳转到webview页面
                                url: `/pages/washcar/washcar?url=${url}`
                            });
                        }).catch(err=>{
                            if(!err.login){
                                // 写入缓存
                                uni.setStorage({
                                    key     : 'token',
                                    data    : ''
                                })
                            }
                        })
                        return
                    }
                    uni.navigateTo({
                        url: '/pages/couponDetails/couponDetails?id=' + newId
                    })
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    // 优惠券tab
    .couponTab {
        display: flex;
        background: #fff;
        position: fixed;
        width: 100%;
        left: 0;
        height: 100rpx;
        top: 0;
        z-index: 99;
        .couponTab-label {
            flex: 3;
            text-align: center;
            position: relative;
            padding: 10rpx 0 0;
            font-size: 26rpx;
            &::after {
                position: absolute;
                content: '';
                left: calc(50% - 20rpx);
                bottom: 0;
                width: 40rpx;
                background: transparent;
                height: 6rpx;
                border-radius: 30%;
            }
            &.active {
                color: #f57e32;
            }
            view {
                font-size: 24rpx;
                margin-top: 6rpx;
            }
        }
    }
    // 卡券列表
    .coupon {
        margin-top: 70px;
        .couponCont {
            margin: 0 20rpx 20rpx;
            width: calc(100% - 40rpx);
            border-radius: 10rpx;
            overflow: hidden;
            .couponList {
                background: #fff;
                width: 100%;
                height: 160rpx;
                position: relative;
                .couponList-left {
                    position: relative;
                    left: 0;
                    top: 0;
                    width: 160rpx;
                    height: 160rpx;
                    .couponList-img {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        z-index: 1;
                    }
                    .couponList-icon {
                        position: absolute;
                        left: calc(50% - 56rpx);
                        top: calc(50% - 50rpx);
                        z-index: 2;
                        width: 100rpx;
                        height: 100rpx;
                        background: #fff;
                        border-radius: 50%;
                        padding: 20rpx;
                        box-sizing: border-box;
                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .couponList-center {
                    position: absolute;
                    left: 180rpx;
                    top: 18rpx;
                    width: calc(100% - 330rpx);
                    .couponList-title {
                        margin-bottom: 10rpx;
                        font-size: 28rpx;
                        font-weight: 600;
                    }
                    .couponList-time,
                    .couponList-used {
                        font-size: 24rpx;
                        color: grey;
                    }
                    .couponList-used {
                        margin-top: 14rpx;
                        color: grey;
                    }
                }
                .couponList-right {
                    background: #ee8e44;
                    color: #fff;
                    border-radius: 30rpx;
                    width: 110rpx;
                    text-align: center;
                    height: 50rpx;
                    line-height: 50rpx;
                    position: absolute;
                    right: 20rpx;
                    top: 55rpx;
                    font-size: 24rpx;
                    &.active {
                        background: #dddddd;
                    }
                }
            }
            .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: 99;
                    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 {
                        width: 28rpx;
                        height: 28rpx;
                        margin-top: 26rpx;
                    }
                }
            }
            &.active .couponList-img,
            &.active .couponList-icon {
                -webkit-filter: grayscale(100%);
                -moz-filter: grayscale(100%);
                -ms-filter: grayscale(100%);
                -o-filter: grayscale(100%);
                filter: grayscale(100%);
                filter: gray;
            }
        }
    }
</style>
