<template>
	<view>
		<view class="header">
			<view class="tabs">
				<view class="item" :class="{'show': listType == ''}" @click="onTabs('')">全部</view>
				<view class="item" :class="{'show': listType == '1'}" @click="onTabs('1')">服务券</view>
				<view class="item" :class="{'show': listType == '2'}" @click="onTabs('2')">代金券</view>
				<view class="item" :class="{'show': listType == '3'}" @click="onTabs('3')">提货券</view>
			</view>
			<view class="tabs-type">
				<view class="item" :class="{'show': tabsType == ''}" @click="onTabsType('')">全部</view>
				<view class="item" :class="{'show': tabsType == 'shown'}" @click="onTabsType('shown')">已上架</view>
				<view class="item" :class="{'show': tabsType == 'unshown'}" @click="onTabsType('unshown')">已下架</view>
				<view class="item" :class="{'show': tabsType == 'expire'}" @click="onTabsType('expire')">即将过期</view>
				<view class="item" :class="{'show': tabsType == 'over'}" @click="onTabsType('over')">已过期</view>
			</view>
		</view>
		<block v-if="coupons.length > 0">
			<view class="coupons">
				<view class="coupons-flex" v-for="(item, index) in coupons" :key="index" @click="$Router.push({name: 'magDetails', params: {couponId: item.coupon_id}})">
					<view class="item cover">
						<view v-if="item.type.value === 2">
							<view class="cover-price">{{item.price || 0}}<text>元</text></view>
							<view class="cover-subtitle">代金券</view>
						</view>
						<image v-else class="cover-img" :src="item.cover" mode="aspectFill" />
					</view>
					
					<view class="item mian">
						<view class="title nowrap">{{item.title}}</view>
						<view class="time nowrap">
							<block v-if="item.time_type.value == 1">{{item.start_at}}至{{item.end_at}}</block>
							<block v-if="item.time_type.value == 2">领取后{{item.days}}天内有效</block>
						</view>
						<view class="tags nowrap">
							<text>已{{item.status.text}}</text>
							<text>{{item.goods_count}}商品可用</text>
						</view>
					</view>
					<view class="arrowright">
						<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="list-null">
				<view class="sub-title">暂无相关优惠券</view>
			</view>
		</block>
	</view>
</template>

<script>
	import { toolsCoupons } from '@/apis/interfaces/coupons'
	export default {
		data() {
			return {
				listType: '',
				tabsType: '',
				coupons	: [],
				pages	: {}
			};
		},
		onShow() {
			this.getCoupons()
		},
		methods:{
			// 选择类型
			onTabs(value){
				if(value == this.listType) return
				this.listType = value
				this.getCoupons()
			},
			// 状态筛选
			onTabsType(val){
				if(this.tabsType === val) return
				this.tabsType = val
				this.getCoupons()
			},
			// 数据列表
			getCoupons(){
				toolsCoupons({
					type	: this.listType,
					status	: this.tabsType
				}).then(res => {
					console.log(res)
					this.coupons = res.lists.data
					this.pages = res.lists.page
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		},
		onNavigationBarButtonTap() {
			this.$Router.push({name: 'couponsAdd'})
		}
	}
</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: $text-price;
					border-bottom: solid 4rpx $text-price;
				}
			}
		}
		// 类型
		.tabs-type{
			display: flex;
			padding: 20rpx 30rpx;
			background: white;
			.item{
				font-size: $title-size-sm;
				height: 46rpx;
				line-height: 46rpx;
				border-radius: 23rpx;
				padding: 0 ($padding - 10);
				background: white;
				margin-right: $margin/2;
				color: $text-gray;
				&.show{
					background-color: rgba($color: $text-price, $alpha: .1);
					color: $text-price;
				}
			}
		}
	}
	// 空提示
	.list-null{
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		text-align: center;
		@extend .vertical;
		.sub-title{
			color: $text-gray;
			font-size: $title-size-m;
		}
		.icon{
			width: 288rpx;
		}
	}
	// 订单管理
	.coupons{
		padding-top: 180rpx;
		@extend .ios-bottom;
		.coupons-flex{
			position: relative;
			background: white;
			margin: $margin;
			border-radius: $radius/2;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: $padding 70rpx $padding 0;
			.item{
				position: relative;
				padding: 0 $padding;
			}
			.arrowright{
				position: absolute;
				right: $margin;
				top: 0;
				bottom: 0;
				@extend .vertical
			}
			.cover{
				position: relative;
				border-right: dashed 3rpx $border-color;
				width: 148rpx;
				text-align: center;
				.cover-img{
					width: 148rpx;
					height: 148rpx;
					border-radius: $radius/2;
					vertical-align: top;
					background: $border-color-lg;
					border:solid 1rpx $border-color;
					box-sizing: border-box;
				}
				.cover-price{
					padding-top: 24rpx;
					font-weight: bold;
					line-height: 58rpx;
					font-size: $title-size + 10;
					color: $text-price;
					text{
						font-size: 70%;
						padding-left: 5rpx;
					}
				}
				.cover-subtitle{
					padding-bottom: 24rpx;
					line-height: 40rpx;
					color: $text-gray;
					font-size: $title-size-sm;
				}
				&::after,&::before{
					position: absolute;
					width: 30rpx;
					height: 30rpx;
					background: #f8f8f8;
					content: " ";
					right: -16rpx;
					border-radius: 50%;
				}
				&::after{
					top: -($padding + 15);
				}
				&::before{
					bottom: -($padding + 15);
				}
			}
			.mian{
				justify-content: center;
				width: calc(100% - 148rpx - #{$padding*2});
				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;
					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;
						}
					}
				}
			}
		}
	}
</style>
