<template>
	<view class="page">
		<view class="body after-navber">
			<view class="info">
				<view class="info-list" style="width:100%;">
					<block v-for="(coupon, index) in coupon_list" :key="index">
							<view class="info-one">
								<image class="bga" src="../../static/icon-coupon-enabled.png">
								</image>
								<view class="info-content flex-row flex-x-center flex-y-center fs-b">
									<navigator hover-class="none"
										class="info-content flex-row flex-x-center flex-y-center">
										<view class="flex-grow-0">
											<view class="flex-row flex-y-bottom">
												<block>
													<view class="flex-grow-0">￥</view>
													<view class="flex-grow-1" style="font-size:23pt;">
														{{ Number(coupon.reduce) }}
													</view>
												</block>
											</view>
										</view>
										<view class="flex-grow-1">
											<view style="margin-left:16rpx;">
												<view style="margin-bottom:4rpx;">{{coupon.name}}</view>
												<view>满{{Number(coupon.full)}}可用</view>
											</view>
										</view>
									</navigator>
									<view class="flex-grow-0">
										<block v-if="coupon.state==1">
											<view @tap="receive" :data-index="index" :data-name="coupon.name"
												class="flex-x-center flex-y-center info-btn fs-sm" :data-id="coupon.id"
												style="color:#ff4544;">立即领取</view>
										</block>
										<block v-if="coupon.state == 2">
											<view class="flex-x-center flex-y-center info-btn fs-sm"
												style="color:#999;">已领取</view>
										</block>
									</view>
								</view>

								<view class="info-footer fs-sm box-pack-between flex-y-center">
									<view class="">
										<view v-if="coupon.type==2" style="font-size: 24rpx;">指定商品可用</view>
										<view class="info-day">有效日期：{{coupon.start_time}}~{{coupon.end_time}}</view>
									</view>
									<image v-if="coupon.type==2" @click.stop="bindChecked(index)" class="more-down"
										:class="coupon.checked?'more-down-deg':''" src="../../static/more-down.png">
									</image>
								</view>

								<view class="coupon-foot flex-grow-1" v-if="coupon.checked">
									<view class="box-pack-between">
										<view class="mrt16 flex flex-grow-1">
											<text style="min-width: 190rpx;">指定商品：</text>
											<view class="flex-grow-1">
												<view class="box-pack-between" v-for="(item,index) of coupon.goods">
													{{item.name}} <text style="color: red;">￥{{item.price}}</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
					</block>
				</view>
				<block v-if="coupon_list.length <= 0">
					<view class="flex-x-center"><text style="margin-top:50rpx;color: #999;">暂无优惠券</text></view>
				</block>
			</view>
		</view>
		<!-- #ifdef MP-ALIPAY -->
		<!-- <subscribe-msg /> -->
		<!-- #endif -->
	</view>
</template>
<script>
	var share_count = 0;
	let hideLoading = true;
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	
	
	export default {
		data() {
			return {
				coupon_list: [],
				get_coupon_list: "",
				wxapp_img: {},
				page: 1,
				staff_id: "",
				is_load: false,
				is_load_more: false,
		
				// systemInfo: {},
			};
		},
		props: {},
		computed: {
			...mapState(['setColor', 'store_id', 'systemInfo', 'userInfo', 'merchant_id']),
			dateRange() {
				const {
					store_id,
					systemInfo,
					userInfo
				} = this;
				return {
					store_id,
					systemInfo,
					userInfo,
				}
			},
		},
		watch: {
				setColor(nVal) {
					uni.setNavigationBarColor({
						frontColor: '#ffffff',
						backgroundColor: nVal,
					})
				},
				// 弹窗校检
				dateRange: {
					handler(val) { 
						console.log(val,"dateRange")
						if(val.store_id && val.userInfo.id && val.systemInfo){
							this.http();
						}
				}}
		},
		onLoad: function(t) {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.$store.state.color,
			})
			this.setColor = this.$store.state.color;
			if(this.$store.state.userInfo && this.$store.state.store_id){
				this.http();
			}
		},
		
		onShareAppMessage(e) {
			return {}
		},

		onReachBottom() {
			if (!this.is_load) {
				this.page = this.page + 1;
				this.http();
			}
		},
		methods: {

			bindChecked(index) {
				this.coupon_list[index].checked = !this.coupon_list[index].checked;
			},

			http() {
				this.$http.request('xcx/LqCoupons_lists', {
					user_id: this.userInfo.id,
					store_id: this.store_id,
				}, "", "", hideLoading).then(res => {
					console.log(res, "LqCoupons_lists")
					for (let s of res.data) {
						s.checked = false;
						s.state = 1;
					};
					this.coupon_list = res.data;
				})
			},

			receive: function(t) {
				let subscribe = uni.getStorageSync('balance_subscribe');
				var that = this,name = t.target.dataset.name,
					id = t.target.dataset.id,
					index = t.target.dataset.index;
				// 调用方法，唤起订阅组件
				// #ifdef MP-ALIPAY
				 my.requestSubscribeMessage({
					thirdTypeAppId: that.systemInfo.alipay_appid, // 可选，isv接入场景下必填
					entityIds: [subscribe.alipay_coupons], // 模板id列表，最多3个
					// 接收结果的回调方法
					complete:(r)=>{
						console.log('订阅回调', r);
						that.$http.request('xcx/LqCoupons', {
							user_id: this.userInfo.id,
							store_id: this.store_id,
							coupon_id: id,
						}, "", "", hideLoading).then(res => {
							that.coupon_list[index].state = 2;
							uni.showToast({
								title: '领取成功',
								icon: 'none'
							})
						})
					},
				});
				// #endif
				// #ifdef MP-WEIXIN
				uni.requestSubscribeMessage({
					tmplIds: [subscribe.card_tid],
					// success: (r) => {
					// 	that.CardMsgSubscribe(name);
					// },
					complete: (r) => {
						that.$http.request('xcx/LqCoupons', {
							user_id: this.userInfo.id,
							store_id: this.store_id,
							coupon_id: id,
						}, "", "", hideLoading).then(res => {
							that.coupon_list[index].state = 2;
							uni.showToast({
								title: '领取成功',
								icon: 'none'
							})
						})
					}
				})
				// #endif
			},
			
			CardMsgSubscribe(name){
			let that = this;
			  that.$http.request('xcx/LqCoupons', {
				user_id: this.userInfo.id,
				store_id: this.store_id,
				name: name,
			}, "", "", hideLoading).then(res => {	
			 })
			},
		}
	};
</script>
<style>
	@import "./coupon-list.css";
</style>
