<template>
	<view :class="[AppTheme]" class="all_box">

		<!-- #ifdef APP-PLUS -->
		<u-sticky offsetTop="0" style="z-index: 10;">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<u-sticky offsetTop="-44" style="z-index: 10;">
				<!-- #endif -->
				<view class="uTabs_list">
					<u-tabs ref="uTabs" :list="ubseclist" :activeStyle="{
			        color: primary,
			        transform: 'scale(1.05)'
			    }" :inactiveStyle="{
			        color: '#606266',
			        transform: 'scale(1)'
			    }" lineWidth="40"  :lineColor="primary" :current="swiperCurrent" @click="casesort">
					</u-tabs>
				</view>
			</u-sticky>

			<swiper class="swiper_item" @change='swiperchange' :current="swiperCurrent">
				<swiper-item v-for="(itite, titleindex) in ubseclist" :key="titleindex">
					<scroll-view scroll-y="true" class="coupon_list" v-if="couponlist.length > 0">
						<view class="coupon_item" v-for="(item, index) in couponlist" :key="index"
							:class="item.status === 2 ? 'ifgeted' : ''">
							<view class="coupon_index" >
								<view class="coupon_indexs">
									<view class="coupon_index_1">
										<view class="coupon_index_2">
											<view class="coupon_index_3">{{item.typetitle}}</view>
											<view class="coupon_index_4">
												<view class="coupon_index_4_1">￥{{ item.money }}</view>
												<view class="coupon_index_5">满{{ item.usemoney }}元可用</view>
											</view>
										</view>
										<view>
											<u-line color="gray" direction="col" length="100%" dashed></u-line>
										</view>
										
										<view class="coupon_index_6">
											<view class="coupon_index_7">已抢{{item.number}}张</view>
											<view class="coupon_index_8">
												<view class="coupon_index_8_1">优惠券</view>
												<view class="coupon_index_9">领取{{ item.day }}日内有效</view>
											</view>

										</view>
									</view>
							   <u-line color="#939393"  margin="25rpx 10rpx 0 0"  ></u-line> 
							 	<view class="coupon_index_10"  >
										<image :src="item.farm_logo"></image>
										<view class="coupon_index_10_1">{{item.farm_name}}</view>
									</view>
								</view>

                                
								<view  class="coupon_index_11  bg-primary " v-if="item.status === 0"   @click="getcoupon(item.id)">
									<text class="coupon_index_11_1"> 立   即   领   取</text>

									</view>
									<view v-else     class="coupon_index_11 bg-primary "  >
										<text class="coupon_index_11_1"> 已   领   取</text>
										</view>
										
										<!-- <view class="coupon_item_jin"  ></view> -->
							</view> 

							<!-- 	<view class="coupon_item_top">
								<view class="coupon_item_top_p1">
									<view class="coupon_item_top_te">
										<text class="coupon_item_top_p1_text">￥</text>
										{{ item.money }}
									</view>
									<view class="coupon_item_top_od">
										<view class="coupon_item_top_p2_introduce" v-if="item.type === 2">商城优惠卷</view>
										<view class="coupon_item_top_p2_introduce" v-if="item.type === 3">认养优惠卷</view>
										<view class="coupon_item_top_p2_introduce" v-if="item.type === 4">农场优惠卷</view>
										<view class="coupon_item_top_p2_introduce">满{{ item.usemoney }}可用</view>
									</view>
								</view>
								<view class="coupon_item_top_p2 text-primary" @click="getcoupon(item.id)"
									v-if="item.status === 0">立即领取</view>
								<view class="coupon_item_jin"></view>
							</view>
								<view class="coupon_item_bottom">
								<view class="expiration_reminder">到期时间:领取后{{ item.day }}天到期</view>
								<view class="expiration_reminder1" v-if="item.type === 2">可用范围:商城可用</view>
								<view class="expiration_reminder1" v-if="item.type === 3">可用范围:认养商城可用</view>
								<view class="expiration_reminder1" v-if="item.type === 4">可用范围:农场商城可用</view>
							</view> -->
						</view>
						
					</scroll-view>
					<u-empty marginTop="100" v-if="couponlist.length === 0" text="暂无优惠卷" mode="list"></u-empty>
					
				</swiper-item>
				
			</swiper>
			<view v-if="couponlist.length>0">
				<u-loadmore :status="dloading" :icon-type="iconType" :load-text="loadText" margin-bottom="0"
					margin-top="20" />
			</view>
	</view>
