<template>
	<view class="more-coupon-page">
		<HeaderCom></HeaderCom>
		<view v-if="list.length === 0" style="padding-top: 200rpx;">
			<empty></empty>
		</view>
		<scroll-view scroll-y="true" class="main" v-if="list.length > 0" @scrolltolower="scrolltolower">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="price">
					<text class="price-sym">{{Number(item.amount)}}</text>{{item.type === 'REDUCTION' ? '' : '折'}}
				</view>
				<view class="detail">
					<view class="title">
						{{item.name}}
						<image src="@/static/new/mine/zs.png" mode="" class="title-icon"></image>
					</view>
					<view class="sub">{{typeObj[item.type]}}券</view>
					<view class="sub">{{item.tips}}</view>
					
					<view class="detail-footer">
						<view class="prices">{{item.point}}积分</view>
						<view class="operation">
							<image src="@/static/new/mine/sub.png" mode="" class="subs" @click="sub(index)"></image>
							<view class="operation-num">{{item.quantity}}</view>
							<image src="@/static/new/mine/add.png" mode="" class="add" @click="add(index)"></image>
						</view>
					</view>
				</view>
				
			</view>
		</scroll-view>
		<view class="footer">
			<view class="point">
				<text class="total">合计</text>
				<text class="sym"></text>
				{{totalPoint}} 积分
			</view>
			<view class="buy" @click="pay">立即支付</view>
		</view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/mine/moreCoupon"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import HeaderCom from '@/pages/components/header.vue'
	import {couponApi,userCouponRewardApi,userCouponBatchApi} from '@/API/user.js'
	import { mathDiv,mathAdd,mathMul } from'@/utils/mathUtils.js'
	export default{
	mixins: [myMixins],
		data(){
			return{
				list:[],
				page:1,
				total:0,
				typeObj:{
					'REDUCTION':"立减",
					'DISCOUNT':"折扣"
				  },
				  totalPoint:0
			}
		},
		components:{HeaderCom},
		onLoad(option) {
			this.getCoupon()
		},
		methods:{
			getCoupon() {
				uni.showLoading()
				couponApi({
					page: this.page,
					size: 10,
				}).then(res => {
					uni.hideLoading()
					console.log("aaaa")
					console.log(res.data.content)
					this.total = res.data.total
					console.log(this.total)
					res.data.content.forEach(item => {
						item.period = mathDiv(item.period,60)
						item['quantity'] = 0
					})
					if (this.page > 1) {
						this.list = [...this.list, ...res.data.content]
					} else {
						this.list = res.data.content
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			scrolltolower() {
				if (this.total == this.list.length) {
					return
				}
				this.page += 1
				this.getCoupon()
			},
			//减
			sub(index){
				if(this.list[index].quantity === 0){
					let total = 0
					this.list.forEach(item => {
						if(item.quantity > 0){
							total += mathMul(item.quantity,item.point)
						}
					})
					this.totalPoint = total
					return;
				}
				if(this.list[index].quantity >= 1){
					this.list[index].quantity--
				}
				let total = 0
				this.list.forEach(item => {
					if(item.quantity > 0){
						total += mathMul(item.quantity,item.point)
					}
				})
				this.totalPoint = total
			},
			//加
			add(index){
				this.list[index].quantity++
				let total = 0
				this.list.forEach(item => {
					if(item.quantity > 0){
						total += mathMul(item.quantity,item.point)
					}
				})
				this.totalPoint = total
			},
			pay(){
				if(this.totalPoint === 0){
					this.$api.msg("请选择优惠券")
					return
				}
				let obj = {
					map:{}
				}
				this.list.forEach(item => {
					if(item.quantity > 0){
						obj.map[item.id] = item.quantity
					}
				})
				uni.showLoading()
				userCouponBatchApi(uni.getStorageSync('box-id'),obj).then(res => {
					
					this.$api.msg(res.message)
					if(res.code === 200){
						setTimeout(() => {
							uni.hideLoading()
							uni.redirectTo({
								url:`/pages/mine/coupon`
							})
						},1000)
					}
				}).catch(err => {
					uni.hideLoading()
				})
				
				
				// userCouponRewardApi({couponId:this.list[0].id,userId:uni.getStorageSync('box-id')}).then(res => {
				// 	uni.hideLoading()
				// 	this.$api.msg(res.message)
				// 	if(res.code === 200){
						
				// 	}
				// }).catch(err => {
				// 	uni.hideLoading()
				// })
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.more-coupon-page{
		padding: 112rpx 32rpx 0rpx 32rpx;
		.main{
			height: calc(100vh - 256rpx);
			.list{
				height: 686rpx;
				height: 200rpx;
				background-image: url('@/static/new/mine/buy.png');
				background-repeat: no-repeat;
				background-size: 100%;
				margin-bottom: 24rpx;
				display: flex;
				align-items: center;
				.price{
					width: 264rpx;
					height: 200rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #fff;
					.price-sym{
						font-weight: 500;
						font-size: 64rpx;
						margin-right: 8rpx;
					}
				}
				.detail{
					width: 518rpx;
					height: 200rpx;
					padding: 24rpx 32rpx 24rpx 0;
					.title{
						display: flex;
						align-items: center;
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
						.title-icon{
							margin-left: 8rpx;
							width: 32rpx;
							height: 32rpx;
						}
					}
					.sub{
						font-size: 24rpx;
						color: #999999;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.detail-footer{
						
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 16rpx;
						.prices{
							font-weight: bold;
							font-size: 32rpx;
							color: #000000;
						}
						.operation{
							display: flex;
							align-items: center;
							width: 144rpx;
							height: 48rpx;
							border-radius: 8rpx;
							.subs{
								height: 48rpx;
								width: 48rpx;
							}
							.operation-num{
								height: 48rpx;
								width: 48rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 28rpx;
								color: #000000;
								border-top: 2rpx solid #E6E6E6;
								border-bottom: 2rpx solid #E6E6E6;
							}
							.add{
								height: 48rpx;
								width: 48rpx;
							}
						}
					}
				}
			}
		}
		.footer {
			width: 750rpx;
			height: 144rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			position: fixed;
			bottom: 0;
			left: 0;
		
			.point {
				// display: flex;
				// align-items: center;
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;
				.total{
					font-weight: normal;
					font-size: 28rpx;
					color: #999999;
				}
				.sym{
					font-weight: bold;
					font-size: 24rpx;
					color: #000000;
					margin: 0 6rpx 0 10rpx;
				}
		
				.ponit-icon {
					width: 64rpx;
					height: 64rpx;
					margin-right: 16rpx;
				}
			}
		
			.buy {
				width: 328rpx;
				height: 96rpx;
				background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
				border-radius: 16rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>