<template>
	<scroll-view :scroll-y="true" @scroll="scrollHandler" @scrolltoupper="scrollTopHandler" style="height: 100vh">
		<view class="headStatus" v-if="scrollTop > 50" :style="[
					headStyle,
					{
						zIndex: scrollTop < 10 ? 'unset' : 2,
						opacity: scrollTop < 10 ? '100' : scrollTop,
					},
					]">
							<view class="title" v-if="scrollTop > 50">{{ pageTitle }}</view>
			</view>
			<view class="couponlistStyle column">
				<view>
					<view class="relative">
						<headerCoupon style="position: absolute; left: 0;top: 0;z-index: 1;"></headerCoupon>
						<img class="block" 
						src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638747792785027173.png"
						style="width: 750rpx;height: 723rpx;"/>
					</view>
				</view>
				<view class="col column">
					<view class="couponType relative">
						<view class="couponTypeBg row-sbs-n">
							<scroll-view scroll-x :scroll-left="scrollLeft" 
							scroll-with-animation style="height: 70rpx; white-space: nowrap;">
								<view class="row">
									<view class="couponTypeTitle column relative"
									:class="[msg.CouponsUseScope==item.Id?'active':'']"
									v-for="(item, index) in ScopeOfUseList" 
									:key="index"
									@click="changeHandler(item.Id)">
										<text>{{ item.Name }}</text>
										<view v-if="msg.CouponsUseScope==item.Id" 
										class="borderActive">
											<view></view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
					<view class="couponListBg col">
						<u-empty v-if="g.length == 0" text="暂无相关优惠券" mode="coupon" padding-top="5"></u-empty>
						<view
						v-if="g.length > 0"
						style="height: 100%;"
						>
						<scroll-view
							scroll-y
							:enable-back-to-top="true"
							:enable-flex="true"
							@scrolltolower="lower"
							:style="{ height: '100%' }"
						>
							<view class="couponlist">
								<view class="c_list_item row" 
								:class="[x.couponReceiveCount>0?'active':'']"
								v-for="(x, i) in g" :key="i"  @click="goUrl(x)">
									<view class="item_top column items-center justify-center">
										<view>
											<text v-if="x.couponsType==1">￥</text>
											<text style="font-size: 54rpx;font-weight: bold;">{{x.denomination }}</text>
											<text v-if="x.couponsType==2" style="margin-left: 10rpx;">折</text>
										</view>
										<Text>满{{Number(x.useCondition) }}可用</Text>
									</view>
									<view class="item_b col relative">
										<view class="row">
											<text class="item_b_l_title">{{ x.couponsUseScope }}</text>
											<text class="item_b_l_text">{{x.couponsType==1?'抵扣券':'折扣券'}}</text>
										</view>
										<view class="row-sbas-n">
											<view class="col item_b_r_text">
												{{ x.couponsName }}
											</view>
											<view class="item_b_r_buttom">
												<view class="receive" @click.stop="receive(x,i)">
													<Text>{{x.couponReceiveCount>0?'已领取':'立即领取'}} </Text>
												</view>
											</view>
										</view>
										<img v-if="x.couponReceiveCount>0" class="item_b_r_RecAlr" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638747799527913675.png"/>
									</view>
								</view>
							</view>
							<view style="padding: 0 25rpx;">
								<u-loadmore
								:status="status"
								:load-text="loadText"
								:font-size="24"
								:margin-top="20"
								:margin-bottom="20"
								bg-color="#f3f4f6"
								/>
							</view>
							
						</scroll-view>
						
						</view>

						<view class="loading" style="padding: 0 25rpx;" v-if="loading">
							<u-loading mode="flower" size="48">></u-loading>
							<Text style="color: #fff; margin-top: 10rpx;">加载中...</Text>
						</view>
					</view>
				</view>
		
				<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth= 'gbAuth'></auth>
			</view>
	</scroll-view>
 
</template>

