<template>
	<view class="container">
		<view class="header-wrap">
			<view class="search-wrap">
				<view class="input-wrap">
					<view class="icon left">
						<u-icon name="search" size="26"></u-icon>
					</view>
					<input v-model="querForm.searchValue" class="ipt left" type="text" placeholder="搜索" />
				</view>
				<view class="input-wrap" @click="show = true">
					<view class="icon right">
						<u-icon name="arrow-right" size="16"></u-icon>
					</view>
					<input v-model="querForm.shopId" class="ipt right" type="text" placeholder="请选择" disabled />
				</view>
			</view>
			<view class="status-wrap">
				<view
					class="item"
					:class="{ active: querForm.statusActiveIndex == index }"
					v-for="(item, index) in statusList"
					:key="item.value"
					@click="querForm.statusActiveIndex = index"
				>
					<text class="t">{{ item.label }}</text>
				</view>
				<view class="icon-wrap" :style="{ width: `${100 / statusList.length}%`, left: `${(100 / statusList.length) * querForm.statusActiveIndex}%` }">
					<image
						class="active-icon"
						src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAMCAYAAAB4MH11AAACKUlEQVR4AaRTS2sTURT+MpkxUzNtRpuYpBsrqbgQH6BYRHGllloQN+5cuNeV6MKfoj9BwYUgIsXHRqE+SluliFLbBqmENJNMMpMm87qecw1NglJse+HMPeee833nce8oIgpFq7wsGt/fCb9eFrtdfmNd1L+9Jc4Vog6E4jcqqM0/R+3zNOwv09jtshdfSx7mDJwKqAMfIvAAEaFVWkLgWjvOEbVdtNa+Epf4wxmFUNTkfqiDGUkqogDu8icKiKS9nQ9jnR8fqM5AwuJJE/G9JhRF05E8dAqIKeDlrsyiWVxg9f+Fum+uzsFZmtnEGIVxKHsGIFn1bAF6ZlQ6I28D9uIrmYSrkodbfETgw6GubZo9Yzk0kR4Fc7IuE8QUFebJKSTSB/kM4UYd1scnKL18QInm4Vk/6W6qiNoOwpZDuoX2elFWXHrzELW5Z+RzJVbPHca+09doIKq0ZQLW+C44iWbm2ZQSNMqozj5F5f1jWCSVGd4fwerstYUXCOplGcsfxponJqHS7Nlm2UyAWAza0AFkzt1A6uhFqEYaoHsR9BLCpg2vukZVr5IU4dV+yU7oRikkTrHDMI9PIHPhJrhQ9Kxugs6hkkhi8Mh5DI9flyCep6ImOt7uxnF6dgypYxMy1hg7S0/yH3FdSL+mpbIw6CVwVSNX7yM/eQfZS7eQu3wb+St3MTJ1D2nq1iicgZbK9YN7rL866PH1qfGBIWj0v/Do4rrR59vK+A0AAP//GfTndQAAAAZJREFUAwCu+SjIaSGpLwAAAABJRU5ErkJggg=="
					></image>
				</view>
			</view>
		</view>
		<view class="list-wrap">
			<view class="item" v-for="item in list.data" :key="item.id">
				<view class="top">
					<view class="icon"></view>
					<view class="info">
						<view class="view name">
							<text class="t">{{ item.title }}</text>
						</view>
						<view class="view time">
							<text class="t">有效期至：{{ item.startTime }}-{{ item.endTime }}</text>
						</view>
					</view>
					<view class="btn">
						<text class="t">去使用</text>
					</view>
				</view>
				<view class="btm">
					<view class="left">
						<text class="t">{{ item.remark }}</text>
					</view>
					<view class="right">
						<text class="t">查看详情</text>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="list.status"></u-loadmore>
		<u-popup :show="show" round="20" closeable @close="show = false">
			<view class="shoplist-popup">
				<view class="title">
					<text class="t">店铺列表</text>
				</view>
				<scroll-view class="popup-list" direction="vertical">
					<view class="item">
						<text class="t">我是店铺1111</text>
					</view>
					<view class="item">
						<text class="t">我是店铺2222</text>
					</view>
					<view class="item">
						<text class="t">我是店铺3333</text>
					</view>
					<view class="item">
						<text class="t">我是店铺4444</text>
					</view>
					<u-loadmore status="nomore"></u-loadmore>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { onLoad, onReady, onShow, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import { APIcouponfindByUserId, APIfindCoupon } from '@/common/api/member.js';

const show = ref(false);

const querForm = ref({
	searchValue: '',
	shopId: '',
	statusActiveIndex: 0
});

// 状态
const statusList = ref([
	{
		value: 1,
		label: '未使用',
		bg: '#333333',
		color: '#ffffff'
	},
	{
		value: 2,
		label: '已使用',
		bg: '#F8F8F8',
		color: '#999999'
	},
	{
		value: 3,
		label: '已失效',
		bg: '#F8F8F8',
		color: '#999999'
	}
]);

const list = reactive({
	page: 1,
	size: 10,
	status: 'nomore',
	data: [
		{
			id: 1,
			type: 2,
			fullAmount: 200,
			discountAmount: 15,
			title: '超值满减券',
			startTime: '2002.1.22',
			endTime: '2022.1.22',
			remark: '1、可适用门店：全部门店2、可适用商品：部分商品3、可使用类型：堂食4、可用时间段：全时段可用5、限量规则：每人限领3张，每日可最多使用3张6、同享规则：与限时折扣同享、与会员价同享7、其它说明：这里是后台配置内容'
		}
	]
});
</script>

<style>
page {
	background-color: #f7f7f7;
}
</style>
<style scoped lang="scss">
.container {
	padding: 238upx 28upx 28upx;
}
.header-wrap {
	width: 100%;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	padding: 28upx;
	.search-wrap {
		display: flex;
		gap: 28upx;
		.input-wrap {
			flex: 1;
			height: 70upx;
			border: 1px solid #ececec;
			border-radius: 8upx;
			position: relative;
			&:first-child {
				flex: 1.5;
			}
			.icon {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				&.left {
					left: 14upx;
				}
				&.right {
					right: 14upx;
				}
			}
			.ipt {
				width: 100%;
				height: 100%;
				&.left {
					padding-left: 68upx;
				}
				&.right {
					padding: 0 56upx 0 28upx;
				}
			}
		}
	}
	.status-wrap {
		display: flex;
		padding-top: 28upx;
		position: relative;
		.icon-wrap {
			height: 12upx;
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease-in-out;
			.active-icon {
				width: 24upx;
				height: 12upx;
				z-index: 9;
			}
		}
		.item {
			flex: 1;
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.t {
				font-size: 32upx;
				color: #666666;
				transition: all 0.3s ease-in-out 0.1s;
			}
			&.active {
				.t {
					color: #e3ad7f;
				}
			}
		}
	}
}
.list-wrap {
	padding-top: 28upx;
	.item {
		border-radius: 18upx;
		background-color: #fff;
		padding: 28upx;
		.top {
			display: flex;
			align-items: center;
			padding-bottom: 28upx;
			.icon {
				$size: 120upx;
				width: $size;
				height: $size;
				background-color: #f7f7f7;
				border-radius: 12upx;
			}
			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: 8upx;
				padding-left: 28upx;
				.view {
					flex: 1;
					&.name {
						font-size: 32upx;
						color: #333;
					}
					&.time {
						.t {
							font-size: 24upx;
							color: #999;
						}
					}
				}
			}
			.btn {
				width: 120upx;
				height: 48upx;
				border-radius: 48upx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #333;
				.t {
					font-size: 24upx;
					color: #fff;
				}
			}
		}
		.btm {
			display: flex;
			align-items: center;
			padding: 28upx 0 14upx;
			border-top: 1upx solid #f7f7f7;
			.left {
				flex: 1;
				height: 40upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				.t {
					font-size: 24upx;
					color: #999;
				}
			}
			.right {
				display: flex;
				align-items: center;
				padding-left: 28upx;
				.t {
					font-size: 24upx;
					color: #333;
				}
			}
		}
	}
}
.shoplist-popup {
	padding: 0 28upx 28upx;
	.title {
		padding: 28upx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		.t {
			font-size: 32upx;
			font-weight: bold;
			color: #333;
		}
	}
	.popup-list {
		height: 50vh;
		.item {
			height: 100upx;
			border-radius: 12upx;
			background-color: #f7f7f7;
			margin-bottom: 28upx;
			display: flex;
			align-items: center;
			padding: 28upx;
			.t {
				font-size: 28upx;
				color: #555;
			}
		}
	}
}
</style>
