<template>
    <view>
        <!-- 卡券列表 -->
        <view class="coupon" v-if="couponArr.length > 0">
        	<view class="couponCont" :class="{active : item.status != 0}" v-for="(item,index) in couponArr" :key="index" @click="couponUrl(item.id, item.from, item.status)">
        		<view class="couponList">
        			<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>
        </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 { couponArr } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
                couponId    : '',      // 卡券id
                couponArr   : [],      // 卡券列表
                status      : '',      // 卡券状态
                load:       {
                    page    : 1,       // 第一页
                    allpage : 0,       // 总页数
                    has_more: false,   // 是否有分页
                    show    : false    // 是否有下一页数据
                },
                finished    : false,   // 商品列表没有更多商品是否显示
                LoadData    : false    // 数据加载完渲染
            }
        },
        onLoad(options) {
            this.couponId = options.id,
            this.status   = options.status
            
            // 获取卡券组列表
            this.couponInfo();
        },
        methods:{
            // 卡券组列表
            couponInfo() {
                if (this.load.page == 1) {
                    this.couponArr = [];
                }
                couponArr({
                    activityId: this.couponId,
                    status    : this.status,
                    page      : this.load.page
                }).then(res=>{
                    this.couponArr      = this.couponArr.concat(res.data)
                    this.load.allpage   = res.page.total_page
                    this.load.has_more  = res.page.has_more
                    // 数据渲染加载
                    this.LoadData = true
                })
            },
            
            // 优惠券跳转
            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>
    // 卡券列表
    .coupon {
        padding: 20rpx 0;
        .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: 16rpx;
                    width: calc(100% - 330rpx);
                    .active {
                        top: 15rpx;
                    }
                    .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;
                    }
                }
                .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;
                }
            }
        }
    }
</style>
