<template>
	<view class="">
		<up-popup :show="show" mode="bottom">
			<view class="">
				<view class="top u-flex u-row-between">
					<text class="font-bold u-font-32 color-333">{{ title }}</text>
					<up-icon size="18" name="close" @click="show = false"></up-icon>
				</view>
				<scroll-view ref="couponScroll" :scroll-y="true" style="max-height: 50vh" @scroll="scroll" :scroll-top="scrollTop">
					<view v-for="(item, index) in list" :key="index" class="item" @click="itemClick(item)" :class="[selGoods && selGoods.id == item.id ? 'selected' : '']">
						<view class="u-flex u-row-between">
							<view class="u-flex gap-20">
								<!-- <view class="u-flex" @click.stop="preview(item)">
                  <up-image
                    :src="item.coverImg"
                    width="80rpx"
                    height="80rpx"
                  ></up-image>
                </view> -->

								<text class="u-font-32 color-333">{{ item.title }}</text>
							</view>
							<text class="u-font-32 color-red u-p-l-30"></text>
						</view>
					</view>
					<up-empty v-if="list.length == 0" class="u-p-30" text="暂无数据"></up-empty>
				</scroll-view>
				<view class="bottom">
					<view class="btn cancel" @click="close">{{ cancelText }}</view>
					<view class="btn success" @click="confirm">{{ confirmText }}</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
const modelValue = defineModel({
	type: String,
	default: ''
});
const show = defineModel('show', {
	type: String,
	default: ''
});
const couponName = defineModel('couponName', {
	type: String,
	default: ''
});

const props = defineProps({
	title: {
		type: String,
		default: '选择优惠券'
	},
	confirmText: {
		type: String,
		default: '确认'
	},
	cancelText: {
		type: String,
		default: '取消'
	},
	list: {
		type: Array,
		default: () => []
	}
});

const selGoods = ref('');
function itemClick(item) {
	if (selGoods.value && selGoods.value.id == item.id) {
		selGoods.value = '';
		return;
	}
	selGoods.value = item;
}

const scrollTop = ref(0);
function scroll(e) {
	scrollTop.value = e.detail.scrollTop;
}
function preview(item) {
	uni.previewImage({
		urls: item.images || [item.coverImg]
	});
}
watch(
	() => modelValue.value,
	(newVal, oldVal) => {
		console.log(newVal, oldVal);
		selGoods.value = props.list.find((item) => item.id == newVal);
		console.log(selGoods.value);
		if (selGoods.value) {
			couponName.value = selGoods.value.title;
		}
	}
);

watch(
	() => props.list.length,
	(newVal, oldVal) => {
		selGoods.value = props.list.find((item) => item.id == modelValue.value);
		console.log(selGoods.value);
		if (selGoods.value) {
			modelValue.value = selGoods.value.id;
			couponName.value = selGoods.value.title;
		}
	}
);

function close() {
	show.value = false;
}

const emit = defineEmits(['confirm']);
function confirm() {
	if (!selGoods.value) {
		uni.showToast({
			title: '请选择优惠券',
			icon: 'none'
		});
		return;
	}
	modelValue.value = selGoods.value.id;
	show.value = false;
	emit('confirm', selGoods.value);
}
</script>

<style lang="scss">
.popup-content {
	background: #fff;
	width: 640rpx;
	border-radius: 18rpx;
}
.top {
	padding: 40rpx 48rpx;
	border-bottom: 1px solid #d9d9d9;
}
.bottom {
	padding: 48rpx 52rpx;
	display: flex;
	justify-content: space-between;
	border-top: 1px solid #d9d9d9;
	gap: 50rpx;
	.btn {
		flex: 1;
		text-align: center;
		padding: 18rpx 60rpx;
		border-radius: 100rpx;
		font-size: 32rpx;
		border: 2rpx solid transparent;
		&.success {
			background-color: $my-main-color;
			color: #fff;
		}
		&.cancel {
			border-color: #d9d9d9;
			box-shadow: 0 4rpx 0 0 #00000005;
		}
	}
}
.item {
	padding: 10rpx 30rpx;
	border: 1px solid #d9d9d9;
	margin: 10rpx;
	border-radius: 8rpx;
	transition: all 0.3s ease-in-out;
	box-shadow: 0 0 10px transparent;
	&.selected {
		border-color: $my-main-color;
		box-shadow: 0 0 10px $my-main-color;
	}
}
.choose-goods {
	display: flex;
	padding: 24rpx;
	align-items: center;
	border-radius: 8rpx;
	border: 2rpx solid #d9d9d9;
	background: #fff;
	font-size: 28rpx;
	font-weight: 400;
}
</style>
