<template>
	<view style="display: flex;flex-direction: column;height:100vh;box-sizing: border-box;">
		<u-navbar placeholder title="领券中心" leftIconSize='0' :bgColor="bgColor"></u-navbar>
		<view class="bg">
			<image src="../.././static/common/bg.png" :mode="'widthFix'" style="width: 100%;height: 100%"></image>
		</view>
		<view style="height: 100rpx;padding-top: 20rpx;">
			<view class="mg-bot-24 u-f u-f-aic u-f-jcc" style="width: 100%;">
				<view class="shop-good u-f u-f-jcsb u-f-aic" style="width: calc(100% - 48rpx)"
					v-if="activeOperateMenu !== 'huanluntai'">
					<view :class="['item', discountMethod == item.id ? 'active' : '']" v-for="item in shopGood"
						:key="item.id" @click="checkGood(item.id)">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- 优惠券类型 -->
		<view class="tabview">
			<view class="tabit" v-for="(item,index) in listdata" :key="item">
				<view :class="actid==item.id?'act':''" @click="changeact(item)">
					{{item.name}}
					<text :class="actid==item.id?'':'hdis'"></text>
				</view>
			</view>
		</view>
		<view style="flex: 1;overflow-y: auto;">
			<scroll-view scroll-y>
				<view class="white-bg-wrap mg-bot-6 mg-lr-24" style="padding-left: 20rpx;padding-right: 20rpx;"
					v-if="couponList.length>0">
					<view class="u-f u-f-jcfs u-f-aifs mg-bot-30" v-for="(item, index) in couponList" :key="i">
						<view class="mg-right-10" style="flex: 1" @click="goDetail(item)">
							<image style="width: 156rpx;height:156rpx" class="border-radius-9" :src="item.couponIcon">
							</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(item)" style="flex: 3">
									<text class="fs28 light-black  one-line-ellipsis">{{item.couponName}}</text>
									<text
										class="fs24 light-gray  one-line-ellipsis mg-top-15">{{item.couponDescribe}}</text>
									<view class="u-f u-f-jcfs u-f-aifs mg-top-15">
										<text class="fs24 light-gray mg-right-12">适用规则</text>
										<text class="fs24 deep-gray">{{item.applicableRules||'平台通用'}}</text>
									</view>
									<view class="u-f u-f-jcfs u-f-aifs mg-top-15">
										<text class="fs24 light-gray mg-right-12">所需等级</text>
										<text class="fs24 deep-gray">{{item.userType}}</text>
									</view>

								</view>
								<view class="u-f u-f-fdc" style="flex: 2">
									<text class="fs24 light-gray mg-bot-8">仅剩{{item.remainingQuantity}}份</text>
									<view class="mg-bot-22" style="width: 100%">
										<progress :percent="item.remainingQuantity/item.maximumQuantity*100"
											stroke-width="3" activeColor="#FF4502" />
									</view>
									<!-- 1-待领取 2-已使用 3-待使用 4-已过期 -->
									<view>
										<text
											:class="[item.type === 1||item.type === 3 ? 'small-gradient-btn' : 'small-gradient-btn']"
											@click="quickGet(item)">{{item.type === 1 ? '立即领取' : item.type === 3 ? '去使用' : item.type === 2 ? '已使用' : '已过期'}}</text>
									</view>

									<view class="light-gray fs20 mg-top-30">
										{{item.type ==1 ? '兑换后10日内有效' :item.type ==3 ? item.deadline + '(含)前使用': item.type === 2 ? '该优惠券已使用' : '该优惠券已过期'}}
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
				<view v-if="couponList.length ==0">
					<image style="width: 376rpx;display: block;margin: 0 auto;" src="../../static/icon_xx_k.png">
					</image>
					<text style="display: block;text-align: center;color: #ccc;">暂无数据</text>
				</view>
			</scroll-view>
			<uni-popup :position="'middle'" :show="showGetPopup" @hidePopup="hidePopup">
				<view class="sys-mes-nofity">
					<view class="top u-f u-f-aic u-f-jcc">温馨提示</view>
					<view class="mg-top-38 fs28 deep-gray u-f u-f-aic u-f-jcc">{{tipMessage}}</view>
					<view class="bot u-f u-f-jcc u-f-aic" @click="goToUse"><text class="confirm">去使用</text></view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		getCusNavBarInfo
	} from "../.././common/customizeNavBarInfo.js"
	import uniPopup from "../.././components/uni-popup/uni-popup.vue"
	import loadMore from "../.././components/load-more/load-more.vue"
	export default {
		components: {
			uniPopup,
			loadMore
		},
		data() {
			return {
				actid: 1,
				shopGood: [{
						name: '全部',
						id: 4
					},
					{
						name: '商品券',
						id: 1
					},
					{
						name: '满减券',
						id: 2
					},
					{
						name: '折扣券',
						id: 3
					}
				],
				listdata: [{
						name: '待领取',
						id: 1
					},
					{
						name: '待使用',
						id: 3
					},
					{
						name: '已使用',
						id: 2
					},
					{
						name: '已过期',
						id: 4
					},
				],
				tipMessage: '',
				loadtext: "上拉加载更多",
				showGetPopup: false,
				discountMethod: 4,
				couponList: [],
				paddingTop: 0,
				pageNum: 1,
				pageSize: 10,
				bgColor: 'rgba(0,0,0,0)'
			}
		},
		computed: {
			distance() {
				return `calc(100vh - ${this.paddingTop})`
			}
		},
		mounted() {
			let {
				customizeNavBarHeight
			} = getCusNavBarInfo()
			this.paddingTop = customizeNavBarHeight + 'px'
		},
		onReachBottom() {
			this.loadMore()
		},
		onLoad() {
			this.getCouponList()
		},
		onShow() {
			this.getCouponList()
		},
		onShareAppMessage() {
			return {
				title: '蚂蚁车生活',
				path: `/pages/coupon/coupon`
			};
		},
		methods: {
			changeact(e) {
				this.actid = e.id;
				this.pageNum = 1
				this.getCouponList()

			},
			changeclick(item) {
				console.log('item', item);
			},
			loadMore() {
				if (this.loadtext != "上拉加载更多") return
				// 修改状态
				this.loadtext = "加载中..."
				this.pageNume++
				this.getCouponList()
			},
			async getCouponList() {
				let data = {
					"pageNum": this.pageNum,
					"pageSize": this.pageSize,
					"type": this.actid,
				}

				if (this.discountMethod !== 4) {
					data = Object.assign(data, {
						'discountMethod': this.discountMethod
					})
				}

				let res = await this.$http.post('/api/client/coupon/list', data, {
					token: true,
					checkToekn: true
				})
				let resData = res.data.data.rows || []

				this.couponList = this.pageNum > 1 ? this.couponList.concat(resData) : resData;
				this.loadtext = resData.length < 10 ? "没有更多数据了" : "上拉加载更多";
			},
			// 免费兑换
			async freeCoupons(item) {
				let res = await this.$http.get('/api/client/coupon/redeemCoupons?couponId=' + item.id, {}, {
					token: true,
					checkToekn: true
				})
				let resData = res.data || {}
				this.tipMessage = resData.msg
				this.showPopup()
			},
			checkGood(id) {
				this.discountMethod = id
				this.pageNum = 1
				this.getCouponList()
			},
			goDetail(item) {
				if (item.type == 2 || item.type == 4) {
					return
				}
				if (item.type === 3) {
					if (item.couponType == 5) {
						//自助洗车
						this.goToUse()
					} else {
						uni.switchTab({
							url: "/pages/shop/shop"
						})
					}
					return
				}
				//1-立即领取 2-已经领取 3-已领完
				if (item.status === 3) {
					uni.showToast({
						title: '当前优惠券已经领完',
						icon: 'none',
						duration: 500
					})
					return
				}
				uni.navigateTo({
					url: '/pagesF/coupon-detail/coupon-detail?id=' + item.id
				})
			},
			quickGet(item) {
				if (item.type == 2 || item.type == 4) {
					return
				}
				if (item.type === 1) {
					if (item.exchangeMethod === 1) {
						this.User.navigate({
							url: '/pagesD/coupon-quick-exchange/coupon-quick-exchange?couponId=' + item.id
						}, "navigateTo", true)
					} else if (item.exchangeMethod === 2) {
						this.User.navigate({
							url: '/pagesD/coupon-quick-exchange/coupon-quick-exchange?couponId=' + item.id
						}, "navigateTo", true)
					} else {
						// 免费优惠券直接兑换
						this.freeCoupons(item)
					}
				} else if (item.type === 3) {
					if (item.couponType == 5) {
						//自助洗车
						this.goToUse()
					} else {
						uni.switchTab({
							url: "/pages/shop/shop"
						})
					}
					return
				} else {
					uni.showToast({
						title: '当前优惠券已经领完',
						icon: 'none',
						duration: 500
					})
					return
				}
			},
			showPopup(item) {
				this.showGetPopup = true
			},
			hidePopup() {
				this.tipMessage = ''
				this.showGetPopup = false
				this.getCouponList()
			},
			goToUse() {
				this.hidePopup()
				this.User.navigate({
					url: '/pagesF/car-beauty/car-beauty?id=2&type=1'
				}, "navigateTo", true);
			}
		}
	}
