<template>
	<view class="themes-coupon">
		<scroll-view class="scroll-list" :scroll-x="true">
			<block v-for="(item, idx) in shopCoupon1" :key="idx">
				<!-- isUse 是按钮为'去使用'的优惠券 -->
				<view class="scroll-list__item" v-if="!item.isOver" :class="{ 'isUse': item.isUse }" @tap.stop="getcoupon" :data-idx="idx" :data-id="item.couponid" :data-price="item.price" :data-score="item.score">
					<image class="scroll-list__item-bg" :src="item.isUse ? event_rul + '/static/theme/coupon-bg1.svg' : event_rul + '/static/theme/coupon-bg.svg'"></image>
					<view class="conpon-price">
						<view class="conpon-price-c flex j-center">
							<text class="price-f">¥</text>
							<text class="price-num font-w">{{ item.money }}</text>
						</view>
						<view class="conpon-price-h">满{{ item.minprice }}元使用</view>
					</view>
					<view class="conpon-ft">
						<view class="conpon-txt">优惠券</view>
						<view class="conpon-btn border-rius-r flex al-item-center">{{ item.msg || '点击领取' }}</view>
					</view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	var app = getApp();
	import { mapState } from "vuex";
	export default{
		props:{
			shopCoupon: {
				type: Array,
				default: function() {
					return [];
				},
			},
		},
		data() {
			return {
				shopCoupon1: this.shopCoupon,
				event_rul: app.globalData.event_url,
			}
		},
		watch: {
			shopCoupon (newV, oldV) {
				this.shopCoupon1 = newV;
			
				console.log("shopCoupon1",this.shopCoupon1)
			}
		},
		computed: {
			...mapState(['opt'])
		},
		methods: {
			// 点击领取优惠券
			getcoupon: function (e) {
				
				var that = this;
				var idx = e.currentTarget.dataset.idx;
				var id = e.currentTarget.dataset.id;
				var score = parseInt(e.currentTarget.dataset.score);
				var price = e.currentTarget.dataset.price;
				
				if (price > 0) {
					app.post('ApiCoupon/buycoupon', {id: id}, function (res) {
						console.log(res)
						if(res.status == 0) {
								app.error(res.msg);
						} else {
							app.goto('/pages/pay/pay?id=' + res.payorderid);
						}
					})
					return;
				}
				if (score > 0) {
					app.confirm('确定要消耗' + score + '' + that.t('积分') + '兑换吗?', function () {
						app.showLoading('兑换中');
						app.post('ApiCoupon/getcoupon', {id: id}, function (data) {
							app.showLoading(false);
							if (data.status == 0) {
								app.error(data.msg);
							} else {
								app.success(data.msg);
							}
						});
					});
				}
				that.shopCoupon.map((item,index) => {
					console.log(index,idx)
					if(index === idx) {
						if(item.isUse) {
							uni.navigateTo({
								url:'/pages/shop/prolist?cpid='+ id
							})
						} else if(item.isOver) {
							return;
						} else {
							app.showLoading('领取中');
							app.post('ApiCoupon/getcoupon', {id: id}, function (data) {
								app.showLoading(false);
								if (data.status == 0) {
									app.error(data.msg);
								} else {
									app.success(data.msg);
									that.$set(item,"msg","去使用");
									that.$set(item,'isUse',true);
									that.$set(item,'isOver',false);
								}
							});
						}
					}
				})				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.themes-coupon {
		margin-top: 24rpx;
		position: relative;
		right: -28rpx;
		left: 0;
		width: calc(100% + 28rpx);
		.scroll-list {
			white-space: nowrap;
			& ::-webkit-scrollbar {
				display: none;
			}
			.scroll-list__item {
				// background: pink;
				display: inline-flex;
				align-items: center;
				justify-content: space-between;
				margin-right: 28rpx;
				position: relative;
				width: 234rpx;
				height: 106rpx;
				padding: 8rpx 12rpx 16rpx 16rpx;
				z-index: 1;
				&.isUse {
					.conpon-btn {
						border: 1rpx solid #FB5E00;
						color: #FB5E00;
					}
				}
				&-bg {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					z-index: -1;
				}
				.conpon-price {
					color: #FFF;
					.conpon-price-c {
						align-items: flex-start;
						.price-f {
							padding: 20rpx 2rpx 0 0;
							font-size: 24rpx;
							line-height: 34rpx;
						}
						.price-num {
							font-size: 44rpx;
							line-height: 60rpx;
							letter-spacing: 2rpx;
						}
					}
					.conpon-price-h {
						margin-top: -6rpx;
						font-size: 20rpx;
						line-height: 28rpx;
					}
				}
				.conpon-txt {
					font-size: 24rpx;
					font-weight: 500;
					color: #FB5E00;
					line-height: 34rpx;
					padding-top: 10rpx;
				}
				.conpon-btn {
					width: 76rpx;
					justify-content: center;
					margin-top: 14rpx;
					font-size: 16rpx;
					line-height: 22rpx;
					color: #FFF;
					background: #FB5E00;
				}
			}
		}
	}
	
	.top {margin-top: -70rpx;}
	.top-z {margin-top: 30rpx;}
	.top-m {margin-top: -40rpx;}
</style>