<template>
	<view class="page-container">
		<view class="list-title-btns">
			<view @click="doChangeStatus" data-value="1" :class="currentStatus==1? 'btn-select':'btn-normal'"
				class="border-left">
				<view class="tab">
					<text>可用</text>
					<view :class="currentStatus==1?'border-select':'border-normal'"></view>
				</view>
			</view>
			<view @click="doChangeStatus" data-value="2" :class="currentStatus==2? 'btn-select':'btn-normal'"
				class="border-right">
				<view class="tab">
					<text>已使用</text>
					<view :class="currentStatus==2?'border-select':'border-normal'"></view>
				</view>
			</view>
			<view @click="doChangeStatus" data-value="3" :class="currentStatus==3? 'btn-select':'btn-normal'"
				class="border-right">
				<view class="tab">
					<text>不可用</text>
					<view :class="currentStatus==3?'border-select':'border-normal'"></view>
				</view>
			</view>
		</view>
		<view style="margin-top: 10rpx;">
			<ContainerLoading :loadingVisible="loadingState">
				<scroll-view scroll-y style="height: 80vh;" :lower-threshold="100" refresher-background="#FFFFFF00"
					@scrolltolower="doLoadMore">
					<view class="coupons-list-box">
						<block v-for="(item,index) in couponsList" :key="index">
							<view class="tickets" :class="boderStyle(currentStatus)">
								<view class="l-tickets-box">
									<view class="l-tickets" :class="fontColor(currentStatus)">
										<view class="l-icon">¥</view>
										<view class="l-price">{{item.coupon.amount/100}}</view>
									</view>
									<view class="use-link" @click="showRule">使用规则</view>
								</view>
								<!-- 虚线 -->
								<view class="v-divide"></view>
								<view class="r-tickets">
									<view class="r-title">{{item.coupon.title}}</view>
									<view class="r-time">
										{{timeSplit(item.coupon.useGmtStart)}}-{{timeSplit(item.coupon.useGmtEnd)}}
									</view>
								</view>
							</view>
						</block>
						<uni-load-more :status="loadMore"></uni-load-more>
					</view>
				</scroll-view>
			</ContainerLoading>
		</view>
	</view>
</template>

<script>
	import ContainerLoading from '@/components/container-loading.vue';
	import ProApi from '@/common/js/net/projectApi.js'
	import {
		boderStyle,
		fontColor,
		timeSplit
	} from '@/common/js/conver.js'
	export default {
		components: {
			ContainerLoading
		},
		data() {
			return {
				currentStatus: 1,
				couponsList: [], //订单列表
				pageData: {
					page: 1,
					rows: 10,
					isEffective: '',
					isUsed: '',
				}, //检索参数
				loadingState: 'loading', //加载状态
				listRefreshTrig: false, //list刷新状态
				isLoadMore: false, //加载更多的状态
				hasMore: true, //是否有更多数据
				keywords: '', //搜索关键字
				loadMore: 'more'
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '我的优惠卷',
			})
			uni.setNavigationBarColor({
				frontColor: '#000000', // 必写项，字体颜色仅支持#ffffff和#000000
				backgroundColor: '#F0F0F0', // 传递的颜色值，仅支持十六进制颜色
				animation: { // 可选项
					duration: 500,
					timingFunc: 'easeIn'
				}
			})
			//加载数据
			this.doRefreshList()
		},
		onPullDownRefresh() {
			this.doRefreshList()
			uni.stopPullDownRefresh()
		},
		methods: {
			boderStyle,
			fontColor,
			timeSplit,
			//tab切换
			doChangeStatus(e) {
				const value = e.currentTarget.dataset.value
				this.currentStatus = value
				this.doRefreshList()
			},
			//获取我的优惠卷
			doGetMyCoupons(isRefresh) {
				const _self = this
				_self.couponsList = isRefresh ? [] : _self.couponsList
				_self.loadingState = isRefresh ? 'loading' : ''
				ProApi.doGetCouponseList(_self.pageData)
					.then(res => {
						var status = 'success'
						status = res.rows && res.rows.length > 0 ? 'success' : 'empty'
						_self.loadingState = isRefresh ? status : ''
						_self.couponsList = _self.couponsList.concat(res.rows)
						_self.listRefreshTrig = false
						_self.isLoadMore = false
						_self.hasMore = _self.couponsList.length < res.total
						_self.loadMore = _self.hasMore ? 'more' : 'noMore'
					})
					.catch(err => {
						_self.loadingState = 'error'
						_self.listRefreshTrig = false
						_self.isLoadMore = false
						_self.hasMore = true
						_self.loadMore = 'more'
					})
			},
			//下拉刷新
			doRefreshList() {
				const _self = this
				var isEffective = ''
				var isUsed = ''
				if (_self.currentStatus == 1) {
					isEffective = 1
					isUsed = 0
				} else if (_self.currentStatus == 2) {
					isEffective = ''
					isUsed = 1
				} else {
					isEffective = 0
					isUsed = 0
				}
				_self.listRefreshTrig = true
				_self.loadingState = 'loading'
				_self.hasMore = true
				_self.pageData.page = 1
				_self.pageData.isEffective = isEffective
				_self.pageData.isUsed = isUsed
				_self.isLoadMore = false
				_self.loadMore = 'more'
				_self.doGetMyCoupons(true)
			},

			//加载更多
			doLoadMore() {
				//判断是否正在加载中 与是否存在更多数据
				const _self = this
				if (_self.isLoadMore || _self.hasMore=='noMore') {
					return
				}
				var isEffective = ''
				var isUsed = ''
				if (_self.currentStatus == 1) {
					isEffective = 1
					isUsed = 0
				} else if (_self.currentStatus == 2) {
					isEffective = ''
					isUsed = 1
				} else {
					isEffective = 0
					isUsed = 0
				}
				_self.isLoadMore = true
				_self.hasMore='loading'
				_self.pageData.page = ++_self.pageData.page
				_self.pageData.isEffective = isEffective
				_self.pageData.isUsed = isUsed
				_self.doGetMyCoupons(false)
			},
			//显示使用规则
			showRule() {
				const id = '89c4ca41-a44e-4ae2-bad3-6fa6536dd453'
				wx.navigateTo({
					url: '/pages/common/rule/rule?id=' + id,
				})
			}
		}
	}