<script>
import auth from "../../../components/auth/index.vue";
import headerCoupon from "@/components/header/header";
export default {
  components: {
    auth,
	headerCoupon
  },
  data() {
    return {
      pageTitle: "领券中心",
      mainColor: "",
      contentHeight: 0,
      g: [],
      loading: false,
	  showAuth:false,
	  U:{},
	  msg:{
		pageIndex: 1,
		pageSize: 10,
		CouponsUseScope: -1,
	  },
      page_count: 1,
      status: "loadmore",
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
	  ScopeOfUseList:[],
	  activeItemStyle:{
		backgroundColor: '#f3f4f6',
		color: '#232323',
		fontWeight: 'bold',
		fontSize: '28rpx',
	  },
	  scrollLeft: 0,
	  scrollTop: 0,
	  headStyle: {},
    };
  },
  created() {
	this.getScopeOfUse()
    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.u = uni.getStorageSync("mall_UserInfo");
    if (!this.u) {
      this.u = {
    	nickName: "未登录",
    	avatarUrl: ""
      };
      this.showAuth = true;
    }	else{
		
    	this.loading = true;
    	this.init();
    }
    
  },
  methods: {
	scrollHandler(e) {
		this.scrollTop = e.detail.scrollTop;
	},
	scrollTopHandler() {
		this.scrollTop = 0;
	},
	SearchData() {
		this.msg.pageIndex = 1;
		this.g = [];
		this.init();
	},
	getScopeOfUse() {
		this.apipost("coupon_post_GetCouponAllotOrderTypeEnumList", {}, (res) => {
			if (res.resultCode == 1) {
				this.ScopeOfUseList = res.data
				this.ScopeOfUseList.unshift({
					Id: -1,
					Name: '不限'
				})
			}
			}, (failed) => {
				uni.showToast({
					title: failed.message,
					icon: "none",
				});
			}, (error) => {
		})
	},
	changeHandler(i) {
		this.msg.CouponsUseScope = i
		this.SearchData()
	},
    init() {
	  this.apipost("b2c_post_GetWechatCouponPageList", this.msg, (res) => {
			if (res.resultCode == 1) {
				this.loading = false;
				this.g = this.g.concat(res.data.pageData);
				this.g.forEach((x) => {
					if(x.effectDate) {
						let date = new Date(x.effectDate);
						x.effectDate = this.$utils.formatDates(date,'yyyy-MM-dd')
					}
					if(x.expirationDate) {
						let date = new Date(x.expirationDate);
						x.expirationDate = this.$utils.formatDates(date,'yyyy-MM-dd');
					}
					// 格式化代码
				})
					this.page_count = res.data.pageCount;
					this.status = "loadmore"
					if (this.page_count == 1||this.page_count == this.msg.pageIndex) {
						this.status = "nomore";
					}
				}
			}, (failed) => {
				uni.showToast({
					title: failed.message,
					icon: "none",
				});
			}, (error) => {
		})
    },
	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.couponReceiveCount==0){
			this.apipost("b2c_post_CustomerGrantCoupon", {
				Id: x.id
			}, (res) => {
				if (res.resultCode == 1) {
					uni.showToast({
				  		title: res.message,
				  		icon: "none"
				  	});
					this.g[i].couponReceiveCount=1;
				}
				}, (failed) => {
					uni.showToast({
						title: failed.message,
						icon: "none",
					});
				}, (error) => {
			})
		}else{
			uni.showToast({
				title: "已领取过优惠券",
				icon: "none"
			});
		}
		
	},
	reloadUserinfo() {
	  this.u = uni.getStorageSync("mall_UserInfo");
	  // this.showAuth=false;
	  this.init();
	},
	//关闭登录窗口
	gbAuth(){
		uni.navigateBack()
	},
  },
};
</script>
<style lang="scss" scoped>
@import url("@/asset/css/flex.css");
.couponTypeTitle{
	text-align: center;
	position: relative;
	fongt-size: 28rpx;
	padding: 0 31rpx;
}
.couponTypeTitle.active{
	font-weight: bold;
}
.borderActive{
	position: absolute;
	left: 0;
	right: 0;
	bottom: -24rpx;
}
.borderActive view{
	width: 36rpx;
	height: 6rpx;
	background: #B99846;
	border-radius: 6rpx;
	margin: auto;
	margin-top: 24rpx;
}
.couponTypeBg{
	background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638747826838391147.png')no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: -25rpx;
	left: 0;
	right: 0;
	padding: 42rpx 31rpx 32rpx 31rpx;
}
.couponType{
	width: 100%;
	height: 76rpx;
}
.couponlistStyle {
  width: 100%;
  min-height: 100vh;
  background: #f3f4f6;
}
.couponlistStyle .couponlist{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 20rpx;
}
.couponlistStyle .c_list_item{
	width: 94%;
	border-radius: 10rpx;
	overflow: hidden;
	margin-top: 25rpx;
}
.couponlistStyle .c_list_item .item_top{
	width: 40%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 40rpx 0 42rpx 0;
	background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638747799527141825.png')no-repeat;
	background-size: 100% 100%;
	color: #FF3166;
	
}
.couponlistStyle .c_list_item  .top_title{
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.c_list_item .receive{
	width: 132rpx;
	height: 54rpx;
	border-radius: 10rpx;
	background: black;
	color:  #fff;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2rpx solid black;
}
.c_list_item.active .receive{
	background: #fff;
	color:  black;
}
.couponListBg{
	background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638747799385259711.jpg') repeat-y;
	background-size: 100% auto;
}
.item_b{
	padding-left: 30rpx;
	padding-top: 37rpx;
	padding-right: 28rpx;
	background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638747799527385951.png')no-repeat;
	background-size: 100% 100%;
}
.item_b_r_RecAlr{
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
	width: 97rpx;
	height: 79rpx;
}
.couponlistStyle .item_b_r{
	font-family: '213';
	display: flex;
	flex-direction: column;
	padding: 10px;
	justify-content: space-around;
	font-size: 12px;
	position: relative;
	
}
.item_b_l_title{
	font-family: PingFang SC;
	font-weight: bold;
	font-size: 28rpx;
	color: #B99846;
}
.item_b_l_text{
	font-family: PingFang SC;
	font-weight: bold;
	font-size: 28rpx;
	color: black;
	margin-left: 10rpx;
}
.item_b_r_text{
	font-family: PingFang SC;
	font-weight: 400;
	font-size: 20rpx;
	color: #8D8D8D;
	line-height: 28rpx;
	margin-top: 15rpx;
	word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
	letter-spacing: 2rpx;
}
.item_b-r{
	width: 133rpx;
}
.item_b_r_buttom{
	margin-left: 25rpx;
}
.couponlistStyle  .c_list_item .item_b:before {
  content: "";
  display: block;
  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;
}
.headStatus {
	overflow: hidden;
	position: relative;
	width: 140vw;
	padding-right: 40vw;
	padding-top: 50rpx;
	padding-bottom: 10px;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	display: flex;
	background-image: linear-gradient(to right, #e6b865, #ebb45e);
}

.headStatus .arrow {
	height: 24px;
	margin: 5px 10px;
	width: 24px;
}

.headStatus .title {
	font-size: 18px;
	color: #fff;
	flex: 1;
	width: 1px;
	line-height: 34px;
	text-align: center;
}

.headStatus .title {
	color: #111 !important;
}
</style>
