<template>
	<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color"></navigationStyle>
	<view class="Coupons">
		<view class="tops">

		</view>
		<view class="secondBright-header">
			<view class="header-left" :class="{headerActive:headerindex==1}" @click="remo">
				可用券
			</view>
			<view class="header-right" :class="{headerActive:headerindex==2}" @click="add">
				失效券
			</view>
		</view>
		<scroll-view class="secondaryCard-auto" scroll-y="true">
		<view class="big">
			<view class="card" v-for="(item,index) in couponsData" :key="item.id">
				<view class="boxs" v-if="item.status===1&& headerindex===1">
					<view class="boxs-left">
						<text class="boxs-left-top" v-if="item.couponName==='拉新洗车券'">新</text>
						<text class="boxs-left-tops" v-if="item.couponName==='拉新洗车券'">拉新券</text>
						<text class="boxs-left-top" v-if="item.couponName==='停车场优惠卷'">停</text>
						<text class="boxs-left-tops" v-if="item.couponName==='停车场优惠卷'">停车券</text>
					</view>
					<view class="boxs-right">
						<view class="boxs-right-top">
							{{item.couponName}}
						</view>
						<view class="boxs-right-tops">
							{{item.endTime}}
						</view>
						<view class="line">
							
						</view>
						<view class="boxs-right-bottom">
							<!-- 每次上线使用20分钟 -->{{item.rule}}
						</view>
					</view>
					<view class="boxs-Btn" @click="xiche(index)">
						使用
					</view>
				</view>
			<!-- 	<view class="boxs" v-if="item.status===2&&headerindex===2">
					<view class="boxs-left">
						<text class="boxs-left-top">团</text>
						<text class="boxs-left-tops">团购券</text>
					</view>
					<view class="boxs-right">
						<view class="boxs-right-top">
							抖音团购20元券
						</view>
						<view class="boxs-right-tops">
							2020.06.09-2020.07.31
						</view>
						<view class="line">
							
						</view>
						<view class="boxs-right-bottom">
							每次上线使用20分钟
						</view>
					</view>
					<view class="boxs-Btns boxs-BtnsActive">
					
					</view>
				</view> -->
				<view class="boxs" v-if="item.status===0&&headerindex===2">
					<view class="boxs-left">
						<text class="boxs-left-top" v-if="item.couponName==='拉新洗车券'">新</text>
						<text class="boxs-left-tops" v-if="item.couponName==='拉新洗车券'">拉新券</text>
						<text class="boxs-left-top" v-if="item.couponName==='停车场优惠卷'">停</text>
						<text class="boxs-left-tops" v-if="item.couponName==='停车场优惠卷'">停车券</text>
					</view>
				<view class="boxs-right">
					<view class="boxs-right-top">
						{{item.couponName}}
					</view>
					<view class="boxs-right-tops">
						{{item.endTime}}
					</view>
					<view class="line">
						
					</view>
					<view class="boxs-right-bottom">
						<!-- 每次上线使用20分钟 -->{{item.rule}}
					</view>
				</view>
					<view class="boxs-Btns boxs-BtnsActives">
					
					</view>
				</view>
			</view>
		</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	import {coupons} from '../../stor/Coupons/coupons.js'
import { storeToRefs } from 'pinia';
	const c = coupons()
	const {couponsData}= storeToRefs(c)
	c.getcouponsData()

	onLoad(()=>{
		
	})
	const headerindex = ref(1)

	const titles = ref('优惠券')
	const bgcolor = ref('#fff')
	const color = ref('#000')
	const remo = () => {
		headerindex.value = 1
	}
	const add = () => {
		headerindex.value = 2
	}
	//使用优惠券
	const xiche =(index)=>{
		c.getYouHuiApi(couponsData.value[index].id)
		
	} 
</script>

<style lang="scss">
	.Coupons {
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;
		position: absolute;
		overflow: hidden;

		.tops {
			width: 100%;
			height: 11%;
		}

		.secondBright-header {
			width: 100%;
			height: 80rpx;
			display: flex;
			font-size: 30rpx;
			color: black;
			background-color: #fff;

			.header-left {
				width: 50%;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
			}

			.header-right {
				width: 50%;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
			}

			.headerActive {
				border-bottom: 8rpx solid #1378F7;
				color:#1378F7;
			}
		}

		.secondaryCard-auto {
			width: 100%;
			height: 80%;
			margin-top: 15rpx;

			.big{
				width: 100%;
				height: 100%;
				.card {
					width: 694rpx;
					margin-left: 50%;
					transform: translateX(-50%);
				
					.boxs {
						width: 694rpx;
						height: 208rpx;
						margin-top: 20rpx;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						position: relative;
				
						.boxs-left {
							width: 234rpx;
							height: 208rpx;
							background-image: url("https://www.jiubaotongxue.love/image/demo43.png");
							background-size: 100% 100%;
				
							.boxs-left-top {
								display: block;
								width: 100%;
								height: 66rpx;
								line-height: 66rpx;
								text-align: center;
								margin-top: 46rpx;
								font-size: 48rpx;
								color: white;
							}
				
							.boxs-left-tops {
								display: block;
								width: 100%;
								height: 40rpx;
								line-height: 40rpx;
								text-align: center;
								font-size: 28rpx;
								color: white;
								margin-top: 12rpx;
							}
						}
				
						.boxs-right {
							width: 460rpx;
							height: 208rpx;
							background-image: url("https://www.jiubaotongxue.love/image/demo44.png");
							background-size: 100% 100%;
							box-sizing: border-box;
							padding-left: 28rpx;
							.boxs-right-top{
								width:100%;
								height: 42rpx;
								font-weight: 500;
								font-size: 30rpx;
								color: #242526;
								line-height: 42rpx;
								margin-top: 34rpx;
								font-weight: 700;
							}
							.boxs-right-tops{
								width:100%;
								height: 34rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: rgba(36,37,38,0.5);
								line-height: 34rpx;
								font-style: normal;
								margin-top: 14rpx;
							}
							.line{
								width:100%;
								height: 2rpx;
								border-top: 1rpx solid #E6E6E6;
								margin-top: 16rpx;
							}
							.boxs-right-bottom{
								width: 100%;
								height: 34rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: rgba(36,37,38,0.5);
								line-height: 34rpx;
								margin-top: 16rpx;
							}
						
						}
						.boxs-Btn{
							position: absolute;
							right: 28rpx;
							top: 28rpx;
							width: 88rpx;
							height: 48rpx;
							text-align: center;
							line-height: 48rpx;
							font-size: 22rpx;
							color: white;
							background: linear-gradient( 135deg, #FEB44C 0%, #FF8833 100%);
							border-radius: 25rpx 25rpx 25rpx 25rpx;
						}
						.boxs-Btns{
							position: absolute;
							right: 24rpx;
							top: 24rpx;
							width: 88rpx;
							height: 88rpx;
							border-radius: 50%;
							background-size: 100% 100%;
						}
						.boxs-BtnsActive{
							background-image: url("https://www.jiubaotongxue.love/image/demo45.png");
						}
						.boxs-BtnsActives{
							background-image: url("https://www.jiubaotongxue.love/image/demo46.png");
						}
					}
				}
			}
		}
	}
</style>