<template>
	<view class="app">
		<view class="tabs">
			<view class="tab-item">
				<view class="title">
					券
				</view>
				<view class="text">
					{{total}}张
				</view>
			</view>
		</view>
		<view class="content">
			<view class="statuss">
				<!-- <view class="statusitem" @tap="changingcoupon('WAIT_RECEIVE')"
					:style="couponstatus=='WAIT_RECEIVE'?'color: #F44B2F;':''">
					未领取
				</view>
				<span> |</span>
				<view class="statusitem" @tap="changingcoupon('NOT_USED')"
					:style="couponstatus=='NOT_USED'?'color: #F44B2F;':''">
					未使用
				</view>
				<span> |</span>
				<view class="statusitem" @tap="changingcoupon('USED')"
					:style="couponstatus=='USED'?'color: #F44B2F;':''">
					已使用
				</view>
				<span> |</span>
				<view class="statusitem" @tap="changingcoupon('EXPIRED')"
					:style="couponstatus=='EXPIRED'?'color: #F44B2F;':''">
					已过期
				</view> -->
			</view>
			<view class="rollup" v-if="couponlist.length > 0">
				<view class="item" v-for="(item,index) in couponlist" :key="index"
					:style="item.useStatus!='NOT_USED'?'height:180rpx':''">
					<view class="top"
						:style="item.useStatus!='NOT_USED'&&item.useStatus!='WAIT_RECEIVE'?'background: #EFECEC;color: #4B4B4B;':''">
						<view class="title">
							<span class="text">
								￥
							</span>
							<span class="price">
								{{item.couponPrice}}
							</span>
						</view>
						<view class="what"
							:style="item.useStatus!='NOT_USED'&&item.useStatus!='WAIT_RECEIVE'?'background: #DADADA;;':''">
							{{item.couponTitle}}
						</view>
						<view class="texts">
							满{{item.couponConsumePrice}}可用
						</view>
						<view class="time" v-if="item.useStatus!='WAIT_RECEIVE'">
							有效期至{{item.expirationEndTime}}
						</view>
						<view class="btn" v-if="item.useStatus=='WAIT_RECEIVE'" @tap='logininfo(item)'>
							{{item.useStatus=='WAIT_RECEIVE'?'领取':''}}
						</view>
						<view class="btngq" v-if="item.useStatus!='NOT_USED'&&item.useStatus!='WAIT_RECEIVE'">
							{{item.useStatus=='EXPIRED'?'已过期':''}}
							{{item.useStatus=='USED'?'已使用':''}}
						</view>
						<view class="btn" v-if="item.useStatus=='NOT_USED'" @tap='goshoping'>
							{{item.useStatus=='NOT_USED'?'使用':''}}
						</view>
					</view>
					<view class="bottom" v-if="item.useStatus=='NOT_USED'">
						领取来源：{{item.receiveSource =='NEW_PEOPLE_WELFARE'?'新人福利':''}}
						{{item.receiveSource =='EVENT_GIFT'?'活动赠送':''}}
						{{item.receiveSource =='CONSUME_REBATE'?'消费返券':''}}
					</view>
				</view>
			</view>
			<view class="noorder" v-else>
				<u-empty mode="coupon" icon-size='220'></u-empty>
			</view>
		</view>
		<u-mask :show="usershow" class='mask'>
			<view class="information">
				<image src="../../static/information.png" mode=""></image>
				<view class="title">
					请完善个人信息
				</view>
				<view class="cancel" @tap='usershow=false'>
					取消
				</view>
				<view class="determine" @tap='goinformation'>
					去完善
				</view>
			</view>
		</u-mask>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import {
		couponByUseStatus,
		insertCouponReceive
	} from '@/api/materialbenefits/index.js'
	import {
		AppIdentification
	} from '@/api/AppIdentification/index.js'
	export default {
		data() {
			return {
				item: null,
				usershow: false,
				pageNum: 1,
				pageSize: 10,
				couponlist: [],
				total: 0,
				couponstatus: '', //状态
				patientId: null,
			};
		},
		onShow() {
			this.pageNum = 1
			var that = this
			const value = uni.getStorageSync('patientId');
			if (value) {
				that.patientId = value
				that.getlist();
			} else {
				that.patientId = ''
				that.getlist();
			}
		},
		methods: {
			logininfo(item) {
				var that = this
				this.item = item
				const value = uni.getStorageSync('patientId');
				const value2 = uni.getStorageSync('openid');
				if (value && value2) {
					AppIdentification(value).then(res => {
						if (res.code == 200) {
							if (res.data.loginFlag) {
								insertCouponReceive(value, item.couponId).then(res => {
									that.getlist();
								})
							} else {
								this.usershow = true
							}
						} else {
							that.$refs.uToast.show({
								title: '请先登录',
								type: 'error',
								duration: '2000',
								url: '/pages/login/login'
							})
						}
					})
				} else {
					that.$refs.uToast.show({
						title: '请先登录',
						type: 'error',
						duration: '2000',
						url: '/pages/login/login'
					})
				}
			},
			getlist() {
				this.pageNum = 1
				couponByUseStatus(this.pageNum, this.pageSize, this.patientId).then(res => {
					this.couponlist = res.rows
					this.total = res.total
				})
			},
			changingcoupon(item) {
				if (this.couponstatus == item) {
					this.couponstatus = ''
				} else {
					this.couponstatus = item
				}
				this.getlist();
			},
			//跳转完善页面
			goinformation(item) {
				this.usershow = false
				uni.navigateTo({
					url: `/pages/information/information?couponId=${this.item.couponId}`
				})
			},
			goshoping() {
				uni.switchTab({
					url: '/pages/shopping/shopping'
				})
			},
		},
		onReachBottom() { //下滑加载
			if (this.couponlist.length >= this.total) {} else {
				this.pageNum++;
				couponByUseStatus(this.pageNum, this.pageSize, this.patientId).then(res => {
					res.rows.forEach(e => {
						this.couponlist.push(e)
					})
				})
			}
		},
		onPullDownRefresh() { //下拉刷新
			this.pageNum = 1;
			this.getlist();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss">
	.app {
		padding: 0;

		.noorder {
			margin-top: 100rpx;
		}

		.mask {
			.information {
				width: 70%;
				height: 400rpx;
				margin: 50% auto;
				background: #FFFFFF;
				border-radius: 30rpx;
				text-align: center;
				color: #FFFFFF;
				position: relative;

				.determine,
				.cancel {
					width: 200rpx;
					height: 70rpx;
					border-radius: 26rpx;
					font-size: 34rpx;
					line-height: 70rpx;
					position: absolute;
					top: 74%;
				}

				.determine {
					background: #4C7BC9;
					right: 36rpx;
				}

				.cancel {
					background: #C5BFBF;
					left: 36rpx;
				}

				.title {
					font-size: 42rpx;
					margin-top: 40rpx;
					color: #000000;
				}

				image {
					width: 100rpx;
					height: 100rpx;
					margin: 10% 0 0 0;
				}
			}
		}

		.content {
			width: 96%;
			margin: 20rpx auto 0;
			background-color: #fff;
			padding-bottom: 100rpx;

			.rollup {
				border-radius: 5rpx;

				.item {
					width: 94%;
					height: 240rpx;
					margin: 20rpx auto 0;
					border: 1rpx solid #f4f5f7;
					border-radius: 10rpx;

					.bottom {
						font-size: 22rpx;
						color: #969394;
						line-height: 60rpx;
						padding-left: 25rpx;
						border-radius: 0 0 10rpx 10rpx;
					}

					.top {
						width: 100%;
						height: 180rpx;
						background: #FDE9E8;
						position: relative;
						color: #F44B2F;
						border-radius: 10rpx 10rpx 0 0;

						.what {
							padding: 0 10rpx;
							height: 40rpx;
							background: #FED1D2;
							border-radius: 16rpx;
							font-size: 20rpx;
							line-height: 40rpx;
							text-align: center;
							position: absolute;
							top: 120rpx;
							left: 20rpx;
						}

						.btngq {
							width: 109rpx;
							height: 180rpx;
							background: #DFDEDE;
							position: absolute;
							top: 0;
							right: 0;
							text-align: center;
							line-height: 180rpx;
						}

						.btn {
							width: 98rpx;
							height: 50rpx;
							border: 2rpx solid #F44B2F;
							border-radius: 24rpx;
							font-size: 24rpx;
							position: absolute;
							top: 70rpx;
							right: 20rpx;
							text-align: center;
							line-height: 49rpx;
						}

						.time {
							font-size: 24rpx;
							position: absolute;
							top: 120rpx;
							left: 200rpx;
						}

						.texts {
							font-size: 32rpx;
							font-weight: 800;
							position: absolute;
							top: 44rpx;
							left: 200rpx;
						}

						.title {
							position: absolute;
							top: 30rpx;
							left: 10rpx;

							.price {
								font-size: 54rpx;
								font-weight: 700;
							}

							.text {
								font-weight: 600;
								font-size: 34rpx;
							}
						}
					}
				}
			}

			.statuss {
				padding-top: 25rpx;

				span {
					color: #c1c1c1;
					font-size: 18rpx;
					line-height: 60rpx;
				}

				.statusitem {
					text-align: center;
					padding: 0 40rpx;
					display: inline-block;
					height: 60rpx;
					font-size: 30rpx;
					color: #969394;
					line-height: 60rpx;
				}
			}
		}

		.tabs {
			width: 100%;

			.tab-item {
				margin: 20rpx 0 0 24rpx;
				text-align: center;
				width: 20%;

				.text {
					width: 70%;
					margin-left: 15%;
					height: 30rpx;
					background: #F44B2F;
					border-radius: 9rpx;
					color: #fff;
					font-size: 24rpx;
					line-height: 30rpx;
				}

				.title {
					font-size: 40rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #F44B2F;
					line-height: 59rpx;
				}
			}
		}
	}
</style>
