<template>
	<view class="coupon-page">
		<HeaderCom></HeaderCom>
		<view class="tab">
			<view class="tab-item" :class="{'active':tabIndex === index}" v-for="(item,index) in tabList" :key="index" @click="tabCk(index)">
				{{item.label}}
				<view class="tab-active" v-if="tabIndex === index"></view>
				<view class="heng" v-else></view>
			</view>
		</view>
		<scroll-view class="scroll-list-view" scroll-y="true" scroll-with-animation @scrolltolower="scrolltolower">
			<view v-if="list.length === 0" style="padding-top: 200rpx;">
				<empty></empty>
			</view>
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="detail">
					<view class="type">购物{{typeObj[item.type]}}券</view>
					<view class="name">{{item.name}}</view>
					<!-- <view class="name">{{source[item.source]}}</view> -->
					<view class="sub">{{item.tips}}</view>
					<!-- <view class="sub">满30元减10元，申购指定商品可用</view> -->
					<view class="time">有效期至{{item.expiredTime}}</view>
				</view>
				<view class="right">
					<view class="price">
						<text class="value">{{Number(item.amount)}}</text>
						<text class="sym">{{item.type === 'REDUCTION' ? '' : '折'}}</text>
					</view>
					<view class="btn">{{tabObj[item.used]}}</view>
				</view>
			</view>
			<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
		</scroll-view>
		<view class="footer-btn" @click="moreCoupon">更多优惠券</view>
		
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/mine/coupon"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import HeaderCom from '@/pages/components/header.vue'
	import { userCouponApi } from '@/API/user.js'
	import { mathDiv } from'@/utils/mathUtils.js'
	export default{
	mixins: [myMixins],
		data(){
			return{
				tabList:[
					{label:"未使用",value:"1"},
					{label:"已使用",value:"0"},
					{label:"已过期",value:"-1"},
				],
				tabObj:{
					'1':'未使用',
					'0':'已使用',
					'-1':'已过期'
				},
				typeObj:{
					'REDUCTION':"立减",
					'DISCOUNT':"折扣"
				  },
				  source:{
					  'PURCHASE':'购买获得',
					  'SYS_GIVES':"系统赠送",
					  'TASK_REWARD':"任务赠送",
					  'SIGN_IN':'签到获得'
				  },
				tabIndex:0,
				type:'',
				list:[],
				page:1,
				total:0
			}
		},
		components:{HeaderCom},
		onShow() {
			this.getCoupon()
		},
		methods:{
			getCoupon() {
				uni.showLoading()
				userCouponApi({
					page: this.page,
					status:this.tabList[this.tabIndex].value,
					size: 10,
				}).then(res => {
					uni.hideLoading()
					this.total = res.data.total
					// res.data.content.forEach(item => {
					// 	item.period = mathDiv(item.period,60)
					// })
					if (this.page > 1) {
						this.list = [...this.list, ...res.data.content]
					} else {
						this.list = res.data.content
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			scrolltolower() {
				if (this.total == this.list.length) {
					return
				}
				this.page += 1
				this.getCoupon()
			},
			tabCk(index){
				this.page = 1
				this.tabIndex = index
				this.type = this.tabList[this.tabIndex].value
				this.getCoupon()
			},
			moreCoupon(){
				uni.navigateTo({
					url:`/pages/mine/moreCoupon`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.coupon-page{
		padding: 112rpx 0 32rpx 0;
		.tab{
			display: flex;
			align-items: center;
			.tab-item{
				width: 250rpx;
				height: 96rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
				height: 48rpx;
				.tab-active{
					width: 48rpx;
					height: 8rpx;
					background: linear-gradient( 90deg, #00AAFF 0%, rgba(0,170,255,0) 100%);
					border-radius: 4rpx 0px 0px 4rpx;
				}
				.heng{
					width: 48rpx;
					height: 8rpx;
				}
			}
			.active{
				font-weight: 800;
				font-size: 28rpx;
				color: #000000;
			}
		}
		.scroll-list-view{
			padding: 0 32rpx;
			margin-top: 18rpx;
			height: calc(100vh - 226rpx);
			.list{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 686rpx;
				height: 240rpx;
				background-image: url('@/static/new/mine/coupon.png');
				background-repeat: no-repeat;
				background-size: 100%;
				margin-bottom: 24rpx;
				.detail{
					width: 462rpx;
					height: 240rpx;
					padding: 0 32rpx;
					.type{
						width: 152rpx;
						height: 40rpx;
						background: #E0F0FF;
						border-radius: 0px 0px 16rpx 16rpx;
						font-size: 24rpx;
						color: #0080FF;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.name{
						font-weight: bold;
						font-size: 32rpx;
						color: #000000;
						margin-top: 16rpx;
					}
					.sub{
						margin-top: 8rpx;
						width: 370rpx;
						height: 34rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.time{
						margin-top: 32rpx;
						// font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						border-top: 1px solid #F2F2F2;
						padding-top: 16rpx;
					}
				}
				.right{
					width: 224rpx;
					height: 240rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					.price{
						
						.value{
							font-weight: 500;
							font-size: 64rpx;
							color: #000000;
						}
						.sym{
							font-size: 24rpx;
							color: #666666;
						}
					}
					.btn{
						width: 120rpx;
						height: 48rpx;
						background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
						border-radius: 24rpx;
						// font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-top: 28rpx;
					}
				}
			}
		}
		.footer-btn{
			position: fixed;
			top: 36rpx;
			right: 32rpx;
			font-size: 28rpx;
			color: #007FFF;
			z-index: 101;
		}
	}
</style>