<template>
	<view>
		<uni-nav-bar  left-icon="left" :statusBar="true"  title="CouPons" color="#000000"  @clickLeft="back"  :border="false">
			<!-- <block slot="right">
				<view class="head_coupons">
					<image src="../../static/img/coupons.png" mode=""></image>
				</view>
				
			</block> -->
		</uni-nav-bar>
		<view class="body">
			
			<view class="coupons_item" v-for="(item,index) in list " :key="index">
				<view class="coupons_item_left">
					<view class="item_left_prcie">${{item.type_money}}</view>
					<text class="item_left_span">Min.spend</text>
					<view>${{item.min_goods_amount}}</view>
				</view>
				<view class="coupons_item_right">
					<view class="coupons_right_info">
						<view class="coupons_right_info_title">{{item.type_name}}</view>
						<text>The tide zone is available</text>
						<view class="coupons_right_info_time">{{item.send_start_date}} - {{item.send_end_date}}</view>
					</view>
					<button v-if="item.is_obtained==0" @click="obtainbonus(item.type_id)">Receive</button>
					<image src="../../static/img/coupons_bg.png" mode="" class="coupons_item_right_bg" v-if="item.is_obtained==1"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {defaultRequest,defaultRequest2} from '../../api/index.js'
	export default {
		data() {
			return {
				list:[]
			}
		},
		methods:{
			obtainbonus(id){
				let data={_action:'obtainbonus',type_id:id}
				defaultRequest2(data).then(res=>{
					console.info(res)
					if(res.error==0){
						uni.showToast({
							icon:'none',
							title:res.message
						})
					}
					this.getList()
				})
			},
			getList(){
				let data={_action:'getbonuslist'}
				defaultRequest(data).then(res=>{
					console.info(res)
					if(res.error==0){
						this.list=res.data
					}
				})
			},
			back(){
				uni.navigateBack()
			},
		},
		onLoad() {
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.uni-navbar{
		font-size: 32rpx;
		font-weight: bold;
	}
	.body{
		border-top: 14.67rpx #F7F7F7 solid;
		padding:0 26rpx;
		padding-top: 31.33rpx;
	}
	.head_coupons{
		width: 34.67rpx;
		height: 34.67rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
</style>