<template>
	<view class="mg-lr-24">
		<view class="tab-list u-f u-f-jcsb u-f-aic mg-bot-24">
			<view class="list-item" v-for="(item, index) in tabList" :key="item.id">
				<common-tab :acitve-tab="activeTab" :item="item" @tab-item="handleTabItem"></common-tab>
			</view>
		</view>

		<view class="white-bg-wrap mg-bot-20" v-for="(item,index) in discountCouponList" :key="index">
			<view class="u-f u-f-jcfs u-f-aifs mg-bot-30">
				<view class="mg-right-10" style="flex: 1">
					<image style="width: 156rpx;height:156rpx" :src="item.couponPicture"></image>
				</view>
				<view style="flex: 3">
					<view class="u-f u-f-jcsb u-f-aic" style="flex: 2;">
						<view class="u-f u-f-fdc">
							<text class="fs28 light-black mg-bot-24">{{item.couponName}}</text>
							<text class="fs24 light-gray mg-bot-30"
								style="width: 200rpx;">{{item.couponDescribe}}</text>
							<view class="u-f u-f-jcfs u-f-aifs">
								<text class="fs24 light-gray mg-right-12">所需等级</text>
								<text class="fs26 deep-gray">{{item.requiredLevel}}</text>
							</view>
						</view>
						<view>
							<view class="u-f u-f-fdc u-f-jcc" v-if="item.type==1">
								<view class="mg-bot-56 u-f u-f-jcc u-f-aic">
									<text class="ls-gray-btn">已使用</text>
								</view>
								<text class="small-gray-btn">去使用</text>
							</view>
							<view class="u-f u-f-fdc" @click="goUse" v-if="item.type==2">
								<text class="small-gradient-btn">去使用</text>
							</view>
							<view class="u-f u-f-fdc u-f-jcc" v-if="item.type==3">
								<view class="mg-bot-56 u-f u-f-jcc u-f-aic">
									<text class="ls-gray-btn">已过期</text>
								</view>
								<text class="small-gray-btn">去使用</text>
							</view>
						</view>

					</view>
					<view class="light-gray fs24 mg-top-10" style="text-align: right;">
						{{item.couponExpirationTime}}(含)前使用
					</view>
				</view>
			</view>
		</view>
		<view v-if="discountCouponList.length ==0">
			<image style="width: 376rpx;display: block;margin: 0 auto;" src="../../static/icon_xx_k.png">
			</image>
			<text style="display: block;text-align: center;color: #ccc;">暂无数据</text>
		</view>
		<!-- <view class="white-bg-wrap mg-bot-20">
			<view class="u-f u-f-jcfs u-f-aifs mg-bot-30">
				<view class="mg-right-10" style="flex: 1"
					@click="goDetail('/pagesF/coupon-detail/coupon-detail')">
				</view>
				<view style="flex: 3">
					<view class="u-f u-f-jcsb u-f-aifs">
						<view class="u-f u-f-fdc" @click="goDetail('/pagesF/coupon-detail/coupon-detail')">
							<text class="fs28 light-black mg-bot-24">商城满100-20满减券</text>
							<text class="fs24 light-gray mg-bot-30">仅用于商城指定产品</text>
							<view class="u-f u-f-jcfs u-f-aifs">
								<text class="fs24 light-gray mg-right-12">所需等级</text>
								<text class="fs26 deep-gray">黄金会员</text>
							</view>
						</view>
						<view class="u-f u-f-fdc u-f-jcsb">
							<text class="little-small-gray-btn mg-bot-56" style="text-align: center;">已使用</text>
							<text class="small-gray-btn">去使用</text>
						</view>
					</view>
					<view class="light-gray fs24 mg-top-10" style="text-align: right;">2024年04月08日(含)前使用</view>
				</view>
			</view>
		</view> -->

		<view class="fix-bot u-f u-f-aic u-f-jcc">
			<view class="line-gradient-btn" style="padding: 24rpx 0;width: calc(100% - 48rpx)"
				@click="goGetCoupon('/pages/coupon/coupon')">
				去领取
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 'all',
				tabList: [{
						name: "全部",
						id: "all",
						index: 0,
					},
					{
						name: "已使用",
						id: "yishiyong",
						index: 1,
					},
					{
						name: "待使用",
						id: "daishiyong",
						index: 2,
					},
					{
						name: "已过期",
						id: "yiguoqi",
						index: 3,
					}
				],
				tabIndex: 0,
				discountCouponList: [],
				pageNum: 1,
				pageSize: 20,
				total: 0
			}
		},
		onShow() {
			this.getlistData()
		},
		onReachBottom() {
			if (this.total > this.discountCouponList.length) {
				this.pageNum = this.pageNum + 1
				this.getList(true)
			} else {
				uni.showToast({
					title: '没有更多啦！',
					icon: 'none'
				})
			}
		},
		methods: {
			handleTabItem(item) {
				this.activeTab = item.id
				this.tabIndex = item.index
				this.pageNum = 1;
				this.getlistData()
			},
			getlistData(flag) {
				this.$http.post('/api/client/couponRecord/list', {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					type: this.tabIndex
				}).then((res) => {
					this.discountCouponList = !flag ? res.data.data.rows : this.discountCouponList.concat(res.data
						.data.rows)
					this.total = res.data.data.total
				})
			},
			goUse() {
				this.User.navigate({
					url: '/pagesF/car-beauty/car-beauty?id=2'
				}, "navigateTo", true);
				// uni.switchTab({
				// 	url: "/pages/shop/shop"
				// })
			},
			goGetCoupon(url) {
				this.User.navigate({
					url: url
				}, 'switchTab')
			}
		}
	}
</script>

<style>
	page {
		background-color: #FAFBFF;
	}
</style>

<style lang="scss" scoped>
	.tab-list {
		.list-item {
			font-size: 30rpx;
			margin-right: 120rpx;

			&:last-child {
				margin-right: 0;
			}
		}
	}

	.fix-bot {
		width: 100%;
		position: fixed;
		bottom: 94rpx;
		left: 0;
		z-index: 333;
	}

	.ls-gray-btn {
		vertical-align: middle;
		text-align: center;
		font-weight: 400;
		font-size: 18rpx;
		color: #FFFFFF;
		padding: 2rpx 10rpx;
		background: #999999;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
	}
</style>