<template>
	<view class="plr20">
		<view v-if="list.length!=0">
			<view v-for="(item,index) in list" :key="index"
				:class="[item.state==1?'okdui':'nodui','mt30','flex_start']">
				<view class="flex_column flex_items mt10" style="width: 200rpx;">
					<view class="flex_start" :style="{'color': item.state==1?'#E91619':'#333'}">
						<text class="f26 bold mt20">￥</text>
						<text class="bold" style="font-size: 72rpx;" v-if="item.product">{{Math.floor(item.product.price)}}</text>
						<!-- <text class="bold" style="font-size: 72rpx;" v-else>50</text> -->
					</view>
					<view class="plr10 f22 ml20"
						:style="
						item.state==1?
						{'border-radius': '48rpx','height': '40rpx','line-height': '40rpx','color': '#E91619','border': '1px solid #E91619'}:
						{'border-radius': '48rpx','height': '40rpx','line-height': '40rpx','color': '#333','border': '1px solid #333'}
						">
						微信立减金</view>
				</view>
				<view class="ml20 flex_start flex_items" style="">
					<view class="flex_column">
						<text class="f26 mt20" style="color: #fff;">{{item.activity_name}}</text>
						<text class="mt20 f22" :style="{'color': item.state==1?'#FFD6D6':'#fff'}">单击“去兑换”立即领取立减金</text>
						<text class="mt20 f22" :style="{'color': item.state==1?'#FFD6D6':'#fff'}">{{item.create_time}}</text>
					</view>
					<image v-if="item.state==1" :src="godui" class="ml20" @click="qudui(item.voucher_link)"
						style="width: 121rpx;height: 56rpx;" mode="">
					</image>
					<image v-else :src="yidui" class="ml20" style="width: 121rpx;height: 56rpx;" mode=""></image>
				</view>
			</view>
		</view>
		<view v-else class="p30 f26 f-center" style="color: #9a9a9a;margin-top:50rpx;">--暂无数据--
		</view>
		<view style="width:100%;height: 30rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				istrue: false,
				godui: require('@/static/qudui.png'),
				yidui: require('@/static/yidui.png'),
				form: {
					pageSize: 10,
					page: 1,
					state: ""
				},
				list: []
			}
		},
		onLoad() {
			if(getApp().globalData.token!=undefined){
				this.getlist()
			}else{
				uni.navigateTo({
					url: "/pages/index/index"
				})
			}
		},
		methods: {
			getlist() {
				uni.showLoading({
					title: '加载中...'
				})
				this.api.zjlist(this.form).then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						uni.hideLoading()
						uni.stopPullDownRefresh();
						if (res.data.data.data.length == 0) {
							uni.showToast({
								title: "暂无数据",
								icon: "none"
							})
						} else {
							res.data.data.data.forEach((item, index) => {
								this.list.push(item)
							})
						}
					} else {
						uni.showToast({
							icon: "none",
							title: res.data.message
						})
					}
				})
			},
			gopay(id) {
				uni.navigateTo({
					url: "/pages/pay/index?order_id=" + id
				})
			},
			qudui(link) {
				window.open(link, "_blank")
			},
			canclepay(id) {
				let that = this
				uni.showModal({
					title: '',
					content: '确认取消付款吗？',
					cancelText: "取消",
					confirmText: "确定",
					confirmColor: '#30d09b',
					cancelColor: '#9E9E9E',
					success: function(res) {
						if (res.confirm) {
							that.gocancle(id)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			gocancle(id) {
				let that = this
				uni.showLoading({
					title: '取消中...'
				})
				that.api.canclepay({
					id: id,
					userid: uni.getStorageSync('userid'),
					token: uni.getStorageSync('token'),
				}).then((res) => {
					console.log(res)
					if (res.data.code == 1) {
						uni.hideLoading()
						uni.showToast({
							title: "取消成功",
							icon: "success",
							duration: 800
						})
						setTimeout(function() {
							that.form.pageIndex = 1
							that.list = []
							that.getlist()
						}, 800);
					} else {
						uni.showToast({
							icon: "none",
							title: res.data.msg
						})
					}
				})
			},
			chosetag(e) {
				this.form.status = e.id
				this.list = []
				this.form.pageIndex = 1
				this.getlist()
			},
			goout(types) {
				let url = ""
				if (types == "回收记录") {
					url = "/pages/record/index"
				}
				uni.navigateTo({
					url: url
				})
			},
			buycard() {
				uni.navigateTo({
					url: '../buycard/index'
				})
			},
		}
	}
</script>

<style>
	page {
		background: #FFF9F1 !important;
	}

	.okdui {
		width: 100%;
		height: 192rpx;
		background-image: url('~@/static/kdh.png') !important;
		background-size: 100% 100%;
	}

	.nodui {
		width: 100%;
		height: 192rpx;
		background-image: url('~@/static/ydh.png') !important;
		background-size: 100% 100%;
	}
</style>