<template>
	<view class="container">
		<view class="top">
			<view class="nav" :style="{'height':height+4+'px','padding-top':statusBarHeight+'px'}">
				<image @click="$router.pop()" class="back" src="../../static/back-white.png" mode="heightFix"></image>
				<view class="title">
					卡券信息
				</view>
			</view>
			<view class="num">
				<view class="left">卡券数量：{{couponData.cardNumberTotal}}</view>
				<view class="right" @click="showRecover=true">卡券回收</view>
			</view>
			<view class="money"><text>价值</text>￥{{couponData.cardCostTotal}}</view>
			<view class="tab">
				<view @click="clickSelectBtn()" class="btn" :style="{'opacity': type===100?'':'0.4'}">
					<image class="img" :src="selectBtn?'../../static/coupon-select-close.png':'../../static/coupon-select-btn.png'" mode=""></image>
					<view class="text">批量管理</view>
				</view>
				<view @click="clickType(100)" class="item" :class="[type==100?'active':'']">
					待解锁
				</view>
				<view @click="clickType(200)" class="item" :class="[type==200?'active':'']">
					已解锁
				</view>
			</view>
		</view>
		<view class="list" v-if="list.length>0">
			<view class="coupon-content" v-for="(item,index) in list" :key="index">
				<image @click="addItem(item)" v-if="selectBtn" class="select-img" :src="selectCouponArray.indexOf(item.cardId)>-1?'../../static/select-h.png':'../../static/select-n.png'" mode=""></image>
				<view class="coupon-big">
					<image v-if="isExpired(item)" class="expired" src="../../static/expired.png" mode=""></image>
					<view class="goods-info">
						<image v-if="!isExpired(item)" class="bg-img" src="../../static/coupon-top-h.png" mode=""></image>
						<image v-if="isExpired(item)" class="bg-img" src="../../static/coupon-top-gray.png" mode=""></image>
						<view class="left">
							<image class="img" :src="item.brandImg" mode=""></image>
							<view class="info">
								<view class="name">{{item.brandName}}</view>
								<view class="spec">{{item.faceValue}}</view>
							</view>
						</view>
						<view class="num">
							<view class="no">NO:{{item.cardSerialNumber}}</view>
							<view class="time">{{item.validityEndTime}}</view>
						</view>
					</view>
					<view class="coupon-info">
						<image v-if="!isExpired(item)" class="bg-img" src="../../static/coupon-bottom-h.png" mode=""></image>
						<image v-if="isExpired(item)" class="bg-img" src="../../static/coupon-bottom-gray.png" mode=""></image>
						<view class="left" v-if="item.validityStatus===100">
							<view>卡号：{{item.cardAccount}}</view>
							<view>卡密：{{item.cardPasswd}}</view>
						</view>
						<view class="left" v-if="isExpired(item)">
							<view>卡密：{{item.cardPasswd}}</view>
						</view>
						<image @click="clickItem(item)" class="img" :src="getImg(item)" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType" v-if="list.length>0"></uni-load-more>
		<view class="empty" v-if="list.length<=0 && loadingType != 'loading'">
			<image class="empty-img" src="../../static/empty-coupon.png" mode=""></image>
			<view class="empty-text">暂无订单</view>
		</view>
		<view class="bottom" v-if="selectBtn" :style="{'height':safeAreaBottom+60+'px'}">
			<view class="left">
				<image @click="addAllItem()" class="img" :src="isSelectAll?'../../static/select-h.png':'../../static/select-n.png'" mode=""></image>
				<view class="text">全选</view>
			</view>
			<view class="right" @click="unLockCard()">
				批量解锁({{selectCouponArray.length}})
			</view>
		</view>
		<AlertSelectStatus v-show="showChangeStatusAlert" closeName="showChangeStatusAlert" :useState="changeStatusItem.useState" @change="changeStatus"></AlertSelectStatus>
		<AlertUnlock v-show="showUnlockAlert" closeName="showUnlockAlert" @certain="unLockCard"></AlertUnlock>
		<AlertRecover v-show="showRecover" closeName="showRecover"></AlertRecover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: this.CustomBarHeight,
				statusBarHeight: this.StatusBarHeight,
				safeAreaBottom: this.SafeAreaBottom,
				couponData: {},
				type: 100,
				list: [],
				page: 1,
				loadingType: 'more',
				orderId: '',
				selectBtn: false,
				selectCouponArray: [],
				changeStatusItem: {},
				showChangeStatusAlert: false,
				showUnlockAlert: false,
				showRecover: false
			}
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.getCouponData()
			this.getList()
		},
		onReachBottom () {
			this.getList()
		},
		computed: {
			isSelectAll() {
				return this.selectCouponArray.length === this.list.length
			}
		},
		methods: {
			getCouponData() {
				this.$net.post('/cards/summary', {'orderSn':this.orderId}).then(res => {
					if (res.code === 200) {
						this.couponData = res.data
					} else {
						this.toast(res.message)
					}
				})
			},
			getList() {
				if (this.loadingType == 'noMore' || this.loadingType == 'loading') {
					return
				}
				this.loadingType = 'loading';
				let params = {'page': this.page, 'pageSize':'10', 'type': this.type, 'orderSn': this.orderId}
				this.$net.post('/cards/list', params).then((res)=>{
					if (res && res.code==200) {
						this.list = this.list.concat(res.data.list)
						if (res.data.list.length < 10) {
							this.loadingType = 'noMore'
						} else {
							this.loadingType = 'more'
							this.page++
						}
					} else {
						this.toast(res.message)
					}
				})
			},
			isExpired(item) {
				// 有效期状态 100 有效 200 过期
				if (this.type === 100) {
					return item.validityStatus === 200
				} else {
					return item.validityStatus === 200 && item.useState === 10
				}
			}, 
			getImg(item) {
				if (this.type === 100) {
					if (this.isExpired(item)) {
						return '../../static/lock-gray.png'
					} else {
						return '../../static/lock-h.png'
					}
				} else {
					if (this.isExpired(item)) {
						return '../../static/write-gray.png'
					} else {
						return '../../static/write-h.png'
					}
				}
			},
			clickType(type) {
				if (this.type === type) {
					return
				}
				this.type = type
				this.selectBtn = false
				this.refreshList()
			},
			clickSelectBtn() {
				if (this.type === 200) {
					return
				}
				this.selectBtn = !this.selectBtn
			},
			addItem(item) {
				let index = this.selectCouponArray.indexOf(item.cardId)
				if (index>-1) {
					this.selectCouponArray.splice(index, 1)
				} else {
					this.selectCouponArray.push(item.cardId)
				}
			},
			clickItem(item) {
				if (this.selectBtn) {
					return
				}
				if (this.type === 100) {
					this.selectCouponArray.push(item.cardId)
					this.showUnlockAlert = true
				} else {
					this.changeStatusItem = item
					this.showChangeStatusAlert = true
				}
			},
			unLockCard() {
				if (this.selectCouponArray.length <= 0) {
					this.toast('请至少选择一张卡券解锁')
					return
				}
				this.selectBtn = false
				this.$net.post('/cards/unlock', {'cardIds':this.selectCouponArray}).then(res=>{
					this.selectCouponArray = []
					if (res.code === 200) {
						this.clickType(200)
						this.showUnlockAlert = false
					} else {
						this.toast(res.message)
					}
				})
			},
			changeStatus(e) {
				this.$net.post('/cards/tag', {'cardId':this.changeStatusItem.cardId,'status':e}).then(res=>{
					if (res.code == 200) {
						this.refreshList()
						this.showChangeStatusAlert = false
					} else {
						this.toast(res.message)
					}
				})
			},
			addAllItem() {
				if (this.isSelectAll) {
					this.selectCouponArray = []
				} else {
					this.selectCouponArray = []
					for (let item of this.list) {
						this.selectCouponArray.push(item.cardId)
					}
				}
			},
			refreshList() {
				this.list = []
				this.page = 1
				this.loadingType = 'more'
				this.getList()
			}
		},
		watch: {
			type(newVal, oldVal) {
				if(newVal === 200) {
					this.selectCouponArray = []
				}
			}
		}
	}
