<template>
	<view class="couponStyle" :style="{ height: contentHeight }" @click="lineShow=false">
		<view class="couponHeaderBox">
			<view class="couponHeader">
				<view class="couponHeadLeft">
					<view class="couponHeadLText" @click.stop="lineShow=!lineShow">
						<text class="couponHeadLTextL">{{ lineName }}</text>
						<view>
							<u-icon :name="!lineShow?'arrow-down':'arrow-up'" size="24"></u-icon>
						</view>
					</view>
				</view>
				<view class="couponHeadRight">
					<text v-for="(item,index) in couponStateList" :key="index" :class="[msg.CouponType==item.id?'active':'']"
					 @click.stop="changeState()">{{ item.name }}</text>
				</view>
			</view>
			<view class="couponLine" v-if="lineShow">
				<view class="couponLineT" v-for="(item,index) in lineList">
					<view class="couponLineAllName" :class="[msg.lineId==item.id?'active':'']" @click.stop="msg.lineId=item.id,lineName=item.text">
						<text>{{ item.text }}</text>
					</view>
				</view>
			</view>
		</view>

		<u-empty v-if="couponDataList.length == 0 && !loading" text="暂无相关优惠券" mode="coupon"></u-empty>

		<view v-if="couponDataList.length > 0" style="  height: calc(100vh - 50px);  width: calc(100vw); overflow: hidden;padding-bottom: 50px;">
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' }">
				<view class="couponList">
					<view class="couponListBox" :class="{
						'active0': x.couponsType,'active1': '',
						'active2': '','active3': '',
						'active4': '','active5': '',
						'active6': '','active7': '',
						'active8': '',
					}"
					 v-for="(x, i) in couponDataList" :key="i">
						<view class="item">
							<view :style="{'background-image':`url(${x.backGroubd}) `}" class="couponItemLeft">
								<view class="miane">
									<view class="money">
										<text class="small" style="font-family: microsoft yahei ui light;margin-right: 5rpx;" v-if="x.couponsType == 1">￥</text>
										<Text style="font-size: 40rpx;font-family: nav-font;">{{ Number(x.denomination) }}
										</Text>
										<Text class="small" style="font-family: microsoft yahei ui light;margin-left: 5rpx;">{{ x.couponsType != 1? "折" : "" }}</Text>
									</view>
									<view class="tiaojian">抵扣券</view>
								</view>
							</view>
							<view class="detail">
								<view class="coupond">
									<view class="name" style="font-family:'microsoft yahei ui light';">
										<view class="nameText">{{ x.couponName }}</view>
										<view class="nameType">{{x.couponsUseScopeName}}</view>
									</view>
									<view class="coupondLineTb">
										<view class="coupondLineTbt">
											<template v-if="x.lineNameStr&&x.lineName!=''">适用线路:{{x.lineNameStr}}</template>
											<template v-if="x.lineteamNameStr&&x.lineteamNameStr!=''">适用系列:{{x.lineteamNameStr}}</template>
											<template v-if="x.remark&&x.remark!=''">{{x.remark}}</template>
										</view>
										<view class="coupondLineGo" @click.stop="godetails(x)">去使用</view>
									</view>
									<view class="date">{{x.effectDate}}至{{ x.expirationDate }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20" bg-color="#f3f4f6" />
			</scroll-view>
		</view>

		<!-- 加载中 -->
		<view class="loading" v-if="loading">
			<u-loading mode="flower" size="48">></u-loading>
			<Text style="color: #fff; margin-top: 10rpx">加载中...</Text>
		</view>
		<!-- 取消提示 -->
		<u-toast ref="uToast" />
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
	</view>
</template>
<script>
	import auth from "../../../components/auth/index.vue";
	export default {
		components: {
			auth,
		},
		data() {
			return {
				pageTitle: "我的优惠券",
				showAuth: false,
				U: {},
				couponStateList: [{
						name: "全部",
						id: 0,
					},
					{
						name: "折扣券",
						id: 1,
					},
					{
						name: "抵扣券",
						id: 2,
					},
					{
						name: "已过期",
						id: 3,
					}
				],
				mainColor: "",
				contentHeight: 0,
				currentIndex: 0,
				msg: {
					"pageIndex": 1,
					"pageSize": 8,
					"userId": 0, //CustomerAccountId
					"lineId": 0, //线路
					"lineteamId": 0, //系列ID
					"CustomerType": 0, //0-同行，1-直客
					"CouponStatus": 1, //优惠券状态  1未使用  2已使用  3已过期
					"CouponsUseScope": 0, //优惠券使用范围 有枚举
					"FromPlatform": "2", //来源平台 1app 2小程序
					"CouponType": 0, //优惠券类型 1：抵用券，2：折扣卷
				},
				page_count: 1,
				couponDataList: [],
				loading: false,
				status: "loadmore",
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				showBar: true,
				lineList: [{
						text: '通用',
						id: 0
					},
					{
						text: '跟团游',
						id: 1
					},
					{
						text: '自由行',
						id: 2
					},
					{
						text: '景点',
						id: 3
					},
					{
						text: '当地游',
						id: 4
					},
					{
						text: '定制游',
						id: 5
					},
					{
						text: '美食',
						id: 6
					},
					{
						text: '门票',
						id: 7
					},
					{
						text: '签证',
						id: 8
					},
				],
				lineName: '通用',
				lineShow: false,
				lineImgs: [
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726322574781584.png', //跟团游
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726322566159036.png', //自由行
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726322566207695.png', //门票
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726323205591893.png', //当地游
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726326034522587.png', //定制游
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726322567374491.png', //签证
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726322567423518.png', //机票
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726322570001132.png', //美食1
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638726322569972025.png', //美食2
				],
				b2bUserInfo: {},
			};
		},
		created() {
			this.b2bUserInfo = uni.getStorageSync('b2b_user');
			if (this.b2bUserInfo && this.b2bUserInfo.accountId) {
				this.msg.userId = this.b2bUserInfo.accountId;
			}
			this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
			this.mainColor = this.$uiConfig.mainColor;
			// #ifdef MP-ALIPAY
			this.showBar = false;
			// #endif
		},
		mounted() {
			let currentPages = getCurrentPages();
			let u = "/" + currentPages[currentPages.length - 1].route;
			let pages = wx.getStorageSync("basedata") ?
				wx.getStorageSync("basedata").bar_title : [];
			pages.forEach((x) => {
				if (x.value == u) {
					this.pageTitle = x.new_name ? x.new_name : x.name;
				}
			});
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
		},
		onLoad: function(option) {
			this.loading = true
			this.init()
		},
		methods: {
			//状态切换
			changeState(item) {
				if (item.id <= 2) {
					this.msg.CouponType = item.id,
						this.msg.CouponStatus = 1;
				} else if (item.id == 3) {
					this.msg.CouponType = 0;
					this.msg.CouponStatus = 3;
				}

				this.ResetQuery();
			},
			//重新查询
			ResetQuery() {
				this.couponDataList = []
				this.msg.pageIndex = 1
				this.init()
			},
			change(index) {
				this.currentIndex = index;
				this.msg.CouponStatus = index + 1;
				this.msg.pageIndex = 1;
				this.couponDataList = [];
				this.loading = true;
				this.init();
			},
			init() {
				this.loading = true;
				this.apipost("coupon_post_GetUserCanUseCouponPageList", this.msg, (res) => {
					this.loading = false;
					if (res.resultCode == 1) {
						let arrList = function(list) {
							list.forEach(x => {
								x.backGroubd = ''
							})
						}
						arrList(res.data.pageData)
						this.couponDataList = res.data.pageData;
						this.couponDataList.forEach(x => {
							x.backGroubd = this.lineImgs[0]
						})
						this.page_count = res.data.pageCount;
						console.log("this.couponDataList", this.couponDataList)
					}
				}, (failed) => {
					uni.showToast({
						title: failed.message,
						icon: "none",
					});
					this.loading = false;
				}, (error) => {
					this.loading = false;
				})
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.init();
				} else {
					this.status = "nomore";
				}
			},
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				this.init();
			},
			//关闭登录窗口
			gbAuth() {
				uni.navigateBack();
			},
			//优惠劵详情
			godetails(item) {
				if (this.msg.CouponStatus == 1) {
					uni.navigateTo({
						url: "/pages/coupon/details/details?item=" +
							encodeURIComponent(JSON.stringify(item)) +
							"&type=1",
					});
				}
			}
		},
	};
