<template>
	<view>
		<up-popup :show="show" mode="center" round="16rpx" close-on-click-overlay @close="close">
			<view class="model-box">
				<view class="u-flex u-flex-between">
					<view class="">
						<text class="color-333  font-16">查看优惠券</text>
						<text class="color-666  font-14">({{couponList }})张</text>
					</view>
					<up-icon name="close-circle" color="#666" size="28rpx" @click="close"></up-icon>
				</view>
				<scroll-view scroll-y="true" class="u-m-t-42" style="max-height: 50vh;">
					<view class="list">
						<view v-for="(item,index) in list" :key="index">
							<view class="item u-flex u-m-b-32 u-col-center" v-for="(item1,index1) in item.num">
								<view class="left" style="min-width: 162rpx;">
									<couponIcon :item="item.coupon" />
									<!-- <view class="red font-16 font-700" style="width: 122rpx;">第二件半价券</view> -->
									<view></view>
								</view>

								<view class="u-flex-1 u-p-l-26 ">
									<view class="color-333 font-16">
										{{item.coupon.title }}
									</view>
									<view class="color-999 font-12 u-m-t-8">
										有效期至：{{item.coupon.validEndTime||''}}
									</view>
								</view>
							</view>
						</view>

					</view>
				</scroll-view>

			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import dayjs from 'dayjs';
	import couponIcon from './coupon-icon.vue'
	import {
		computed
	} from 'vue';
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		list: {
			type: Array,
			default: () => {
				return []
			}
		}
	})
	const show = defineModel(false)
	const couponList = computed(() => {
		return props.list.reduce((prve, cur) => {
			return prve + cur.num
		}, 0)
	})

	function close() {
		show.value = false
	}
</script>

<style lang="scss" scoped>
	.model-box {
		width: 660rpx;
		padding: 28rpx 48rpx;
	}

	.list {
		.item {
			padding: 32rpx 32rpx 32rpx 16rpx;
			border-radius: 36rpx;
			background: #F8F8F8;

			.left {
				padding-right: 24rpx;
				border-right: 1px solid #EDEDED;
			}
		}
	}

	.red {
		color: #FF1C1C;
	}
</style>