<template>
	<view>
		<view class="content">
			<view class="pricecontent"><text class="price">{{price}}</text><text class="price1">元</text></view>
			<view class="couponinfo">
				<view class="title"><text>{{data.prize_name}}</text></view>
				<view class="extime">
					<text>到期时间:</text>
					<text style="margin-left: 10rpx;">{{data.create_time}}</text>
				</view>
			</view>
			<view class="btn">
				<u-button v-if="data.state == 1" shape='circle' size="small"
					color="linear-gradient(90deg, #FF2D01, #FF6729)" type="primary" @click="openCouponLink" text="兑换"></u-button>
				<u-button  :disabled="true" v-else-if="data.state == 2" shape='circle' size="small" color="#B2B2B2" type="primary"
					text="已兑换"></u-button>
				<u-button  :disabled="true" v-else shape='circle' size="small" color="#B2B2B2" type="primary"
					text="已过期"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: Object
		},
		data() {
			return {

			}
		},
		methods:{
			openCouponLink(){
				window.location.href = this.data.voucher_link
			}
		},
		computed:{
			price:{
				get(){
					if(this.data.product.price){
						return Math.floor(this.data.product.price)
					}else return 0
				}
			}
		}
	}
</script>

<style>
	.content {
		width: 638rpx;
		height: 150rpx;
		background: linear-gradient(90deg, #FEEBE3 26%, #FEFEFE 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-image: url('@/static/images/couponitem.png');
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.pricecontent{
		display: flex;
		justify-content: center;
		align-items: flex-end;
		width: 160rpx;
		/* background-color: rebeccapurple; */
	}

	.price {
		/* font-family: D-DIN, D-DIN; */
		font-weight: 400;
		font-size: 48rpx;
		color: #FF3607;
		line-height: 72rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-left: 36rpx;
		/* background-color: rebeccapurple; */

	}

	.price1 {
		/* font-family: Source Han Sans, Source Han Sans; */
		font-weight: 400;
		font-size: 28rpx;
		line-height: 64rpx;
		color: #FF3607;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-left: 2rpx;
	}

	.title {
		/* font-family: D-DIN, D-DIN; */
		font-weight: 700;
		font-size: 32rpx;
		color: #333333;
		line-height: 24rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.extime {
		/* font-family: Source Han Sans, Source Han Sans; */
		font-weight: 400;
		font-size: 20rpx;
		color: #808080;
		line-height: 24rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.couponinfo {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 22rpx;
		height: 100%;
		padding-top: 12rpx;
	}

	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-right: 34rpx;
		width: 128rpx;
		font-size: 28rpx;
		height: 48rpx;
	}
</style>