<template>
	<div class="trade_area">
		<uni-top-status></uni-top-status>
		<van-nav-bar title="我的券夹" class="header" left-arrow :border="false" @click-left="onClickLeft" />
    <div style="margin: 13vh 10px;">
			<div :key="index" v-for="(items,index) in couponCope" style="margin: 10px auto 20px;">
				<div :key="index2" v-for="(items2,index2) in couponCope[index]" style="margin: 0px auto 10px;">
					<div class="title" v-if="index2 === 0">
						<span>{{ items2.coridcName }}</span>
						<span @click="handleAllCoupon(items2)">查看全部>></span>
					</div>
					<div class="coupon_box" v-if="index2 < 3">
						<div class="pic">
							<img :src=" 'https://shapp.mbcloud.com/' + items2.couponLogo" alt="">
						</div>
						<div class="coupon_tips">
							<span>{{items2.couponName}}</span>
							<span style="color: #a0a0a0;font-size: 14px;">{{items2.couponCode}}</span>
							<span style="color: #a0a0a0;font-size: 14px;">有效期至{{items2.endDate}}</span>
						</div>
						<div class="btn">
							<van-button round :color="color" @click="handleClick(items2)">去使用</van-button>
							<van-button v-clipboard:copy="items2.couponCode" v-clipboard:success="onCopy" v-clipboard:error="onError" round
								:color="color">复制券码</van-button>
						</div>
					</div>
					<div class="tip" v-if="index2 < 3">{{ items2.remark == null ? '暂无备注' :  items2.remark}}</div>
				</div>
			</div>
    </div>
	</div>
</template>

<script>
	import uniTopStatus from '@/components/topStatus.vue'
	import COUPON from '@/api/coupon.js'
	let COUPON_API = new COUPON()
	export default {
		name: 'trade_area',
		components: {
			uniTopStatus
		},
		data() {
			return {
				color: 'linear-gradient(to right,#5B29D6,#0B25DF)',
				couponCope: []
			}
		},
		created() {
			this.init()
		},
		methods: {
			// 复制券码
			onCopy() {
				this.$toast.success({
					className: 'toast',
					message:'复制成功',
				});
			},
			onError() {
				this.$toast.fail({
					className: 'toast',
					message: '复制失败',
				});
			},
			init() {
        COUPON_API.getAllReceivedList({
            usridc: this.$store.state.inforMation.usridc
          })
          .then(res => {
            if (res.data.code == 200) {
							const data = res.data.data
							// for (const key of data) {
							// 	this.couponCope.push(data[key])
							// }
							for (const key in data) {
								const element = data[key]
								this.couponCope.push(element)
							}
							console.log(this.couponCope, 'this.couponCope')
							// this.couponCope = res.data.data
            } else {
              this.$toast.fail({
                className: 'toast',
                message: res.data.msg,
              });
            }
          })
			},
			onClickLeft() {
				this.$router.back(-1)
			},
			handleAllCoupon(items) {
				localStorage.setItem('coridc', items.coridc)
				this.$router.push('/allCoupon')
			},
			handleClick(item) {
				console.log(item, item)
				const { couponLink, coridcName } = item
				console.log(item, 'link')
				if (couponLink.startsWith('https') || couponLink.startsWith('http')) {
					this.$router.push({ path: '/jump', query: { couponLink, enterpriseName: coridcName }})
				} else {
					this.$toast({
						className: 'toast',
						message: '暂无兑换链接,请前往官网兑换'
					})
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.coupon_box {
		display: flex;
		flex-direction: row;
		width: 94vw;
		height: 100px;
		// background-color: #f8f8f8;
		border: 1px solid #988ECD;

		.pic {
			width: 30%;
			height: 100px;

			img {
				margin-top: 5px;
				margin-left: 5%;
				height: 90px;
				width: 90%;
			}
		}

		.coupon_tips {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 40%;
			margin-left: 10px;
			padding: 10px 0;
			font-size: 18px;
		}

		.btn {
			width: 30%;
			.van-button {
				width: 80%;
				margin: 10px 0 10px 10px;
				border-radius: 40px;
				height: 30px;
				letter-spacing: 2px;
				font-size: 12px;
			}
			.van-button--normal {
				padding: 0;
			}
		}
	}
	.title {
		height: 20px;
		line-height: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 1px;
		margin-bottom: 10px;
		font-size: 12px;
		span:first-child {
			font-weight: 700;
			font-size: 16px;
		}
	}
	.tip {
		width: 94vw;
		height: 30px;
		border: 1px solid #988ECD;
		line-height: 30px;
		font-size: 12px;
	}
	.header {
		height: 45px;
		width: 100vw;
		line-height: 45px;
		text-align: center;
		background-color: #988ECD;
		color: white;
		position: fixed;
		top: 6vh;
		z-index: 3000;
	}

</style>