</script>
<style>
	.couponStyle {
		width: 100%;
		height: 100%;
		background: #f3f4f6;
		position: relative;
	}

	.couponStyle .loading {
		width: 180rpx;
		height: 180rpx;
		background: #000000;
		opacity: 0.7;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 50%;
		top: 30%;
		margin-left: -100rpx;
		z-index: 999;
	}

	.couponStyle .couponList {
		width: 100%;
		padding: 0 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.couponStyle .couponitem {
		display: flex;
		align-items: center;
		height: 180rpx;
		background: #f2ebe4;
		margin-top: 20rpx;
	}

	.couponStyle .couponitem .couponitem_l {
		width: 180rpx;
		height: 180rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		padding: 20rpx;
		color: #fff;
	}

	.couponStyle .couponitem .couponitem_r {
		width: calc(100vw - 220rpx);
		height: 180rpx;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		justify-content: space-around;
	}

	.couponStyle .item {
		display: flex;
		align-items: flex-start;
		background: #fff;
		overflow: hidden;
	}

	.couponStyle .item .ticket {
		position: relative;
		width: 125px;
		height: 100px;
		display: flex;
		align-items: center;
		color: #fff;
	}

	.couponStyle .item .ticket2 {
		position: relative;
		background: #c3c3c3;
		width: 125px;
		height: 100px;
		display: flex;
		align-items: center;
		color: #fff;
	}

	.couponStyle .item .miane .money {
		font-family: "oswald";
		font-weight: bold;
		size: 64px;
		text-align: center;
	}

	.couponStyle .item .miane .money .small {
		font-size: 12px;
		font-weight: 100;
	}

	.couponStyle .item .miane .tiaojian {
		font-size: 24rpx;
		text-align: center;
		margin-top: 2px;
	}

	.couponStyle .item .detail {
		width: 100%;
		background: #fff;
		padding: 0 10rpx 0 31rpx;
		display: flex;
	}

	.couponStyle .item .detail .coupond {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.couponStyle .item .detail .coupond .name {
		font-size: 28rpx;
		font-weight: 600;
		color: #000;
		display: flex;
		flex-wrap: nowrap;
	}

	.couponStyle .item .detail .coupond .date {
		font-family: "23";
		margin-top: 5px;
		font-size: 12px;
		color: rgba(194, 194, 194, 1);
	}

	.couponStyle .item .detail .coupond .rule {
		font-size: 12px;
		color: #777;
		margin-top: 5 px;
	}

	.couponStyle .item .detail .chosen {
		width: 20px;
	}

	.couponHeaderBox {
		background: #fff;
		position: relative;
	}


	.couponHeader {
		box-shadow: 0rpx 2rpx 18rpx 0rpx #B1B1B1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
	}

	.couponHeadLeft {
		flex-shrink: 0;
	}

	.couponHeadLText {
		display: flex;
		align-items: center;
		flex: 1;
		padding-left: 43rpx;
		border-right: 1rpx solid rgba(207, 207, 207, .4);
	}

	.couponHeadLTextL {
		margin-right: 42rpx;
		font-size: 28rpx;
	}

	.couponHeadLText view {
		flex-shrink: 0;
		margin-right: 25rpx;
	}

	.couponHeadLAuto {
		flex-shrink: 0;
		width: 2px;
		background: rgba(207, 207, 207, 1);
	}

	.couponLine {
		width: 100%;
		position: absolute;
		top: 75rpx;
		flex: 1;
		z-index: 2;
		background: #fff;
	}

	.couponHeadRight {
		display: flex;
		justify-content: space-between;
		flex: 1;
	}

	.couponHeadRight text {
		display: inline-block;
		padding: 0 31rpx;
		font-size: 28rpx;
		white-space: nowrap;
	}

	.couponHeadRight text.active {
		color: rgba(238, 68, 84, 1);
	}

	.couponLine {
		display: flex;
		flex-wrap: wrap;
		padding: 40rpx 17rpx 10rpx 17rpx;
		border-top: 1rpx solid rgba(207, 207, 207, .4);
	}

	.couponLineT {
		padding: 0 19.8rpx;
	}

	.couponLineAllName {
		width: 142rpx;
		padding: 18rpx 0;
		border-radius: 10rpx;
		background: #EEEEEE;
		margin-bottom: 30rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.couponLineAllName.active {
		background: rgba(238, 68, 84, .2);
		color: #EE4454;
	}

	.couponListBox {
		margin-top: 30rpx;
		width: 100%;
		padding: 24rpx 28rpx;
		background: #fff;
		border-radius: 20rpx;
	}

	.couponItemLeft {
		width: 146rpx;
		height: 143rpx;
		padding: 27rpx 36rpx;
		background: no-repeat;
		background-size: 100% 100%;
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.couponStyle .item .detail .coupond .nameText {
		width: calc(100%-48rpx);
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.couponStyle .item .detail .coupond .nameType {
		flex-shrink: 0;
		margin-left: 14rpx;
		border-radius: 4rpx;
		padding: 5rpx 12rpx;
		font-size: 24rpx;
		font-weight: 100;
	}

	.couponListBox.active0 .nameType {
		color: rgba(29, 152, 144, 1);
		background: rgba(97, 220, 212, 1);
	}

	.couponListBox.active1 .nameType {
		color: rgba(212, 84, 42, 1);
		background: rgba(253, 127, 86, 1);
	}

	.couponListBox.active2 .nameType {
		color: rgba(60, 103, 160, 1);
		background: rgba(106, 168, 249, 1);
	}

	.couponListBox.active3 .nameType {
		color: rgba(204, 60, 110, 1);
		background: rgba(243, 108, 155, 1);
	}

	.couponListBox.active4 .nameType {
		color: rgba(40, 132, 163, 1);
		background: rgba(24, 184, 237, 1);
	}

	.couponListBox.active5 .nameType {
		color: rgba(184, 163, 19, 1);
		background: rgba(233, 235, 51, 1);
	}

	.couponListBox.active6 .nameType {
		color: rgba(186, 110, 1, 1);
		background: rgba(255, 150, 0, 1);
	}

	.couponListBox.active7 .nameType {
		color: rgba(55, 143, 71, 1);
		background: rgba(31, 193, 62, 1);
	}

	.couponListBox.active8 .nameType {
		color: #c6c6c6;
		background: #e1e1e1;
	}

	.coupondLineTb {
		position: relative;
	}

	.coupondLineTbt {
		height: 56rpx;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: 22rpx;
		font-weight: 400;
		margin-top: 14rpx;
		line-height: 28rpx;
		color: #666;
	}

	.coupondLineGo {
		position: absolute;
		right: 0;
		top: 56rpx;
		width: 114rpx;
		height: 44rpx;
		border-radius: 12rpx;
		color: #fff;
		font-size: 22rpx;
		text-align: center;
		line-height: 44rpx;
	}

	.couponListBox.active0 .coupondLineGo {
		background: linear-gradient(133deg, #26C6A5, #61DCD4);
	}

	.couponListBox.active1 .coupondLineGo {
		background: linear-gradient(133deg, #FD7F56, #FFC291);
	}

	.couponListBox.active2 .coupondLineGo {
		background: linear-gradient(133deg, #3C67A0, #88ADDD);
	}

	.couponListBox.active3 .coupondLineGo {
		background: linear-gradient(133deg, #F36C9B, #FEA7C6);
	}

	.couponListBox.active4 .coupondLineGo {
		background: linear-gradient(133deg, #18B8ED, #89D6EF);
	}

	.couponListBox.active5 .coupondLineGo {
		background: linear-gradient(133deg, #EBD333, #EBF38C);
	}

	.couponListBox.active6 .coupondLineGo {
		background: linear-gradient(133deg, #FF9600, #FFC600);
	}

	.couponListBox.active7 .coupondLineGo {
		background: linear-gradient(133deg, #1FC13E, #5AE19A);
	}

	.couponListBox.active8 .coupondLineGo {
		background: linear-gradient(133deg, #c6c6c6, #e1e1e1);
	}
</style>
