<template>
	<view class="coopon-pages">
		<couponTpl @checkOk="checkOk" :list="couponList" :showCheck="true"></couponTpl>
		<view class="fix-button" v-if="curCoupon">
			<view>
				<view>优惠：￥{{curCoupon.couponAmount}}</view>
				<view @click="comfirn">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	import couponTpl from '@/pages/coupon/couponTpl.vue'
	export default {
		components: {
			couponTpl
		},
		data() {
			return {
				curCoupon: null,
				couponList:  []
			};
		},
		onLoad(options) {
			console.log(options,'options')
			this.couponList = JSON.parse(decodeURIComponent(options.list)) 
			this.curCoupon = JSON.parse(decodeURIComponent(options.curCoupon)) 
		},
		methods:{
			checkOk(item){
				this.couponList.map(list=>{
					list.checked = (list.id === item.id && !list.checked) ? true : false
				})
				let has = this.couponList.find(item=> item.checked)
				if (has) {
					this.curCoupon = has
				} else {
					this.curCoupon = null
				}
				// 将用户选择优惠券传给下单页面
				uni.$emit('couponChoose',{curCoupon:this.curCoupon})
			},
			// 确认按钮
			comfirn(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.coopon-pages{
		width: 100%;
		padding-bottom: 100rpx;
		.fix-button{
			width: 100%;
			position: fixed;
			bottom: 0;
			> view{
				display: flex;
				align-items: center;
				background: #333;
				>view{
					padding: 20rpx 30rpx;
					color: #fff;
					&:first-child{
						width: 70%;
						flex-grow: 1;
					}
					&:last-child{
						background:red;
						width: 30%;
						color: #fff;
						text-align: center;
						font-size: 36rpx;
					}
				}
			}
		}
	}
</style>