</script>

<style>
	page{
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	.top {
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
		height: 508rpx;
		background: url(data:image/png;base64,[encoded data, 231848 characters]);
		background-size: 100% 440rpx;
		z-index: 999;
		.nav {
			display: flex;
			align-items: center;
			.back {
				padding: 0 34rpx;
				height: 34rpx;
				width: 86rpx;
			}
			.title {
				margin-left: 222rpx;
				font-size: 34rpx;
				color: #FFFFFF;
			}
		}
		.num {
			margin-top: 50rpx;
			display: flex;
			padding: 0 24rpx;
			justify-content: space-between;
			align-items: center;
			color: #FFFFFF;
			.left {
				font-size: 28rpx;
			}
			.right {
				font-size: 24rpx;
				height: 40rpx;
				line-height: 42rpx;
				border-radius: 20rpx;
				border: 2rpx solid#FFFFFF;
				padding: 0 20rpx;
			}
		}
		.money {
			margin-top: 42rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 60rpx;
			font-weight: bolder;
			text {
				font-size: 40rpx;
				font-weight: 400;
			}
		}
		.tab {
			height: 128rpx;
			margin-top: 14rpx;
			width: 100%;
			background-image: url(../../static/coupon-bg-w.png);
			background-size: 100% 128rpx;
			display: flex;
			.btn {
				margin-top: 40rpx;
				height: 64rpx;
				width: 128rpx;
				border-right: 2rpx solid #f0f0f0;
				margin-right: 24rpx;
				.img {
					margin-top: -4rpx;
					height: 40rpx;
					width: 40rpx;
					margin-left: 44rpx;
				}
				.text {
					font-size: 20rpx;
					color: #999;
					text-align: center;
					width: 100%;
				}
			}
			.item {
				width: 298rpx;
				margin-top: 64rpx;
				font-size: 30rpx;
				color: #252525;
				text-align: center;
			}
			.active {
				font-weight: bolder;
				color: #FF0520;
			}
			.active::after {
				margin: 20rpx auto 0;
				width: 110rpx;
				height: 4rpx;
				border-radius: 20rpx;
				content: ' ';
				display: block;
				background-color: #FF0520;
			}
		}
	}
	.list {
		margin-top: 24rpx;
		margin-bottom: 210rpx;
		padding: 24rpx 40rpx;
		.coupon-content {
			height: 300rpx;
			width: 670rpx;
			margin-bottom: 24rpx;
			display: flex;
			align-items: center;
			.select-img {
				margin-right: 20rpx;
				width: 32rpx;
				height: 32rpx;
			}
			.coupon-big {
				flex: 1;
				position: relative;
				.goods-info {
					height: 120rpx;
					display: flex;
					position: relative;
					color: #FFFFFF;
					justify-content: space-between;
					.bg-img {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 120rpx;
						z-index: -1;
					}
					.left {
						display: flex;
						.img {
							margin: 20rpx;
							height: 80rpx;
							width: 80rpx;
							border-radius: 40rpx;
							background-color: #FFFFFF;
						}
						.info {
							margin: 20rpx 0;
							// width: 320rpx;
							.name {
								font-size: 30rpx;
								line-height: 42rpx;
							}
							.spec {
								margin-top: 6rpx;
								font-size: 22rpx;
								line-height: 32rpx;
							}
						}
					}
					.num {
						margin-top: 26rpx;
						padding-right: 24rpx;						
						text-align: right;
						.no {
							font-size: 22rpx;
							line-height: 32rpx;
						}
						.time {
							margin-top: 10rpx;
							font-size: 22rpx;
							line-height: 32rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
				.coupon-info {
					height: 180rpx;
					display: flex;
					align-items: center;
					padding: 0 40rpx;
					justify-content: space-between;
					position: relative;
					.bg-img {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 180rpx;
						z-index: -1;
					}
					.left {
						font-size: 28rpx;
						color: #666666;
						line-height: 36rpx;
						.second {
							margin-top: 24rpx;
						}
					}
					.img {
						height: 80rpx;
						width: 80rpx;
						border-radius: 40rpx;
					}
				}
				.expired {
					position: absolute;
					bottom: 0;
					left: 350rpx;
					height: 118rpx;
					width: 140rpx;
				}
			}
		}
	}
	.empty {
		padding: 100rpx 136rpx 0;
		.empty-img {
			height: 280rpx;
			width: 480rpx;
		}
		.empty-text {
			font-size: 28rpx;
			color: #BFBFBF;
			margin-top: 48rpx;
			width: 480rpx;
			text-align: center;
		}
	}
	.bottom {
		// height: 120rpx;
		bottom: 0;
		background-color: #FFFFFF;
		display: flex;
		padding: 0 24rpx 0 40rpx;
		// align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		right: 0;
		.left {
			margin-top: 40rpx;
			display: flex;
			.img {
				height: 32rpx;
				width: 32rpx;
				margin-top: 4rpx;
			}
			.text {
				margin-left: 8rpx;
				font-size: 28rpx;
				color: #999999;
			}
		}
		.right {
			margin-top: 20rpx;
			height: 80rpx;
			border-radius: 40rpx;
			width: 256rpx;
			background-color: #FF0520;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 82rpx;
		}
	}
}
</style>
