<!-- 优惠券列表 -->
<template>
	<view class="wanl-order-list">
		<!-- 顶部Tab：满减/折扣/包邮 -->
		<view class="navbar">
			<view class="nav-item text-df" v-for="(item, index) in navList" :key="index"
				:class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
				{{ item.text }}
			</view>
		</view>
		<!-- 滑动切换 -->
		<swiper :current="tabCurrentIndex" style="height: calc(100% - 60rpx)" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tag, key) in navList" :key="key">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<wanl-empty :text="$t('coupon.noCoupons')" src="ticket_default3x"
						v-if="tag.loaded === true && tag.cardList.length === 0" />
					<!-- 优惠券列表 -->
					<view class="wanl-coupon">
						<view v-for="(coupon, seat) in tag.cardList" :key="seat" :class="coupon.type"
							class="item margin-bj radius-bock" @tap="onDetails(coupon)">
							<image :src="couponBg" class="coupon-bg"></image>
							<image :src="couponReceived" class="coupon-sign" v-if="coupon.state"></image>
							<!-- 左侧：金额/折扣 -->
							<view class="item-left">
								<block v-if="coupon.type == 'reduction' || (coupon.type == 'vip' && coupon.usertype == 'reduction')">
									<view class="colour">
										<text class="text-price"></text>
										<text class="price">{{ Number(coupon.price) }}</text>
									</view>
									<view class="cu-tag wanl-gray-dark radius text-sm">
										{{ $t('mall.fullReduction', [Number(coupon.limit), Number(coupon.price)]) }}
									</view>
								</block>
								<block v-if="coupon.type == 'discount' || (coupon.type == 'vip' && coupon.usertype == 'discount')">
									<view class="colour">
										<text class="price">{{ Number(coupon.discount) }}</text>
										<text class="discount">{{ $t('mall.discountSuffix') }}</text>
									</view>
									<view class="cu-tag wanl-gray-dark radius text-sm">
										{{ $t('mall.fullDiscount', [Number(coupon.limit), Number(coupon.discount)]) }}
									</view>
								</block>
								<block v-if="coupon.type == 'shipping'">
									<view class="colour">
										<text class="price">{{ $t('mall.freeShipping') }}</text>
									</view>
									<view class="cu-tag wanl-gray-dark radius text-sm">
										{{ $t('mall.freeShippingFull', [Number(coupon.limit)]) }}
									</view>
								</block>
							</view>
							<!-- 右侧：店铺+名称+有效期+操作 -->
							<view class="item-right padding-bj">
								<view class="shop" @tap="onShop(coupon.shop_id)">
									<view class="name">
										<text class="wlIcon-dianpu margin-right-xs"></text> {{ coupon.shop.shopname }}
									</view>
									<view><text class="wlIcon-fanhui2"></text></view>
								</view>
								<view class="title">
									<view class="cu-tag sm radius margin-right-xs tagstyle">{{ coupon.type_text }}</view>
									<text class="text-cut wanl-gray text-min">{{ coupon.name }}</text>
								</view>
								<view class="content text-min">
									<view class="wanl-gray">
										<view v-if="coupon.grant != '-1'">
											<text class="wlIcon-dot"></text>{{ $t('coupon.remaining', [coupon.surplus]) }}
										</view>
										<view v-if="coupon.drawlimit != 0">
											<text class="wlIcon-dot"></text>{{ $t('coupon.limitClaim', [coupon.drawlimit]) }}
										</view>
										<block v-if="coupon.pretype == 'fixed'">
											<view><text class="wlIcon-dot"></text>{{ $t('coupon.start', [coupon.startdate]) }}</view>
											<view><text class="wlIcon-dot"></text>{{ $t('coupon.end', [coupon.enddate]) }}</view>
										</block>
										<block v-if="coupon.pretype == 'appoint'">
											<view v-if="coupon.validity == 0">
												<text class="wlIcon-dot"></text>{{ $t('coupon.permanent') }}
											</view>
											<view v-else>
												<text class="wlIcon-dot"></text>{{ $t('coupon.validDays', [coupon.validity]) }}
											</view>
										</block>
									</view>
									<!-- 已领取：去使用 / 未领取：立即领取 -->
									<view class="cu-btn sm round line-colour" @tap.stop="onApply(coupon.id)" v-if="coupon.state">
										{{ $t('coupon.useNow') }}
									</view>
									<view class="cu-btn sm round" @tap.stop="onReceive(key, seat)" v-else>
										{{ $t('mall.getNow') }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="tag.loadingType" />
					<view class="edgeInsetBottom"></view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { pullCouponList, postCouponReceive } from '@/features/mall/mall-gateway'

export default {
	data() {
		return {
			tabCurrentIndex: 0,
			navList: [
				{ type: 'reduction', text: this.$t('coupon.reductionCoupon'), loadingType: 'more', current_page: 1, cardList: [] },
				{ type: 'discount', text: this.$t('coupon.discountCoupon'), loadingType: 'more', current_page: 1, cardList: [] },
				{ type: 'shipping', text: this.$t('coupon.shippingCoupon'), loadingType: 'more', current_page: 1, cardList: [] }
			],
			couponBg: '/static/coupon/bg_coupon_3x.png',
			couponReceived: '/static/coupon/img_couponcentre_received_3x.png'
		}
	},
	onLoad() {
		this.loadData()
	},
	methods: {
		/** swiper切换 */
		changeTab(e) {
			this.tabCurrentIndex = e.target.current
			this.loadData('tabChange')
		},
		/** 顶部tab点击 */
		tabClick(index) {
			this.tabCurrentIndex = index
		},
		/** 加载优惠券列表 */
		async loadData(source) {
			let index = this.tabCurrentIndex
			let navItem = this.navList[index]
			let type = navItem.type
			if (navItem.loadingType == 'noMore') return
			if (source === 'tabChange' && navItem.loaded === true) return
			if (navItem.loadingType === 'loading') return
			navItem.loadingType = 'loading'
			try {
				const res = await pullCouponList({ type, page: navItem.current_page })
				navItem.current_page = res.currentPage
				if (res.lastPage === res.currentPage) {
					navItem.loadingType = 'noMore'
				} else {
					navItem.loadingType = 'more'
					navItem.current_page++
				}
				let cardList = res.rows.filter(item => {
					item = Object.assign(item, { state: false })
					return item.type === type
				})
				cardList.forEach(item => {
					navItem.cardList.push(item)
				})
				this.$set(navItem, 'loaded', true)
			} catch (e) {
				console.error('[coupon list] loadData', e)
				navItem.loadingType = 'more'
			}
		},
		/** 领取优惠券 */
		async onReceive(key, seat) {
			let coupon = this.navList[key].cardList[seat]
			try {
				const res = await postCouponReceive({ id: coupon.id })
				coupon.id = res.id
				coupon.state = true
				uni.showToast({ title: res.msg || this.$t('mall.receiveSuccess'), icon: 'none' })
				this.$store.commit('statistics/dynamic', {
					coupon: this.$store.state.statistics.dynamic.coupon + 1
				})
			} catch (e) {
				uni.showToast({ title: this.$t('coupon.receiveFailed'), icon: 'none' })
			}
		},
		/** 去使用优惠券 */
		onApply(id) {
			uni.navigateTo({ url: `/pages/user/coupon/apply?id=${id}&state=true` })
		},
		/** 查看优惠券详情 */
		onDetails(data) {
			// 预留详情页跳转
		},
		/** 跳转店铺 */
		onShop(id) {
			uni.navigateTo({ url: `/pages/shop/index?id=${id}` })
		}
	}
}
</script>

<style>
page {
	height: 100%;
}
</style>