</template>
<script>
	import mallApi from '@/api/mall/index.js'
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				//sw块index
				swiperCurrent: 0,
				ubseclist: [
					
					{
						iconname: 'shopping-cart-fill',	
						name: '全部'
						},
					{
						iconname: 'shopping-cart-fill',
						name: '商城'
					},
					{
						iconname: 'tags-fill',
						name: '认养'
					},
					{
						iconname: 'coupon-fill',
						name: '土地'
					}
				],
				couponlist: [],
				site:'',
				dloading: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				pageindex: 1, //当前页
				totalpage: 0, //总页数
				total: 0, //总条数
			}
		},
		onLoad() {
			let that = this;
			 
			this.getnumlist(this.swiperCurrent)
		},
		onReachBottom() {
			
			 this.pageindex++
			 this.getnumlist()
			 
		},
		//下拉刷新
		onPullDownRefresh() {
			
			 this.pageindex = 1
			 this.totalpage = 0
			  
			 this.getnumlist(
			 	setTimeout(function() {
			 		uni.stopPullDownRefresh()
			 	}, 1000)
			 )
		 
		},
		methods: {
			swiperchange(e) {
				 
				this.swiperCurrent = e.detail.current
				this.getnumlist(this.swiperCurrent)
			},
			// 切换排序视图
			casesort(e) {
				 
				let that = this
				if (that.swiperCurrent === e.index) {
					return
				} else {
					that.swiperCurrent = e.index
					// that.getnumlist(that.swiperCurrent)
				}
			},
			//获取数据
			getnumlist() {
				let that = this
				 
				if (this.swiperCurrent !== null || this.swiperCurrent !== undefined) {
				 
						 let params = {
						 	type: this.swiperCurrent + 1
						 } 
					 
					 that.dloading = 'loading'
					 if (that.pageindex == 1 || that.pageindex <= that.totalpage) {
					 	uni.showLoading({
					 		title: '加载中……'
					 	})
					mallApi.cardlist(params).then(res => {
						if (res.status === 200) {
							 if (that.pageindex == 1) {
							 	that.couponlist = []
							 }
							 // res.data.data.data.forEach((item, index) => {
							 // 	that.couponlist.push(item)
							 // }) 
							that.couponlist = that.couponlist.concat(res.data.data.data)
							 that.totalpage = res.data.data.last_page
							that.site=res.data.site
							if (that.pageindex >= that.totalpage) {
								that.dloading = 'nomore'
							}
							uni.hideLoading()
						}  
					})
					} else {
					
						that.dloading = 'nomore'
						uni.hideLoading()
					}
				}
			},
			//领取优惠卷
			getcoupon(itemid) {
				 
				let that = this
				let params = {
					id: itemid
				}
				new Promise((resolve, reject) => {
						mallApi.getcoupon(params).then(res => {
							if (res.status === 200) {
								that.$api.msg(res.msg)
								resolve('success')
							} else {
								that.$api.msg(res.msg)
								reject('领取失败')
							}
						})
					})
					.then(data => {
						that.getnumlist(that.swiperCurrent)
					})
					.catch(err => {
						that.$api.msg(err)
					})
			}
		}
	}
