<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"
					@click="goDetail(`/pages/coupon-detail/coupon-detail?id=${item.couponId}`)">
					<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">
						<view class="u-f u-f-fdc" @click="goDetail('/pages/coupon-detail/coupon-detail')">
							<text class="fs28 light-black mg-bot-24">{{item.couponName}}</text>
							<text class="fs24 light-gray mg-bot-30">{{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 class="u-f u-f-fdc u-f-jcsb" v-if="item.type==1">
							<text class="little-small-gray-btn mg-bot-56" style="text-align: center;">已使用</text>
							<!-- <text class="small-gradient-btn">去使用</text> -->
							<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" v-if="item.type==3">
							<text class="small-gradient-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="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('/pages/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('/pages/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>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 'all',
				tabList: [{
						name: "全部",
						id: "all",
						index:0,
					},
					{
						name: "已使用",
						id: "yishiyong",
						index:1,
					},
					{
						name: "未使用",
						id: "weishiyong",
						index:2,
					},
					{
						name: "已过期",
						id: "yiguoqi",
						index:3,
					}
				],
				tabIndex: 0,
				discountCouponList: [],
			}
		},
		onShow() {
			this.getlistData()
		},
		methods: {
			handleTabItem(item) {
				this.activeTab = item.id
				this.tabIndex = item.index
				this.getlistData()
			},
			getlistData() {
				this.$http.post('/api/client/couponRecord/list', {
					pageNum: 1,
					pageSize: 10,
					type: this.tabIndex
				}).then((res) => {
					this.discountCouponList = res.data.data.rows
				})
			},
			goUse() {
				console.log(123)
				uni.switchTab({
					url: "/pages/shop/shop"
				})
			}
		}
	}
</script>

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

			&:last-child {
				margin-right: 0;
			}
		}
	}
</style>