<template>
  <view class="couponlistStyle" :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 );
        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="c_list_item" v-for="(x, i) in g" :key="i"  @click="goUrl(x)">
			  <view class="item_top">
				  <view class="item_top_l">
					  <view style="display: flex;align-items: flex-end;">
						  <Text style='font-size: 32px;'>{{Number(x.DiscountsPrice)}} </Text>
						  <Text style='font-size: 14px;'>{{x.CouponType==2?'折':""}}</Text> 
					  </view>
					  <view style="display: flex;flex-direction: column;margin-left: 10px;width: 210px;">
						  <Text class='top_title'>{{x.Name}}</Text>
						  <Text>满{{Number(x.MinConsumePrice) }}可用</Text>
						  <Text v-if='Number(x.MaxDiscountsPrice)>1'>优惠上限:￥{{Number(x.MaxDiscountsPrice) }}</Text>
					  </view>
				  </view>
				  <view class="receive" @click.stop="receive(x,i)">
					  <Text>{{x.IsReceive==1?'已领取':'立即领取'}} </Text>
				  </view>
			  </view>
			  <view class="item_b">
				  <Text v-if='x.IndateType==1'>领券后{{x.IndateDay}}天过期</Text>
				  <Text v-if='x.IndateType==2'>有效日期:{{x.StartDate}}-{{x.EndDate}}</Text>
				  <!-- <Text class="top_title" >{{x.UseTypeStr}}</Text> -->
				  <Text class='top_title' v-if='x.UseType==1'>适用类别: <Text v-for="(item, index) in x.ProductList" :key="index">{{item.Relevance}}</Text> </Text>
				  <Text class='top_title' v-if='x.UseType==2'>适用商品: <Text v-for="(item, index) in x.ProductList" :key="index">{{item.Relevance}}</Text> </Text>
				  <Text class='top_title' v-if='x.UseType==3'>适用范围:全场通用</Text>
				  <Text class='top_title' v-if='x.UseType==4'>适用方式:当面付</Text>
			  </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>
  </view>
</template>

<script>

export default {

  data() {
    return {
      pageTitle: "领券中心",
      mainColor: "",
      contentHeight: 0,
      g: [],
      loading: false,
	  msg:{
		pageIndex: 1,
		pageSize:10,
	  },
      page_count: 1,
      status: "loadmore",
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
    };
  },
  created() {
    this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
    this.mainColor = this.$uiConfig.mainColor;
  },
  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) {
    //option为object类型，会序列化上个页面传递的参数
    
    this.loading = true;
    this.init();
  },
  methods: {
 
    init() {
      
      this.request2(
      	{
      		url: '/api/AppletUser/GetAllCouponPageList',
      		data: this.msg
      	},
      	res => {
      			
      		if(res.resultCode==1){
      			
      				this.loading = false;
      				this.g = this.g.concat(res.data.pageData);
      			
      					 this.page_count = res.data.pageCount;
      					 if (this.page_count == 1) {
      					   this.status = "nomore";
      					 }
      		}
      	}
      );
    },
	lower(e) {
		
		 if (this.msg.pageIndex < this.page_count) {
			this.msg.pageIndex++;
			this.status = "loading";
			this.init();
		 } else {
			this.status = "nomore";
		 }
	},
	goUrl(item){
		uni.navigateTo({
		  url: "/pages/coupon/details/details?item=" + encodeURIComponent(JSON.stringify(item))+'&type=2'
		});
	},
	receive(x,i){
		if(x.IsReceive==0){
			this.request2(
			{
				url: '/api/AppletUser/GrantCoupon',
				data: {
					CouponId:x.CouponId
				}
			},
			  
			  (res) => {
				  if(res.resultCode==1){
				  	
				  	uni.showToast({
				  		title: res.message,
				  		icon: "none"
				  	});
					this.g[i].IsReceive=1;
				  }
				 
			  } 
			);
		}else{
			uni.showToast({
				title: "已领取过优惠券",
				icon: "none"
			});
		}
		
	}
  },
};
</script>
<style>
.couponlistStyle {
  width: 100%;
  height: 100%;
  background: #f3f4f6;
}
.couponlistStyle .couponlist{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.couponlistStyle .c_list_item{
	width: 94%;
	display: flex;
	flex-direction: column;
	border-radius: 10rpx;
	overflow: hidden;
	margin-top: 10px;
	border:1px solid #f5f5f5
}
.couponlistStyle .c_list_item .item_top{
	width: 100%;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10px;
	background-image: linear-gradient(
	  to bottom right,
	 rgb(117, 174, 246),
	 rgb(56, 106, 244)
	  
	);
	color: #fff;
	
}
.couponlistStyle .c_list_item .item_top .item_top_l{
	display: flex;
	align-items: center;
}
.couponlistStyle .c_list_item  .top_title{
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.couponlistStyle .c_list_item .item_top .receive{
	width: 90px;
	height: 30px;
	border-radius: 15px;
	background: #fff;
	color:  #6995EE;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	
}
.couponlistStyle .item_b{
	font-family: '213';
	width: 100%;
	height: 60px;
	display: flex;
	flex-direction: column;
	padding: 10px;
	background-color: #fff;
	justify-content: space-around;
	font-size: 12px;
	position: relative;
	
}
.couponlistStyle  .c_list_item .item_b:before {
  content: "";
  display: block;
  width: 100%;
  height: 12px;
  background-size: 12px 12px; /* 一个repeat的大小 */
  background-repeat: repeat-x;
  background-image: radial-gradient(#fff 4px, transparent 4px);
  position: absolute;
  left: 0;
}
.couponlistStyle  .c_list_item .item_b:before {
  top: -6px;
}
.couponlistStyle .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;
}
</style>
