<template>
	<view v-if="show" class="modal-overlay" @click="closeModal">
		<view class="modal-content" @click.stop>
			<view class="modal-header">
				<text class="modal-title">{{ title }}</text>
				<text class="modal-close" @click="closeModal">×</text>
			</view>
			<view class="modal-body">
				<!-- 跨店开关 -->
				<view class="cross-store-toggle" v-if="showCrossStore">
					<u-switch 
						:value="isCrossStore" 
						@change="onCrossStoreChange"
						activeColor="#43e97b"
						inactiveColor="#c8e6c9"
					/>
					<text class="toggle-text">跨店获取数据</text>
				</view>
				<!-- 搜索框 -->
				<view class="search-container">
					<u-input 
						v-model="searchKeyword"
						placeholder="请输入搜索内容"
						@input="handleSearch"
						class="search-input"
						:clearable="true"
					/>
				</view>
				
				<!-- 选项列表 -->
				<scroll-view 
					scroll-y 
					class="option-list"
					:style="{ maxHeight: '600rpx' }"
					@scrolltolower="loadMore"
					:refresher-enabled="true"
					:refresher-triggered="refreshing"
					@refresherrefresh="refresh"
				>
					<view 
						v-for="(option, index) in options" 
						:key="index"
						class="option-item"
						:class="{ selected: selectedOption && selectedOption.value === option.value }"
						@click="selectOption(option)"
					>
						<text class="option-label">{{ option.label }}</text>
						<text v-if="option.subtitle" class="option-subtitle">{{ option.subtitle }}</text>
					</view>
					
					<!-- 加载更多 -->
					<view v-if="loading" class="loading-item">
						<u-loading-icon mode="circle" size="24"></u-loading-icon>
						<text class="loading-text">加载中...</text>
					</view>
					
					<!-- 没有更多数据 -->
					<view v-if="!hasMore && options.length > 0" class="no-more-item">
						<text class="no-more-text">没有更多数据了</text>
					</view>
					
					<!-- 空状态 -->
					<view v-if="options.length === 0 && !loading" class="empty-options">
						<text class="empty-text">{{ searchKeyword ? '没有找到相关数据' : '暂无数据' }}</text>
					</view>
				</scroll-view>
			</view>
			<view class="modal-footer">
				<button 
					@click="closeModal"
					class="modal-btn cancel-btn"
				>
					取消
				</button>
				<button 
					@click="confirmSelection"
					class="modal-btn confirm-btn"
					:disabled="!selectedOption"
				>
					确定
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'SearchSelectModal',
		props: {
			show: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: '请选择'
			},
			options: {
				type: Array,
				default: () => []
			},
			loading: {
				type: Boolean,
				default: false
			},
			hasMore: {
				type: Boolean,
				default: true
			},
			pageSize: {
				type: Number,
				default: 20
			},
			searchParam: {
				type: String,
				default: ''
			},
			showCrossStore: {
				type: Boolean,
				default: false
			},
			isCrossStore: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				searchKeyword: '',
				selectedOption: null,
				currentPage: 1,
				refreshing: false
			}
		},
		watch: {
			show(newVal) {
				if (newVal) {
					this.resetModal();
				}
			}
		},
		methods: {
			// 重置弹窗状态
			resetModal() {
				this.searchKeyword = '';
				this.selectedOption = null;
				this.currentPage = 1;
			},
			
			// 处理搜索
			handleSearch() {
				console.log('组件内搜索触发:', this.searchKeyword);
				this.currentPage = 1;
				// 触发父组件的搜索事件
				this.$emit('search', this.searchKeyword);
			},
			
			// 选择选项
			selectOption(option) {
				this.selectedOption = option;
			},
			
			// 确认选择
			confirmSelection() {
				if (this.selectedOption) {
					this.$emit('confirm', this.selectedOption);
					this.closeModal();
				} else {
					uni.showToast({
						title: '请先选择一个选项',
						icon: 'none'
					});
				}
			},
			
			// 关闭弹窗
			closeModal() {
				this.$emit('close');
			},
			
			// 加载更多
			loadMore() {
				if (this.hasMore && !this.loading) {
					this.currentPage++;
					this.$emit('load-more', this.currentPage);
				}
			},
			
			// 刷新
			refresh() {
				this.refreshing = true;
				this.currentPage = 1;
				this.$emit('refresh');
				setTimeout(() => {
					this.refreshing = false;
				}, 1000);
			},
			
			// 跨店开关变化
			onCrossStoreChange(value) {
				this.$emit('cross-store-change', value);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
		padding: 40rpx;
	}
	
	.modal-content {
		width: 600rpx;
		// max-height: 80vh;
		background: #fff;
		border-radius: 36rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
	}
	
	.modal-header {
		background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
		padding: 40rpx;
		text-align: center;
		position: relative;
	}
	
	.modal-close {
		position: absolute;
		right: 40rpx;
		top: 50%;
		transform: translateY(-50%);
		color: #fff;
		font-size: 48rpx;
		font-weight: bold;
		cursor: pointer;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.modal-title {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
	}
	
	.modal-body {
		padding: 40rpx;
	}
	
	.cross-store-toggle {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-bottom: 24rpx;
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #e8f5e9;
	}

	.toggle-text {
		font-size: 28rpx;
		color: #388e3c;
		font-weight: 500;
	}

	.search-container {
		margin-bottom: 32rpx;
	}
	
	.search-input {
		width: 100%;
		background: #f9fff9;
		border: 3rpx solid #c8e6c9;
		border-radius: 20rpx;
		padding: 24rpx;
		font-size: 28rpx;
		color: #2e7d32;
        box-sizing: border-box;
	}
	
	.option-list {
		border: 2rpx solid #e0e0e0;
		border-radius: 16rpx;
		max-height: 600rpx;
	}
	
	.option-item {
		padding: 24rpx 32rpx;
		border-bottom: 2rpx solid #f0f0f0;
		transition: background 0.2s ease;
		cursor: pointer;
	}
	
	.option-item:hover {
		background: #f5f5f5;
	}
	
	.option-item:last-child {
		border-bottom: none;
	}
	
	.option-item.selected {
		background: #e8f5e9;
		color: #2e7d32;
		font-weight: bold;
	}
	
	.option-label {
		font-size: 28rpx;
		color: #333;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.option-subtitle {
		font-size: 24rpx;
		color: #666;
		display: block;
		word-break: break-all;
	}
	
	.loading-item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
		gap: 16rpx;
	}
	
	.loading-text {
		font-size: 28rpx;
		color: #666;
	}
	
	.no-more-item {
		text-align: center;
		padding: 40rpx;
	}
	
	.no-more-text {
		font-size: 24rpx;
		color: #999;
	}
	
	.empty-options {
		text-align: center;
		padding: 80rpx 40rpx;
	}
	
	.empty-text {
		color: #666;
		font-size: 28rpx;
	}
	
	.modal-footer {
		padding: 32rpx 40rpx;
		border-top: 2rpx solid #e0e0e0;
		display: flex;
		gap: 24rpx;
	}
	
	.modal-btn {
		flex: 1;
		padding: 20rpx 32rpx;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
	}
	
	/* 取消按钮样式 */
	.cancel-btn {
		background: #f5f5f5 !important;
		color: #666 !important;
		// border: 3rpx solid #ddd !important;
	}
	
	/* 确定按钮样式 */
	.confirm-btn {
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
		color: #fff !important;
		box-shadow: 0 4rpx 16rpx rgba(67, 233, 123, 0.3) !important;
		border: none !important;
	}
	
	/* 禁用状态 */
	.confirm-btn[disabled] {
		background: #e0e0e0 !important;
		color: #999 !important;
		box-shadow: none !important;
		// border: 3rpx solid #e0e0e0 !important;
	}
	
	/* 覆盖uview默认样式 */
	.modal-btn.u-button {
		background: inherit !important;
		color: inherit !important;
		border: inherit !important;
	}
	
	/* 更具体的选择器 */
	.modal-footer .u-button--default {
		background: #f5f5f5 !important;
		color: #666 !important;
		border: 3rpx solid #ddd !important;
	}
	
	.modal-footer .u-button--primary {
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
		color: #fff !important;
		box-shadow: 0 4rpx 16rpx rgba(67, 233, 123, 0.3) !important;
		border: none !important;
	}
	
	@media (max-width: 750rpx) {
		.modal-content { width: 90vw; }
		.modal-body { padding: 32rpx; }
		.modal-footer { padding: 24rpx 32rpx; }
	}
</style>
