<template>
	<!-- 20221015 -->
	<view class="discount-coupon-my-coupon-list-page">
		<!-- 页面内容 -->
		<view class="page-content padding-bottom-safe-footer-20">

			<!-- tab栏 -->
			<view class="jc-header-title bg-main">
				<ty-tab-around :list="tabList" :list-key="tabListKey" color-type="white" color="#ffffff"
					:active.sync="tabIndex" @click="changeTabs">
				</ty-tab-around>
			</view>

			<!-- 我的优惠券列表 -->
			<view class="padding-top-title-header">
				<ty-list-list :status="load_status">
					<view v-for="(item,index) in list" :key="index">
						<jc-discount-coupon :data="item">
							<view
								class="width-100 line-height-40 radius-20 bg-main-gradient text-center text-22 text-ff"
								v-if="item.status == 1" @tap="go('pages/mall/index',3)">
								去使用
							</view>
							<view class="" v-else-if="item.status == 2">
								<image class="status-img" src="/static/coupon/shiyong.png"></image>
							</view>
							<view class="" v-else-if="item.status == 3">
								<image class="status-img" src="/static/coupon/guoqi.png"></image>
							</view>
						</jc-discount-coupon>
					</view>
				</ty-list-list>
			</view>

			<!-- 底部栏 -->
			<view class="jc-footer-safe">
				<view class="margin-bottom-20 block-center width-400 line-height-70 border-ed bg-ff text-center text-22"
					@tap="go('/pages/discount/coupon/index')">
					更多好券，去领券中心看看
				</view>
			</view>
		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">
		</view>
	</view>
</template>

<script>
	import coupon from '../api/coupon.js'
	export default {
		data() {
			return {
				// tab栏内容
				tabList: ['未使用', '已使用', '已过期'],
				// tab栏选中
				tabIndex: 0,
				// tab栏显示key值
				tabListKey: '',
				// 列表内容
				list: [],
				// 列表状态
				load_status: ''
			}
		},

		onShow() {
			this.loadList(1)
		},

		onReachBottom() {
			this.loadList(0)
		},

		methods: {
			/**
			 * 点击切换标签
			 * @param {int} index tab栏选中
			 * @date 2022-10-15
			 */
			changeTabs(index) {
				this.loadList(1)
			},

			/**
			 * 分页加载列表
			 * @param {int} isFirstPage 是否第一页 0--不是 1--是
			 * @date 2022-10-15
			 */
			loadList(isFirstPage) {
				let status = this.tabIndex + 1
				coupon.listMyCoupon(this, isFirstPage, status)
			},
		}
	}
</script>

<style scoped>
	.status-img {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		width: 100rpx;
		height: 100rpx;
	}
</style>