</script>
<style lang="scss">
	.all_box {
		background-color: #F5F5F7;
		// background: rgb(248, 248, 248);
       
		.uTabs_list {
			background-color: #fff;
			box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
			width: 100%;
			z-index: 99;

			.uTabs_item {
				padding: 20rpx 0;
				flex: auto;
				text-align: center;
			}
		}

		.swiper_item {
			height: calc(100vh - 44px);

			.coupon_list {
				height: 100%;

				.coupon_item {
					margin: 20rpx;
					width:95%;
					// left: 1.5%;

					z-index: 10;

					.coupon_index {
						display: flex;
						justify-content: space-between;
						background-color: #ffffff;
						border-radius: 20rpx;
                        
						.coupon_indexs {
							   display: flex;
							   flex-direction:column;
							   width: 80%;
							   
							   
							.coupon_index_1 {
								display: flex;
								justify-content: flex-start;

								.coupon_index_2 {
									width: 13vh;
                                     
									.coupon_index_3 {
										background-color: lightcoral;
										width: 6vh;
										text-align: center;
										border-top-left-radius: 20rpx;
										border-bottom-right-radius: 25rpx;
										line-height: 40rpx;
										color: #fff;
										font-size: 25rpx;
									}

									.coupon_index_4 {

										align-items: center;
										text-align: center;

										.coupon_index_4_1 {
											font-size: 50rpx;
											color: red;
											font-weight: 600;
											padding: 10rpx 0;
										}

										.coupon_index_5 {
											font-size: 30rpx;
											color: indianred;
										}
									}

								}

								.coupon_index_6 {
									width: 25vh;
                                   
									.coupon_index_7 {
										background-color: indianred;
										line-height: 40rpx;
										width: 10vh;
										text-align: center;
										font-size: 24rpx;
										color: #fff;
										border-radius: 40rpx;
										float: right;
										margin-top: 20rpx;
										 
										 margin-bottom: 30rpx;
									}

									.coupon_index_8 {
										   margin-left: 1vh;

										.coupon_index_8_1 {

											font-size: 35rpx;
											font-weight: 600;
											padding: 90rpx 0 30rpx 0;

										}

										.coupon_index_9 {
											font-size: 26rpx;
											color:  #939393;
										}
									}

								}
							}
						}
						.coupon_index_10{
							display: flex;
							justify-content: flex-start;
							text-align: center;
							align-items: center;
							padding: 10rpx;
							image{
								width: 50rpx;
								height: 50rpx;
								border-radius: 50%;
							}
							.coupon_index_10_1{
								padding: 0 10rpx;
								color: #939393;
								font-size: 26rpx;
							}
						}
						.coupon_item_jin {
							background-image: url('@/static/bor_radius.png');
							position: absolute;
							left:77%;
							 
							width: 100%;
							height:17.5vh;
							background-size: 30rpx 25rpx;
							background-repeat: repeat-y;
						}
                        .coupon_index_11{
								 position: relative;
								 // background-color: limegreen;
								 border-top-right-radius: 20rpx;
								 border-bottom-right-radius: 20rpx;
								 display: flex;
								 width: 5vh;
								 min-height: 50px;
								 padding: 6px 0 6px 15px;
								 color: #fff; 
								 align-items: center; 
								  // text-align: center;
							text{
								 writing-mode : tb-rl;
								  color: #fff;
								  text-align: center;
								  // margin-left: 2vh; 
							}
						}
						.coupon_index_11::before {
						    content: ' ';
						    width: 0;
						    height: 100%;
						    width: 0;
						    position: absolute;
						    border-right: 6px dotted white;
						    top: 0;
						    left: -3px;    
						}
						
						// .coupon_index_11::after {
						//     content: ' ';
						//     height: 100%;
						//     position: absolute;
						//     border-left: 6px dotted white;
						//     top: 0;
						//     right: -3px;    
						
						// }    

					}







					.coupon_item_top {
						position: relative;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 30rpx 35rpx;
						background-image: linear-gradient(to left, #56ab2f, #6edda5);
						border-radius: 25rpx 25rpx 0 0;

						.coupon_item_top_p1 {
							display: flex;
							justify-content: flex-start;
							align-items: center;

							.coupon_item_top_te {
								color: #ffffff;
								font-size: 55rpx;

								.coupon_item_top_p1_text {
									font-size: 24rpx;
								}
							}

							.coupon_item_top_od {
								color: #ffffff;
								margin-left: 20rpx;

								.coupon_item_top_p2_introduce {
									font-size: 30rpx;
									line-height: 50rpx;
								}
							}
						}

						.coupon_item_top_p2 {
							font-size: 28rpx;
							padding: 15rpx 25rpx;
							background-color: #ffffff;
							border-radius: 28rpx;
						}

						.coupon_item_jin {
							 background-image: url('@/static/bor_radius.png');
							position: absolute;
							left: 0;
							bottom: -20rpx;
							width: 100%;
							height: 32.5rpx;
							background-size: 45rpx 32.5rpx;
							background-repeat: repeat-x;
						}
					}

					.coupon_item_bottom {
						width: 100%;
						background-color: #ffffff;
						border-radius: 0 0 25rpx 25rpx;
						padding: 25rpx 0;

						.expiration_reminder {
							color: #2b2b2b;
							font-size: 26rpx;
							padding: 15rpx 0;
							text-indent: 1em;
						}

						.expiration_reminder1 {
							color: #939393;
							font-size: 24rpx;
							padding: 15rpx 0;
							text-indent: 1.2em;
						}
					}
				}

				.ifgeted {
					filter: grayscale(100%);
				}
			}
		}
	}
</style>
