<template>
	<view class="">
		<navbar :config="config" backColor="#666"></navbar>
		<view class="lable-top" :style="{top:topHeight + 'px'}">
			<view :class="['lable-top-item' , item.value === activeLable ? 'active-lable' :'' ]"
				v-for="item in lableList" @click.stop="activeLable = item.value">
				{{item.lable}}
			</view>
		</view>
		<view style="width: 100%;height: 100rpx;"></view>
		<view class="ticket-box">
			<template v-for="item in dataList[activeLable]">
				<ticketItem :card-val="item" />
			</template>
			<uni-load-more :status="loadingStatus" v-if="loadingStatus ==='loading' " />
			<view class="empty-data" v-if="loadingStatus=== 'noMore'  && dataList[activeLable].length === 0">
				<EmptyDate />
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp().globalData;
	import ticketItem from "./ticket-item.vue";
	import { getYimaCoupon } from "@/api/government.js"
	export default {
		components: { ticketItem },
		data() {
			return {
				topHeight: 0,
				config: {
					back: true,
					title: '优惠券详情',
					color: '#1a1a1a',
					backgroundColor: [1, '#fff'],
					statusBarFontColor: 'black'
				},
				activeLable: 'active',
				lableList: [{
					value: 'active',
					lable: '未使用'
				}, {
					value: 'used',
					lable: '已使用'
				}, {
					value: 'expired',
					lable: '已过期'
				}],
				dataList: {
					active: [],
					used: [],
					expired: [],
					// "active": [{
					// 	"categoryName": '政府民生',
					// 	"couponNo": "cp24032282335858",
					// 	"couponAmount": "20",
					// 	"cardTypeName": "20元午餐券",
					// 	"csmNameList": "江岸华府,产业园食堂",
					// 	"status": "ACTIVED",
					// 	"activeTime": "2024-03-22 11:02:41",
					// 	"expireTime": "2024-03-22 23:59:59",
					// 	"ymtcAppId": "gh_9b86ebba08b0",
					// 	"linkUrl": "/packagePlaceCode/pages/place-code-list/place-code-list",
					// 	"useNotice": "产业园食堂可以使用该优惠券，最终解释权归公司所有"
					// }],
				},
				loadingStatus: ''
			}
		},
		onLoad() {
			const { statusBarHeight, navHeight } = app;
			this.topHeight = statusBarHeight + navHeight
			this.getYimaCoupon_()
		},
		onPullDownRefresh() {
			if (this.loadingStatus !== 'loading') {
				this.getYimaCoupon_()
			} else {
				uni.stopPullDownRefresh();
			}
		},
		methods: {
			getYimaCoupon_() {
				this.loadingStatus = 'loading';
				// active/used/ expired / 已激活/已使用/已过期
				getYimaCoupon().then(res => {
					const data = res.data.couponCategotyList || [];
					if (data) {
						data.forEach(el => {
							const active = el.active.map(el_c => {
								el_c.categoryName = el.categoryName;
								return el_c;
							})
							const used = el.used.map(el_c => {
								el_c.categoryName = el.categoryName;
								return el_c;
							})
							const expired = el.expired.map(el_c => {
								el_c.categoryName = el.categoryName;
								return el_c;
							})
							this.dataList.active = this.dataList.active.concat(active || []);
							this.dataList.used = this.dataList.used.concat(used || []);
							this.dataList.expired = this.dataList.expired.concat(expired || []);
						})
					}
				}).catch(err => {
					this.dataList.active = [];
					this.dataList.used = [];
					this.dataList.expired = [];
				}).finally(() => {
					setTimeout(() => {
						this.loadingStatus = 'noMore'
						uni.stopPullDownRefresh();
					}, 300)
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.lable-top {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 2;
		width: 100%;
		height: 100rpx;
		border-bottom: 1rpx solid #e6e6e6;
		padding: 0 92rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		background: #fff;

		.lable-top-item {
			height: 100%;
			line-height: 100rpx;
			position: relative;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #1a1a1a;

			&:before {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 4rpx;
				border-radius: 2rpx;
			}
		}

		.active-lable {
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #3bb7ce;

			&:before {
				background-color: #3BB7CE;
			}
		}
	}

	.ticket-box {
		width: 100%;
		padding: 50rpx 30rpx;

		.ticket-item {
			margin-bottom: 30rpx;
		}
	}
</style>