</script>

<style lang="scss">
	.list-title-btns {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 16px;
		text-align: center;
		background-color: #F0F0F0;
	}

	.btn-select {
		line-height: 20px;
		color: rgba(233, 157, 66, 1);
		font-size: 16px;
		text-align: center;
		flex: 1;
		padding: 10px;
		color: #2A9E75;
		font-weight: bold;
	}

	.btn-normal {
		line-height: 20px;
		color: rgba(16, 16, 16, 1);
		flex: 1;
		font-size: 16px;
		text-align: center;
		padding: 10px;
		font-weight: bold;
	}

	.border-select {
		width: 20px;
		height: 4px;
		background-color: #2A9E75;
		margin-top: 10px;
		border-radius: 2px;
	}

	.tab {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.border-normal {
		width: 20px;
		height: 4px;
		margin-top: 10px;
		border-radius: 2px;
		background-color: #F0F0F0;
	}

	.coupons-list-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.tickets {
		display: flex;
		padding: 5px;
		width: 90vw;
		box-sizing: border-box;
		border-radius: 5px;
		background-color: white;
		flex-direction: row;
		padding: 20px 0px;
		box-shadow: 0px 0px 1px 1px #F0F0F0;
	}

	.tickets:nth-of-type(n+2) {
		margin-top: 10px;
	}

	.tickets-yellow {
		border-left: 5px solid #FFA900;
	}

	.tickets-gray {
		border-left: 5px solid #A9A9A9;
	}

	.tickets-green {
		border-left: 5px solid #2A9E75;
	}

	.font-yellow {
		color: #FFA900
	}

	.font-gray {
		color: #A9A9A9;
	}

	.font-green {
		color: #2A9E75;
	}

	.v-divide {
		height: auto;
		border-right: 1.5px dashed rgba(221, 221, 221, 1);
	}

	.l-tickets-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 0.3;
	}

	.l-tickets {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: baseline;
		padding: 10px;
	}

	.use-link {
		color: #0a86fa;
		text-align: center;
		font-size: 12px;
	}

	.l-icon {
		font-size: 14px;
		margin-bottom: 6px;
	}

	.l-price {
		font-size: 20px;
		font-weight: bold;
		margin-left: 5px;
	}

	.r-tickets {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		font-size: 14px;
		flex: 0.7;
		padding-left: 20px;
	}

	.r-title {
		line-height: 25px;
		color: #313131;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		font-family: PingFangSC-medium;
	}

	.r-time {
		line-height: 17px;
		color: rgba(118, 118, 118, 1);
		font-size: 12px;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-top: 10px;
	}

	.ticket-container:nth-last-of-type(n+1) {
		margin-top: 10px;
	}


	.ticket-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		color: #5D3900;
		font-weight: 400;
	}

	.ticket-content {
		font-size: 18px;
		color: #5D3900;
		text-align: center;
		margin-top: 5px;
		font-weight: 800;
	}

	.ticket-desc {
		font-size: 12px;
		color: #5D3900;
		margin-top: 10px;
		font-weight: 400;
	}


	.coupons-icon {
		background-image: url('data:image/png;base64,[encoded data, 12684 characters]');
		background-size: contain;
		background-repeat: no-repeat;
	}
</style>