</script>

<style>
	page {
		background-color: #FAFAF9;
	}
</style>

<style lang="scss" scoped>
	.tabview {
		display: flex;
		align-items: center;
		text-align: center;
		margin-bottom: 25rpx;

		.tabit {
			flex: 1;

			.act {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 28rpx;
				color: #FF4502;
			}

			view {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;

				text {
					display: block;
					width: 29rpx;
					height: 6rpx;
					background: #FF4502;
					border-radius: 3rpx 3rpx 3rpx 3rpx;
					margin: 0 auto;
					margin-top: 6rpx;
				}

				.hdis {
					visibility: hidden;
				}
			}
		}
	}

	.back-wrap {
		.white-back-icon {
			width: 30rpx;
			height: 30rpx;
			background: url(../.././static/shop/white-left-arrow.png) no-repeat center center;
			background-size: 50%;
		}
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 540rpx;
		z-index: -1;
	}

	.fix-top {
		width: 100%;
		left: 0;
		position: fixed;
		background-color: green;
		z-index: 3;
	}

	.page-title {
		width: 100%;
		color: #333333;
		font-size: 36rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.shop-good {
		.item {
			flex: calc(25% - 14rpx);
			padding: 16rpx 0;
			text-align: center;
			background-color: #ffffff;
			border-radius: 18rpx;
			margin-right: 14rpx;

			&:last-child {
				margin-right: 0;
			}

			&.active {
				text-align: center;
				color: #ffffff;
				background-color: #FF4502;
			}
		}
	}

	.sys-mes-nofity {
		padding: 0 90rpx;
		padding-bottom: 50rpx;
		position: relative;
		width: 100%;
		background: linear-gradient(180deg, #FFE3D9 0%, #FFFFFF 100%);
		border-radius: 14rpx;

		.top {
			border-radius: 14rpx;
			height: 148rpx;
		}

		.bot {
			margin-top: 72rpx;

			.confirm {
				padding: 10rpx 60rpx;
				border-radius: 30rpx;
				color: #ffffff;
				background-color: #FF4502;
			}
		}
	}

	.bg-top-pic {
		padding-bottom: 68rpx;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1;
		overflow: hidden;
	}

	.small-gradient-btn {}
</style>