<template>
	<view>
		<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="coupons">
			<view class="coupons-flex" v-for="(item, index) in coupons" :key="index">
				<view class="item cover">
					<image class="cover-img" :src="item.cover" mode="aspectFill" />
				</view>
				<view class="item mian">
					<view class="title nowrap">{{item.title}}</view>
					<view class="time nowrap">{{item.start_at}}至{{item.end_at}}</view>
					<view class="tags nowrap">
						<text>{{item.status.text}}</text>
						<text>{{item.type.text}}</text>
						<text>{{item.channel.text}}</text>
					</view>
				</view>
				<view class="arrowright">
					<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { toolsCoupons } from '@/apis/interfaces/coupons'
	export default {
		data() {
			return {
				listType: '',
				coupons	: [],
				pages	: {}
			};
		},
		onShow() {
			this.getCoupons()
		},
		methods:{
			// 选择类型
			onTabs(value){
				this.listType = value
				this.getCoupons()
			},
			// 数据列表
			getCoupons(){
				toolsCoupons({
					type: this.listType
				}).then(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
	.tabs{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		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;
			}
		}
	}
	// 订单管理
	.coupons{
		padding-top: 90rpx;
		@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;
				}
				&::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>
