<template>
	<view v-if="isLoading">
		<status-nav :ifReturn="true" navBarTitle="优惠券" :marginBottom="0"></status-nav>
		<!-- 优惠券 -->
		<view class="record-nav border-box flex" style="background-color: #f5f5f5;padding: 40rpx 20rpx;margin: 0;">
			<view class="item color-8c radius20 border-box" :class="index==navIndex?'cur':''" v-for="(item,index) in navList" :key="index" @tap="changeNav(index)">{{item.title}}</view>
		</view>
		<!-- 优惠券列表 -->
		<view class="coupon-list pad-zy20 border-box">
			<view class="coupon-item radius30 mar-s40 flex" :class="navIndex==2?'grey':''" v-for="(item,index) in couponList" :key="index">
				<view class="price color-ff border-box"><text class="font30">￥</text>{{item.amount.split(".")[0]}}<text class="font30">{{'.'+item.amount.split(".")[1]}}</text></view>
				<view class="txt">
					<view class="font36">{{item.name}}</view>
					<view class="font24 color-8c mar-s10">满{{parseInt(item.condition)}}减{{parseInt(item.amount)}}</view>
					<view class="font24 color-8c mar-s10">{{item.begin_at}}至{{item.end_at}}</view>
				</view>
				<view class="btn mar-zy20 color-ff font24" v-if="navIndex==0" @tap="useEv">使用</view>
				<view class="btn mar-zy20 color-ff font24" v-if="navIndex==1" @tap="receiveEv(item.id,index)">领取</view>
			</view>
		</view>
		<!-- 到底啦 -->
		<view class="no-more font24" v-if="noMore" style="margin-top: 20rpx;"><text>—— 到底啦 ——</text></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList:[
					{title:'已领取',tag:'normal'},
					{title:'可领取',tag:'waiting'},
					{title:'已过期',tag:'invalid'}
				], //导航数据
				navIndex:0, //导航位置
				couponList:[], //优惠券列表
				page:1,
				size:10,
				noMore:false,
				isLoading:false,
			}
		},
		onLoad(op) {
			if(op.index){
				this.navIndex = op.index;
			}
		},
		onShow() {
			this.getCouponEv();
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++;
				// 查询优惠券
				this.getCouponEv();
			}
		},
		methods: {
			// 查询优惠券
			getCouponEv(){
				uni.showLoading({
					title:'加载中'
				})
				let params = {
					page:this.page,
					size:this.size,
					status:this.navList[this.navIndex].tag
				}
				this.$requst.post('/api/user/get-coupon-list',params).then(res=>{
					if(res.code == 0){
						console.log(res,'优惠券列表');
						if(res.data.length == 0){
							this.noMore = true;
						}
						this.couponList = this.couponList.concat(res.data);
					}
					uni.hideLoading();
					this.isLoading = true;
				})
			},
			// 使用优惠券
			useEv(){
				// 去首页
				uni.reLaunch({
					url:`/pages/index/index`
				})
			},
			// 领取优惠券
			receiveEv(id,index){
				this.$requst.get('/api/user/get-coupon',{coupon_id:id}).then(res=>{
					if(res.code == 0){
						this.$toolAll.tools.showToast('领取成功');
						this.couponList.splice(index,1)
					}else{
						this.$toolAll.tools.showToast(res.msg);
					}
				})
			},
			// 导航切换
			changeNav(index){
				if(index!==this.navIndex){
					this.navIndex = index;
					// 清除数据
					this.noMore = false;
					this.couponList = [];
					this.page = 1;
					// 查询优惠券
					this.getCouponEv();
				}
			},
		}
	}
</script>

<style>
	
</style>
