<style>
	.item-box{
		width: 100%;
		height: 195px;
		border-radius: 8px;
		overflow: hidden;
		position: relative;
	}
	.itemdw{
		width: 100%;
		height: 195px;
		position: absolute;
		left: 0;
		top: 0;
		padding: 15px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.itemdw-t{
		display: flex;
		align-items: flex-start;
		font-size: 17px;
		color: #FFF;
		font-weight: bold;
		justify-content: space-between;
	}
	.itemdw-btn{
		width: 160rpx;
		height: 62rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10px;
		font-size: 14px;
		background: #FFF;
		color: #FFFFFF;
		position: relative;
	}
</style>
<template>
	<view class="cardslistStyle" :style="{ height: contentHeight }">
		<u-empty v-if="g.length == 0" text="暂无相关储蓄卡" mode="coupon"></u-empty>

		<view v-if="g.length > 0" style="
        height: calc(100vh - 50px);
        width: calc(100vw);
        overflow: hidden;
		
      ">
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
				:style="{ height: '100%' }">
				<view class="couponList">
					<view class="item" v-for="(x, i) in g" :key="i" >
						<view class="item-box" >
							<image :src='x.CouponIco' style="width: 100%;height: 100%;border-radius: 8px;"></image>
							<view class="itemdw" @click.native.stop="gomingxigengduo(x)">
								<view class='itemdw-t'>
									<view style="display: flex;">
									<checkbox-group @change="clickcheckbox($event,x,i)" v-if="x.SurplusPrice>0 && getTime(x.EndTime)==true">
										<label class="uni-list-cell uni-list-cell-pd" >
											<view>
												<checkbox :value="x.Id" :checked="x.ischecked" :color="mainColor" style="transform:scale(0.7)" />
											</view>
										</label>
									</checkbox-group>
									{{x.Name}}</view>
									<view style="display: flex;align-items: flex-end;">
										<text style="margin-bottom: 3px;">￥</text> <text style="font-size: 26px;color: #FFF;">{{x.SurplusPrice}}</text>
									</view>
								</view>
								<view class='itemdw-t' style="align-items: center;font-weight: normal;">
									<view style="font-size: 12px;">有效期:{{x.EndTime}}</view>
									<view style="display: flex;">
										<view class="itemdw-btn" @click.native.stop="gofx(x)" :style="{background:mainColor}" v-if="x.SendStatus==0 && x.SurplusPrice>0 && x.DepositPrice == x.SurplusPrice">
											赠送
											
										</view>
										<view class="itemdw-btn" @click.native.stop="gofx(x)" :style="{background:mainColor}" v-if="x.SendStatus==2 && x.SurplusPrice>0 && x.DepositPrice == x.SurplusPrice">
											赠送中
										</view>
										<view class="itemdw-btn" @click.native.stop="gohome()" :style="{color:mainColor}" v-if="x.SurplusPrice>0 && getTime(x.EndTime)==true">
											消费
										</view>
									</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
			style="width: 100%;height: 50px;background: #FFFFFF;display: flex;align-items: center;justify-content: center;position: absolute;left: 0;bottom: 0;"
			@click="goUrl">
			<Text>去合并({{mergeNumber}})</Text>
		</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" />
		<u-popup v-model="show" mode="center" length="70%" :mask-close-able='false'>
			<view style="width: 100%;height: 100%;background: #FFF;">
				<view style="width: 100%;height: 35px;text-align: center;line-height: 45px;">
					提示
				</view>
				<view style="padding: 15px;">
					是否赠送价值￥{{onShare.money}}元的储值卡
				</view>
				<view style="width: 100%;height: 1px;background: #ECECEC;"></view>
				<view style="width: 100%;height: 45px;display: flex;align-items: center;">
					<view style="width: 50%;height: 100%;text-align: center;line-height: 45px;" @click="show=false">取消</view>
					<view style="width: 50%;height: 100%;text-align: center;line-height: 45px;position: relative;" @click="show=false">
						赠送
						<button open-type="share" class="contButton" ></button>
						<view style="width: 1px;height: 100%;background: #ECECEC;position: absolute;left: -0.5px;top: 0;"></view>
					</view>
				</view>
			</view>
			
		</u-popup>
		<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 {
				show:false,
				pageTitle: "我的储蓄卡",
				showAuth: false,
				U: {},
				mainColor: "",
				contentHeight: 0,

				msg: {
					pageIndex: 1,
					pageSize: 50,
				},
				page_count: 1,
				g: [],
				loading: false,
				status: "loadmore",
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				mergeNumber:0,//合并数量
				Ids:[],
				onShare:{
					title:'',
					path:'',
					img:'',
					money:0,
				},
				uid:0,
				SmallShopId:0,
				Up:0,
				
			};
		},
		created() {
			this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
			this.mainColor = this.$uiConfig.mainColor;
			let u = uni.getStorageSync("mall_UserInfo");
			this.uid = u.UserId ? u.UserId : 0;
			if(this.uid==0){
				this.uid = uni.getStorageSync("pid")?uni.getStorageSync("pid").pid:0
			}
			this.SmallShopId = u.SmallShopId ? u.SmallShopId : 0;
			if(this.SmallShopId == 0){//如果微店id为0 去找所属微店id
				this.SmallShopId = u.UserSmallShopId? u.UserSmallShopId:0
			}
			this.Up = uni.getStorageSync("mall_UserInfo")?uni.getStorageSync("mall_UserInfo").UserPageType:0;
		},
		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.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
				this.u = {
					nickName: "未登录",
					avatarUrl: ""
				};
				this.showAuth = true;
			} else {
				this.init();
			}
		},
		methods: {

			init() {

				this.request2({
						url: '/api/AppletCoupon/GetDepositBuyPageList',
						data: this.msg
					},
					res => {

						if (res.resultCode == 1) {
							this.loading = false;
							res.data.pageData.forEach(x=>{
								x.ischecked = false
							})
							this.g = this.g.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.status = "nomore";
							}
						}
					}
				);
			},
			clickcheckbox(e,x,i){
				
				var items = this.g;
				let values = e.detail.value;
				
				if(values.length>0){
					this.mergeNumber++
					this.Ids = this.Ids.concat(values)
				}else{
					this.mergeNumber--
					this.Ids.map((item,index)=>{
						if(item==x.Id){
							this.Ids.splice(index,1);
							return
						}
					})
				}
				
			},
			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.showAuth=false;
				this.init();
			},
			//关闭登录窗口
			gbAuth() {
				uni.navigateBack()
			},
			getTime(x){
				
				let type = true
				if((new Date()).getTime() > (new Date(x)).getTime()){
					type = false
				}
				return type
			},
			goUrl() {
				if(this.mergeNumber>0){
					if(this.Ids.length<2){
						uni.showToast({
							icon:'none',
							title: "至少选择2个合并"
						})
					}else{
						let msg =this.Ids.join(',')
						this.request2({
								url: '/api/AppletCoupon/GetMergeDeposit',
								data: {Ids:msg  }
							},
							res => {
						
								if (res.resultCode == 1) {
									uni.showToast({
										icon:'none',
										title: res.message
									})
									this.msg.pageIndex=1;
									this.g=[]
									this.init();
								}
							}
						);
						
					}
				}else{
					uni.showToast({
						icon:'none',
						title: "选择合并的储值卡"
					})
				}
			},
			gomingxigengduo(x){
				uni.navigateTo({
					url: '/pages/coupon/cards/carddetailed?ID='+x.Id
				})
			},
			onShareAppMessage() {
				console.log(this.onShare.path)
				return {
					title: this.onShare.title,
					path: this.onShare.path,
					imageUrl: this.onShare.img,
				};
				
				
			},
			gofx(x){
				this.request2({
						url: '/api/AppletCoupon/GetGiveDeposit',
						data: {Id:x.Id}
					},
					res => {
						if (res.resultCode == 1) {//可以赠送
							this.onShare.title = x.Name
							this.onShare.img = x.CouponIco;
							this.onShare.money = x.SurplusPrice;
							this.onShare.path = "/pages/index/index?id=" + x.Id + "&user_id=" + this.uid+ "&SmallShopId=" + this.SmallShopId+ "&Up=" + this.Up+ "&money=" + x.SurplusPrice+'&JumpType=12'
							this.show = true
						}else{
							uni.showToast({
								icon:'none',
								title: "暂不支持赠送"
							})
						}
					}
				);
				
			},
			gohome(){//跳转到首页去消费
				uni.reLaunch({
					url:'/pages/index/index'
				})
			}
			
		},
	};
</script>
<style>
	.cardslistStyle {
		width: 100%;
		height: 100%;
		background: #f3f4f6;
		position: relative;
	}
	.cardslistStyle .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;
	}
	.cardslistStyle .couponList {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.cardslistStyle .item {
		display: flex;
		margin-top: 15px;
		align-items: flex-start;
		background: #fff;
		width: 94%;
		border-radius: 12rpx;
		overflow: hidden;
	}
	.cardslistStyle .contButton{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
	}
</style>
