<template>
	<view class="bg">
		<!-- 导航栏 -->
		<view class="nav-list">
		    <view :class="['nav-item',{active:index==navActive}]" v-for="(item,index) in navList" :key="index"
		         @click="changeNav(index)">{{ item.name }}
		    </view>
		</view>
		
		<!-- 列表 -->
		<view class="coupon-list" v-if="coupon.length>0">
		    <view :class="['coupon-item',{'hasUse':navActive!=0}]"  v-for="(item, index) in coupon" :key="index">
				<!-- 分割线上部分 -->
				<view class="item-top">
					<view class="top-left" v-if="item.free_flag == 1">
						<view class="price" v-if="item.type == 1">
							<span>{{item.discounts/100}}</span>元
						</view>
						<view class="price" v-else>
							<span>{{getPecenet(item.percent)}}</span>折
						</view>
						<view class="subtitle">
							满{{item.min_limit/100}}元可用
						</view>
					</view>
					<view class="top-left" v-else>
						<image src="https://static.ticket.sz-trip.com/kunshan/activity/coffeeCoupon/miandan.png" v-if="navActive == 0"></image>
						<image src="https://static.ticket.sz-trip.com/kunshan/activity/coffeeCoupon/miandans.png" v-else></image>
					</view>
					<view class="top-right">
						<view class="title">
							{{item.title}}
						</view>
						<view class="time">
							{{item.open_time.slice(0,10)}}-{{item.end_time.slice(0,10)}}可用
						</view>
					</view>
				</view>
				<!-- 分割线 -->
				<view class="item-circle">
				    <view class="circle left"></view>
				    <view class="line"></view>
				    <view class="circle right"></view>
				</view>
				<!-- 分割线下部分 -->
				<view class="item-bottom">
					<view class="rules" @click="changeRules(item,index)">
						<span v-if="!item.openRules">使用规则：{{item.coupon_activity.note}}</span>
						<view class="open" v-else>使用规则：{{item.coupon_activity.note}}</view>
						<!-- <span v-if="!item.openRules">使用规则：{{item.content}}</span>
						<view class="open" v-else>使用规则：{{item.content}}</view> -->
						<image v-if="!item.openRules" src="https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20230415/6a7630c176f976bb16674dde482779fb.png" mode=""></image>
						<image v-else src="https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20230415/f0073b18b3ab88cac62de60411360fc1.png" mode=""></image>
					</view>
					<view class="use" @click="use(item)" v-if="navActive==0">
						{{item.free_flag == 1 ? '去使用' : '查看详情'}}
					</view>
					<view class="use" @click="use(item)" v-else>
						{{item.free_flag == 1 ? '已失效' : '查看详情'}}
					</view>
				</view>
		    </view>
		</view>
		
		<view v-else class="noCoupon">
			<img src="https://static.ticket.sz-trip.com/yandu/images/user/couponNo.png" class="no-couPon">
			<view>暂无优惠券</view>
		</view>
			
		<!-- 兑换优惠券	 -->
		<!-- <view class="duihuan" @click="open">
			兑换优惠券 >
		</view> -->
		<!-- 弹框 -->
		<uni-popup ref="popup" type="center">
			<view class="popupBox">
				<view class="name">
					兑换优惠券
				</view>
				<input type="text" v-model="password" placeholder="请输入兑换码">
				<view class="btns">
					<view class="cancel" @click="cancel">
						取消
					</view>
					<span></span>
					<view class="sub" @click="submitPassword">
						兑换
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 免单券详情弹框 -->
		<uni-popup ref="popupMd" type="bottom" :safe-area="false">
			<view class="info-box" v-if="Object.keys(selectInfo).length > 0">
				<image src="https://static.ticket.sz-trip.com/kunshan/activity/coffeeCoupon/cha.png" class="cha" @click="$refs.popupMd.close()"></image>
				
				<canvas canvas-id="qrcodeT" mode="widthFix"
					style="position: absolute;z-index: -1;top: -100%;left: -500rpx;"></canvas>
				
				<view class="code-box flex-center" v-if="false">
					<image :src="qrcodeimg" alt=""></image>
					
					<view class="code-past flex-center" v-if="navActive == 1">
						<view class="flex-center">{{getStatusText(selectInfo.status)}}</view>
					</view>
				</view>
				
				<view style="text-align: center;font-weight: bold;font-size: 40rpx;">卡密：{{selectInfo.card_key}}</view>
				
				<view class="coupon-item">
					<view class="item-top">
						<view class="top-left">
							<image src="https://static.ticket.sz-trip.com/kunshan/activity/coffeeCoupon/miandan.png" v-if="navActive == 0"></image>
							<image src="https://static.ticket.sz-trip.com/kunshan/activity/coffeeCoupon/miandans.png" v-else></image>
						</view>
						<view class="top-right">
							<view class="title">
								{{selectInfo.title}}
							</view>
							<view class="time">
								{{selectInfo.open_time}}-{{selectInfo.end_time}}可用
							</view>
						</view>
					</view>
					<view class="item-circle">
					    <view class="circle left"></view>
					    <view class="line"></view>
					    <view class="circle right"></view>
					</view>
					<view class="item-bottom">
						<view class="rules text-overflow">使用规则：{{selectInfo.content}}</view>
					</view>
				</view>
				
				<view class="coupon-box">
					<view>
						<view class="title">券状态</view>
						<view class="subtitle" style="color: #07C49B;">{{getStatusText(selectInfo.status)}}</view>
					</view>
					<view>
						<view class="title">有效期</view>
						<view class="subtitle">{{selectInfo.open_time}}~{{selectInfo.end_time}}可用</view>
					</view>
					<view v-if="selectInfo.notice">
						<view class="title">使用须知</view>
						<view class="subtitle">{{selectInfo.notice}}</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import QRCode from '@/static/js/weapp-qrcode.js'
	export default {
		data() {
			return {
				navList: [
				     {name: '可使用', id:"wait_use"},
				     {name: '已失效', id:"past"},
				],
				navActive:'', // 当前导航
				coupon:[],
				// openRules: false,
				password:'',
				selectInfo: {},
				qrcodeimg: ''
			}
		},
		onShow() {
			this.getList(this.navList[0])
		},
		methods: {
			// 优惠券状态文字
			getStatusText(text) {
				let statusText = ''
				switch (text){
					case 'wait_use':
						statusText = '等待使用'
						break;
					case 'past':
						statusText = '已过期'
						break;
					case 'complete':
						statusText = '已使用'
						break;
					default:
						break;
				}
				return statusText;
			},
			getPecenet:function (percent) {
				if(percent>=100 || percent<=0) return "";
					percent = 100 - percent;
				//if(percent%10==0){
					percent = percent/10;
				//}
				return percent
			},
			use(item) {
				if(this.navActive == 1 && item.free_flag == 1) return;
				if(item.free_flag == 1) {
					uni.switchTab({
						url: "/pages/index/index",
					});
				}else {
					this.selectInfo = item
					this.getCodeImg()
					this.$refs.popupMd.open()
				}
			},
			// 二维码
			getCodeImg() {
				new QRCode('qrcodeT', {
					text: this.selectInfo.card_key,
					width: 120,
					height: 120,
					padding: 2,
					colorDark: 'rgb(0,0,0)',
					colorLight: 'rgb(255,255,255)',
					correctLevel: QRCode.CorrectLevel.H, // 二维码可辨识度
					callback: res => {
						this.qrcodeimg = res.path;
						console.log(this.qrcodeimg)
						this.$forceUpdate();
					}
				});
			},
			submitPassword() {
				console.log('提交的兑换码',this.password);
				let that = this
				that.password = that.password.trim()
				that.$refs.popup.close()
				if (that.password== '') {
					uni.showToast({
						title: '请输入优惠券领取卡号',
						icon: 'none'
					})
					return
				}
				that.Post({
					card_key: that.password
				}, "/api/coupon/getCoupon").then((res) => {
					console.log(res.code);
					if (res.code == 200) {
						that.coupon = []
						this.getList(this.navList[0])
						uni.showToast({
							title: '兑换成功',
							icon: 'none'
						})
					} else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
				that.password = ''
			},
			cancel() {
				this.password = ''
				this.$refs.popup.close()
			},
			open() {
				this.$refs.popup.open('center')
			},
			// 打开使用规则
			changeRules(item,index){
				let list = this.coupon
				list.forEach((Item, Index) => {
					if (Index === index) {
						Item.openRules = !Item.openRules
					} else {
						Item.openRules = false
					}
				})
				this.coupon = list
				this.$forceUpdate()
			},
			// 处理价格
			showNoPriceNew(price) {
			    if (price && price > 0) {
			        return (price / 100)
			    } else {
			        return '0'
			    }
			},
			// 切换导航
			changeNav(index){
			   this.navActive=index
			   this.getList(this.navList[this.navActive])
			},
			// 获取优惠券列表
			getList(item) {
			    let that = this
				that.Post({
					status: item.id,
					offset: 0,
					limit: 100,
				}, "/api/coupon/getUserCoupon").then((res) => {
					if (res) {
						console.log(res.data);
						that.coupon = res.data
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.bg {
	background: #F7F7F7;
	min-height: 100vh;
}
		
/*导航*/
.nav-list {
	width: 100%;
	height: 107rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: fixed;
	background: #FFFFFF;
}

.nav-list .nav-item {
    text-align: center;
    line-height: 106rpx;
    box-sizing: border-box;
    font-size: 31rpx;
    font-weight: bold;
    padding: .23rpx 0;
    color: #333333;
}

.nav-list .nav-item.active {
	color: #71B580;
    border-bottom: 7rpx solid #71B580;
}

.coupon-list{
	/* width: 100%; */
	position: absolute;
	top: 115rpx;
    padding: 0 26.67rpx;
	background: #F7F7F7;
	min-height: 100vh;
	padding-bottom: 30rpx;
}

.coupon-item {
    background: #ffffff;
	margin-top: 20rpx;
    border-radius: 13rpx;
}
	
.coupon-item .item-top {
	display: flex;
	padding: 30rpx 16rpx 24rpx 36rpx;
	align-items: center;
}

.coupon-item .item-top .price {
	font-size: 25rpx;
	font-weight: bold;
	color: #FC5209;
	display: flex;
	align-items: baseline;
	justify-content: center;
}

.coupon-item .item-top .price span {
	font-size: 60rpx;
	margin-right: 6.67rpx;
}

.top-left .subtitle {
	width: 100%;
	font-size: 24rpx;
	color: #FC5209;
	padding-left: 6rpx;
	overflow: hidden;
	white-space: nowrap;
}

.top-left .price-before::before{
	content: '￥';
	font-size: 32rpx;
}

.top-left image {
	width: 133.33rpx;
	height: 104rpx;
}

.top-right {
	margin-left: 46.67rpx;
	font-size: 25rpx;
	font-weight: 500;
	color: #111;
}

.top-right .title {
	margin-bottom: 26rpx;
	font-size: 31rpx;
	font-weight: bold;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.coupon-list .coupon-item .item-circle {
    /* position: relative; */
	line-height: 1rpx;
    height: 1rpx;
    width: 692rpx;
}

.coupon-list .coupon-item .item-circle .line {
    border-bottom: 1px dashed #ccc;
    /* position: absolute; */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* width: calc(100% - 1rem); */
    height: .1rpx;
    margin: auto;
    z-index: 9;
}

.coupon-list .coupon-item .item-circle .circle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    background: #ccc;
    width: .46rpx;
    height: .46rpx;
    z-index: 10;
}
.coupon-list .coupon-item .item-circle .circle.left{
    left:-.23rpx;
}
.coupon-list .coupon-item .item-circle .circle.right{
    right: -.23rpx;
}

.item-bottom {
	padding: 16rpx 20rpx;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.item-bottom .rules {
	font-size: 24rpx;
	font-weight: 500;
	color: #999;
	display: flex;
	line-height: 47rpx;
}

.item-bottom .rules span {
	width: 425rpx;
	overflow: hidden;  //超出隐藏
	white-space: nowrap; //不折行
	text-overflow: ellipsis;
}

.item-bottom .rules image {
	width: 20rpx;
	height: 20rpx;
	margin-left: 20rpx;
	margin-top: 15rpx;
}

.item-bottom .use {
	width: 133rpx;
	height: 47rpx;
	border: 1px solid #FC5209;
	border-radius: 23rpx;
	text-align: center;
	font-size: 25rpx;
	font-weight: 500;
	color: #fc5209;
	line-height: 47rpx;
}

.open {
	width: 425rpx;
	min-height: 30rpx;
	flex-wrap: wrap;
}

.duihuan {
	width: 293rpx;
	height: 67rpx;
	background: #fff;
	box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(153,153,153,0.18);
	border-radius: 33rpx;
	font-size: 31rpx;
	font-weight: 500;
	color: #07C49B;
	text-align: center;
	line-height: 67rpx;
	margin-left: 228.67rpx;
	position: fixed;
	bottom: 52.67rpx;
}
.top-left {
	width: 140rpx;
}
.top-left .price {
  width: 100%;
  /* overflow: hidden; */
  white-space: nowrap;
}

.popupBox {
	background: #fff;
	border-radius: 20rpx;
	padding: 40.67rpx 39.33rpx 35.33rpx 40rpx;
}

.popupBox .name {
	font-size: 35rpx;
	color: #111;
	font-weight: bold;
	margin-bottom: 57.33rpx;
	text-align: center;
}

.popupBox input {
	width: 454rpx;
	height: 81rpx;
	border: 1px solid #D8D8D8;
	border-radius: 7rpx;
	font-size: 31rpx;font-weight: 500;
	color: #999999;
	line-height: 81rpx;
	margin: 0 39.33rpx 72.67rpx 40rpx;
	text-align: center;
}

.popupBox .btns {
	display: flex;
	align-items: center;
	font-size: 35rpx;
	justify-content: space-around;
}

.popupBox .btns .cancel {
	color: #111;
}

.popupBox .btns span {
	width: 1rpx;
	height: 53rpx;
	background: #D8D8D8;
}

.popupBox .btns .sub {
	color: #07C49B;
}

.hasUse {
	color: #999 !important;
}
.hasUse .item-top .top-left .price{
	color: #999 !important;
}
.hasUse .item-top .top-left .subtitle{
	color: #999 !important;
}
.hasUse .item-top .top-right .title {
	color: #999 !important;
}
.hasUse .item-top .top-right .time {
	color: #999 !important;
}
.hasUse .item-bottom .use {
	border: 1px solid #B3B3B3 !important;
	color: #999999 !important;
}

.noCoupon{
	padding-top: 524rpx;
	text-align: center;
	font-size: 31rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	
	.no-couPon{
		width: 173rpx;
		height: 173rpx;
		margin-bottom: 15rpx;
	}
}

.info-box {
	max-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	background: #F7F7F7;
	border-radius: 27rpx 27rpx 0rpx 0rpx;
	padding: 90rpx 26rpx 20rpx;
	box-sizing: border-box;
	position: relative;
	
	.cha {
		width: 31.33rpx;
		height: 31.33rpx;
		position: absolute;
		top: 32rpx;
		right: 37rpx;
	}
	
	.code-box {
		width: 275rpx;
		height: 269rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 33rpx 0rpx rgba(102,102,102,0.26);
		border-radius: 20rpx;
		overflow: hidden;
		margin: 0 auto;
		position: relative;
		
		image {
			width: 243rpx;
			height: 243rpx;
		}
		
		.code-past {
			width: 275rpx;
			height: 269rpx;
			position: absolute;
			top: 0;
			left: 0;
			font-weight: bold;
			font-size: 25rpx;
			color: #000000;
			background-color: rgba(0, 0, 0, .6);
			
			view {
				width: 143rpx;
				height: 143rpx;
				background: #FFFFFF;
				border-radius: 71rpx;
			}
		}
	}
	
	.coupon-box {
		width: 697rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 13rpx;
		padding: 34rpx 18rpx;
		box-sizing: border-box;
		margin: 28rpx auto 0;
		
		&>view {
			margin-bottom: 25rpx;
			display: flex;
		}
		
		.title {
			font-weight: 500;
			font-size: 27rpx;
			color: #111111;
			min-width: 130rpx;
			white-space: nowrap;
		}
		
		.subtitle {
			font-weight: 500;
			font-size: 25rpx;
			color: #444444;
		}
	}
}
</style>
