<template>
	<app-layout>
		<view class="page">
			<view class="list">
				<view v-for="item in list" :key="item.id">
					<view class="item">
						<!-- <image src="https://t17.9026.com/web/statics/image/index/img-coupon-bg-0.png" ></image> -->
						<view class="list-item">
							<view class="item-left dir-top-nowrap main-center">
								<view class="coupon-price t-omit" v-if="item.type == 2">
									￥{{item.sub_price | keepNumbers}}</view>
								<view class="coupon-price t-omit" v-else>{{item.discount | keepNumbers}}折</view>
								<view style="font-size: 10px" class="t-omit" v-if="item.coupon_min_price > 0">
									满{{item.coupon_min_price | keepNumbers}}可用</view>
								<view style="font-size: 10px" v-else>无门槛使用</view>
								<view style="font-size: 10px" v-if="item.discount_limit">
									优惠上限:￥{{item.discount_limit | keepNumbers}}</view>
							</view>
							<view class="item-right">
								<view class="item-name t-omit hjx-tc-222 hjx-tw-600">{{item.name}}</view>
								<view v-if="item.appoint_type == 3">全场通用</view>
								<view v-else-if="item.appoint_type == 4">仅限当面付活动使用</view>
								<view v-else-if="item.appoint_type == 5">仅限礼品卡使用</view>
								<view v-else>限品类</view>
								<!-- <view class="t-omit t-small-color time-area hjx-tc-B19D60">{{item.start_time.split(' ')[0]}} - {{item.end_time.split(' ')[0]}}</view> -->
							</view>
							<view class="item-right-btn cross-center" v-if="item.is_receive == `0`">
								<view class="btn" @click="receive(item)">立即领取</view>
							</view>
							<view class="item-right-btn cross-center" v-else>
								<view class="btn btn1" @click="receive(item)">已领取</view>
							</view>
						</view>
						<view class="coupon-info" @click="toDetail(item.id)">
							<view v-if="item.expire_type == `1`">领取后{{item.expire_day}}天过期</view>
							<view v-if="item.expire_type == `2`">有效日期: {{item.begin_time}} - {{item.end_time}}</view>
							<view class="t-omit" v-if="item.appoint_type == `3`">适用范围：全场通用</view>
							<view class="t-omit" v-else-if="item.appoint_type == `4`">适用范围：仅限当面付活动使用</view>
							<view class="t-omit" v-else-if="item.appoint_type == `5`">适用范围：仅限礼品卡使用</view>
							<view class="t-omit" v-else-if="item.appoint_type == `2`">
						  <text>适用商品：</text>
								<text v-for="(goods,index) in item.goods" :key="goods.id">
									<text>{{index != 0 ? '、' : ''}}{{goods.name}}</text>
								</text>
						 </view>
							<view class="t-omit" v-else-if="item.appoint_type == `1`">
								<text>适用分类：</text>
								<text v-for="(cat,index) in item.cat" :key="cat.id">
									<text>{{index != 0 ? '、' : ''}}{{cat.name}}</text>
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<app-no-goods v-if="list.length === 0" :title="'暂无可领取优惠券'" background="#f7f7f7"></app-no-goods>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from "vuex";
	import appNoGoods from '@/components/page-component/app-no-goods/app-no-goods.vue';
	export default {
		data() {
			return {
				list: [],
				loading: false,
				page: 2,
			}
		},
		components: {
			appNoGoods
		},
		computed: {
			...mapState({
				couponImg: state => state.mallConfig.__wxapp_img.coupon,
			}),
			...mapGetters({
				userInfo: 'user/info',
			})
		},
		methods: {
			getList() {
				let that = this;
				that.$request({
					url: that.$api.coupon.list,
					method: 'get',
				}).then(response => {
					uni.hideLoading();
					that.$hideLoading();
					if (response.code === 0) {
						that.list = response.data.list;
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(() => {
					uni.hideLoading();
					that.$hideLoading();
				});
			},
			getMore() {
				let that = this;
				uni.showLoading({
					title: '加载中...'
				});
				that.$request({
					url: that.$api.coupon.list,
					data: {
						page: that.page
					},
				}).then(e => {
					uni.hideLoading();
					if (e.code == 0) {
						if (e.data.list.length > 0) {
							that.list = that.list.concat(e.data.list);
							that.page++;
						}
					} else {
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(e => {
					uni.hideLoading();
				});
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/coupon/details/details?id=' + id
				});
			},
			receive(coupon) {

				let that = this;
				if (that.loading) {
					return false
				}
				that.loading = true;
				uni.showLoading({
					title: '领取中...'
				});
				that.$request({
					url: that.$api.coupon.receive,
					data: {
						coupon_id: coupon.id
					},
				}).then(response => {
					that.loading = false;
					uni.hideLoading();
					if (response.code === 0) {
						setTimeout(function(row) {
							that.$store.dispatch('page/actionSetCoupon', {
								list: [Object.assign(coupon, response.data)],
								type: 'receive'
							});
							that.getList();
						}, 200)
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
						that.getList();
					}
				}).catch(() => {
					uni.hideLoading();
					that.$event.on(that.$const.EVENT_USER_LOGIN).then(() => {
						that.receive(coupon);
					});
				});
			},
		},
		onLoad() {
			this.$commonLoad.onload();

		},
		onShow() {
			this.$showLoading({
			    text: '加载中...'
			});
			this.getList();
		},
		filters: {
			keepNumbers(n) {
				return Number(n);
			}
		},
		onReachBottom() {
			this.getMore();
		},
	}
</script>

<style scoped lang="scss">
	.page {
		padding: #{20rpx} #{25rpx};
		width: 100%;
	}

	

	.coupon-info {
		margin: 0 auto;
		width: 656rpx;
		height: #{115rpx};
		border-top: 1px solid #EAEAEA;
		padding: #{20rpx} #{25rpx};
		font-size: #{22rpx};
		color: #777;
	}


	.list {
		background-color: #f7f7f7;
	}

	.item {
		height: auto;
		width: 100%;
		background-image: url(https://t17.9026.com/web/statics/image/index/img-coupon-bg-0.png);
		background-size: 100% 100%;
		margin-bottom: 20rpx;
	}

	.item image {
		width: 100%;
		height: 100%;
	}

	.list-item {
		height: #{181rpx};
		width: 100%;
		position: relative;
	}

	.item-left {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: #{190rpx};
		text-align: center;
		font-size: #{24rpx};
		color: #B19D60;
		padding-top: #{8rpx};
	}

	.coupon-price {
		font-size: #{36rpx};
		padding-bottom: #{16rpx};
		font-weight: 600;
	}

	.item-right {
		position: absolute;
		left: #{220rpx};
		top: #{30rpx};
		width: 45%;
		color: #666666;
		font-size: #{24rpx};
	}

	.item-name {
		font-size: #{32rpx};
	}

	.item-right view {
		margin-bottom: #{4rpx};
	}

	.item-right-btn {
		position: absolute;
		right: 0;
		top: 0;
		width: 20%;
		height: 100%;

		.btn {
			width: 118rpx;
			height: 52rpx;
			border: 1rpx solid #B19D60;
			border-radius: 26rpx;
			font-size: 22rpx;
			font-weight: 500;
			color: #B19D60;
			text-align: center;
			line-height: 52rpx;
			box-sizing: border-box;
		}
		
		.btn1{
			border: 1rpx solid #b1ac9d;
			color: #b1ac9d;
		}
	}

	.coupon-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: #{100rpx};
		line-height: #{100rpx};
		text-align: center;
		background-color: #fff;
		z-index: 2;
	}

	.coupon-footer.iphone_x {
		height: #{150rpx};
		padding-bottom: #{50rpx};
	}

	.list-item .status {
		position: absolute;
		top: 0;
		right: 0;
		height: #{98rpx};
		width: #{140rpx};
		z-index: 2;
	}
</style>
