<template>
	<view class="content">

		<view class="topTab">
			<!-- tab -->
			<view class="tab">
				<view class="tabLine" :class="{tabActive:tabIndex==1}" @click="tabClick(1)">未使用</view>
				<view class="tabLine" :class="{tabActive:tabIndex==2}" @click="tabClick(2)">已使用</view>
				<view class="tabLine" :class="{tabActive:tabIndex==3}" @click="tabClick(3)">已过期</view>
			</view>

		</view>

		<!-- 列表 -->
		<view class="itemContent">
			<view v-for="(item,index) in itemData" :key="index">
				<view class="item">
					<image src="../../static/img/icon_yishiyong.png" mode="" class="stateImg" v-if="tabIndex==2">
					</image>
					<image src="../../static/img/icon_yiguoqi.png" mode="" class="stateImg" v-if="tabIndex==3"></image>
					<!-- 第一块 -->
					<view class="topView">
						<view class="leftView">
							<view class="moneyView">
								<view>￥</view>
								<view class="money">{{item.ActMoney}}</view>
							</view>
							<view class="condition" v-if="item.WhereMoney != 0">满{{item.WhereMoney}}元可用</view>
							<view class="condition" v-else>满任意金额可用</view>
						</view>

						<view class="rightView">
							<view class="cardName">{{item.ActName}}</view>
							<!-- 时间截取 -->
							<view class="valid">有效期：{{item.StartTime.slice(0,item.StartTime.length-8)}}至
								{{item.EndTime.slice(0,item.EndTime.length-8)}}
							</view>
						</view>
					</view>

					<!-- 第二快 -->
					<view class="bottomView">
						<view class="shopNamesView">适用门店：{{item.shopNames}}</view>
						<view @click="goDiscountDetail(item)">查看详情</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 上拉 加载更多 -->
		<view class="noMore" v-if="noMoreShow">没有更多数据</view>
		<!-- 无数据空白页 -->
		<nodata v-if="itemData.length==0"></nodata>

	</view>
</template>

<script>
	import nodata from '../../components/nodata/nodata.vue'
	export default {
		components: {
			nodata,
		},
		data() {
			return {
				itemData: [],
				page: 1,
				noMoreShow: false,
				tabIndex: 1,
			}
		},
		onLoad(opt) {
			this.page = 1

			this.getItemData()


		},
		methods: {
			tabClick(num) {
				this.tabIndex = num;
				this.page = 1;
				this.getItemData()
			},


			goDiscountDetail(item) {

				uni.navigateTo({
					url: 'discountDetail?couponId=' + item.ID,
				})
			},
			getItemData() {
				uni.showLoading({
					title: '加载中'
				})
				var usedState = ''
				if (this.tabIndex == 1) {
					usedState = 0
				}
				if (this.tabIndex == 2) {
					usedState = 1
				}
				var expireState = ''
				if (this.tabIndex == 3) {
					expireState = 1
				}

				let url = 'worldKeepCar/keepCarMy/listTCouponMemberPage',
					params = {
						page: this.page,
						limit: 20,
						usedState: usedState,
						expireState: expireState,

					}
				this.$http(url, params, 'GET').then(res => {
					uni.hideLoading();
					var list = res.data.Items

					// 处理 undefined和null转为空白字符串
					list.forEach((item, index) => {
						for (const key in item) {
							item[key] = this.$praseStrEmpty(item[key])
						}
					})


					if (this.page == 1) {
						this.itemData = list
					} else {
						this.itemData = this.itemData.concat(list)
					}

					if (list.length < 10) {
						this.noMoreShow = false
					} else {
						this.noMoreShow = true
					}


				})
			},

		},

		// 下拉刷新 上拉加载更多
		onPullDownRefresh() {
			this.page = 1

			this.getItemData()

			//this.getItemData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.page++;

			this.getItemData()

		},

	}
</script>

<style scoped>
	.content {
		background: #F4F5F7;
		min-height: 100vh;

	}

	.topTab {
		background: #FFFFFF;
		position: fixed;
		width: 100%;
		height: 92rpx;
		z-index: 99;
	}

	.tab {
		background: #FFFFFF;
		display: flex;
		justify-content: space-around;
		line-height: 90rpx;
		height: 90rpx;
		width: 100%;

	}

	.tabLine {

		text-align: center;
	}

	.tabActive {
		color: #FF4F00;
		border-bottom: 4rpx solid #FF4F00;
	}



	.itemContent {
		padding: 100rpx 20rpx 24rpx;
	}

	.item {
		margin: 20rpx 0rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;

	}

	.stateImg {
		width: 118rpx;
		height: 86rpx;
		position: absolute;
		right: 20rpx;
		margin-right: 20rpx;
	}

	.topView {
		display: flex;
		justify-content: flex-start;
		padding: 22rpx 0rpx;
		margin-left: 22rpx;
		margin-right: 22rpx;
		border-bottom: 1rpx #CCCCCC dashed;
		align-items: center;
	}

	.leftView,
	.rightView {
		margin-right: 40rpx;

	}

	.moneyView {
		display: flex;
		justify-content: flex-start;
		color: #FF4F00;
		align-items: baseline;
	}

	.money {
		font-size: 56rpx;
	}

	.condition {
		font-size: 22rpx;
		color: #999999;
	}

	.cardName {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-top: 10rpx;
		margin-bottom: 15rpx;
	}

	.valid {
		font-size: 26rpx;
		color: #999999;
	}

	.bottomView {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 24rpx;
		font-size: 24rpx;
		color: #666666;
	}
	.shopNamesView{
		width: 80%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.noMore {
		text-align: center;
		line-height: 50rpx;
		color: #999999;
		font-size: 28rpx;
	}
</style>