<template>
	<view class="klp-actual-warehouse-picker">
		<!-- 输入框触发器 - 全部修复：阻止冒泡+固定右侧按钮+文字颜色差异化 -->
		<view class="picker-input" @click="openPopup">
		  <!-- 文本区域：未选择=浅灰色(占位色)  选中=深灰色(内容色) -->
		  <span class="picker-text" :class="{selected: selectedNode.actualWarehouseCode}">
		    {{ selectedNode.actualWarehouseCode || '请选择真实库区' }}
		  </span>
		  <!-- ✅ 终极防冒泡：原生view包裹图标 + stop.prevent 双重阻断 + 绝对定位固定右侧 -->
		  <view class="clear-btn-wrap" v-show="selectedNode.actualWarehouseCode" @click.stop.prevent="handleClear">
		    <uni-icons type="clear" size="24" color="#999"></uni-icons>
		  </view>
		</view>

		<!-- uni-popup 原生组件 纯属性使用 无任何样式 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff" :mask-click="true" @mask-click="closePopup">
			<!-- ✅ 弹窗内部根容器 承载所有样式 固定高度核心 -->
			<view class="popup-inner-container">
				<!-- 弹窗头部标题 -->
				<view class="popup-header">选择实际库区</view>

				<!-- 第一层横向滚动tab -->
				<scroll-view scroll-x class="tab-scroll-view" scroll-with-animation>
					<view class="tab-item-wrap">
						<view class="tab-item" :class="{active: activeFirstId === item.actualWarehouseId}"
							@click="handleFirstTabClick(item)" v-for="item in treeData" :key="item.actualWarehouseId">
							{{ item.actualWarehouseName }}
						</view>
					</view>
				</scroll-view>

				<!-- 第二层横向滚动tab，点选第一层tab后才出现 -->
				<scroll-view v-if="activeFirstId" scroll-x class="tab-scroll-view tab-second" scroll-with-animation>
					<view class="tab-item-wrap">
						<view class="tab-item" :class="{active: activeSecondId === item.actualWarehouseId}"
							@click="handleSecondTabClick(item)" v-for="item in secondLevelList" :key="item.actualWarehouseId">
							{{ item.actualWarehouseName }}
						</view>
					</view>
				</scroll-view>

				<!-- ✅✅✅ 核心修改：筛选框抽离出来 独立节点 固定置顶 永不滚动 -->
				<view class="search-box">
					<uni-icons type="search" size="24" color="#999"></uni-icons>
					<input type="text" v-model="searchKeyword" placeholder="输入编码搜索仓库" class="search-input"
						placeholder-class="search-placeholder" />
					<uni-icons v-if="searchKeyword" type="clear" size="24" color="#999" class="clear-icon"
						@click="searchKeyword = ''"></uni-icons>
				</view>

				<!-- ✅✅✅ 仅这个区域滚动：纯数据列表区 -->
				<view class="select-scroll-content">
					<!-- 加载中状态 -->
					<view class="loading" v-if="loading">加载中...</view>

					<!-- 情况1：只选中第一层 → 展示筛选后的二级数据 -->
					<view v-else-if="activeFirstId && !activeSecondId" class="select-list">
						<view class="select-item" @click="handleSelectSecondItem(item)" v-for="item in filterSecondList"
							:key="item.actualWarehouseId">
							{{ item.name }}
							<text class="code">{{ item.actualWarehouseCode }}</text>
						</view>
					</view>

					<!-- 情况2：选中第二层 → 展示筛选后的三级数据 -->
					<view v-else-if="activeSecondId" class="select-list">
						<view class="select-item" @click="handleSelectThirdItem(item)" v-for="item in filterThirdList"
							:key="item.actualWarehouseId">
							{{ item.name }}
							<text class="code">{{ item.actualWarehouseCode }}</text>
						</view>
					</view>

					<!-- 空数据展示 -->
					<view class="empty" v-else-if="showEmpty">暂无仓库数据</view>
					<!-- 筛选后无数据的兜底提示 -->
					<view class="empty"
						v-else-if="searchKeyword && (filterSecondList.length === 0 && filterThirdList.length === 0)">暂无匹配的仓库编码
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		treeActualWarehouseTwoLevel,
		listActualWarehouse
	} from '@/api/wms/actualWarehouse.js'

	export default {
		name: "klp-actual-warehouse-picker",
		props: {
			showEmpty: {
				default: false,
				type: Boolean
			},
			value: {
				default: undefined,
			}
		},
		data() {
			return {
				treeData: [],
				secondLevelList: [],
				thirdLevelList: [],
				selectedNode: {},
				activeFirstId: '',
				activeSecondId: '',
				loading: false,
				searchKeyword: '' // 筛选关键词
			};
		},
		computed: {
			// 完美双向绑定
			innerValue: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit('input', val);
					this.$emit('change', this.selectedNode);
				}
			},
			// ✅ 精准匹配：只做 actualWarehouseCode 仓库编码的模糊筛选（纯编码匹配，无名称）
			filterSecondList() {
				if (!this.searchKeyword) return this.secondLevelList
				const keyword = this.searchKeyword.trim().toLowerCase()
				return this.secondLevelList.filter(item => {
					const code = item.actualWarehouseCode?.toLowerCase() || ''
					return code.includes(keyword)
				})
			},
			// ✅ 精准匹配：只做 actualWarehouseCode 仓库编码的模糊筛选（纯编码匹配，无名称）
			filterThirdList() {
				if (!this.searchKeyword) return this.thirdLevelList
				const keyword = this.searchKeyword.trim().toLowerCase()
				return this.thirdLevelList.filter(item => {
					const code = item.actualWarehouseCode?.toLowerCase() || ''
					return code.includes(keyword)
				})
			}
		},
		created() {
			this.getTwoLevelData()
		},
		methods: {
			async getTwoLevelData() {
				try {
					this.loading = true
					const res = await treeActualWarehouseTwoLevel()
					this.treeData = res.data || []
				} catch (err) {
					uni.showToast({
						title: '加载仓库数据失败',
						icon: 'none'
					})
					console.error('仓库数据加载异常：', err)
				} finally {
					this.loading = false
				}
			},
			// ✅ 新增：清空选中的仓库数据 + 重置所有状态
			handleClear() {
			  // 1. 清空选中的仓库节点数据
			  this.selectedNode = {}
			  // 2. 双向绑定同步清空，父组件v-model能拿到空值
			  this.innerValue = undefined
			  // 3. 重置一级/二级选中的tab id
			  this.activeFirstId = ''
			  this.activeSecondId = ''
			  // 4. 清空二级、三级仓库列表数据
			  this.secondLevelList = []
			  this.thirdLevelList = []
			  // 5. 清空搜索关键词
			  this.searchKeyword = ''
			  // 可选：清空成功的轻提示，和你原有提示风格一致
			  uni.showToast({
			    title: '已清空选择',
			    icon: 'none',
			    duration: 1200
			  })
			},
			openPopup() {
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
				this.searchKeyword = ''
			},
			handleFirstTabClick(item) {
				this.activeFirstId = item.actualWarehouseId
				this.activeSecondId = ''
				this.thirdLevelList = []
				this.searchKeyword = ''
				this.secondLevelList = item.children || []
			},
			async handleSecondTabClick(item) {
				this.activeSecondId = item.actualWarehouseId
				this.thirdLevelList = []
				this.searchKeyword = ''
				try {
					this.loading = true
					const res = await listActualWarehouse({
						parentId: item.actualWarehouseId
					})
					this.thirdLevelList = res.data || []
				} catch (err) {
					uni.showToast({
						title: '加载库区数据失败',
						icon: 'none'
					})
					console.error('三级仓库加载异常：', err)
				} finally {
					this.loading = false
				}
			},
			handleSelectSecondItem(item) {
				this.selectedNode = item
				this.innerValue = item.actualWarehouseId
				this.closePopup()
			},
			handleSelectThirdItem(item) {
				this.selectedNode = item
				this.innerValue = item.actualWarehouseId
				this.closePopup()
			}
		}
	}
</script>

<style scoped lang="scss">
	.klp-actual-warehouse-picker {
		width: 100%;
		box-sizing: border-box;
	}

	// 输入框触发器样式 - 全部优化：父容器相对定位 + 文本颜色区分 + 按钮绝对定位固定右侧
	.picker-input {
	  width: 100%;
	  height: 88rpx;
	  line-height: 88rpx;
	  padding: 0 30rpx;
	  // ✅ 给右侧清除按钮预留空间，防止文本和按钮重叠
	  padding-right: 70rpx;
	  border: 1px solid #e5e5e5;
	  background-color: #f8f9fa;
	  border-radius: 12rpx;
	  font-size: 28rpx;
	  box-sizing: border-box;
	  // ✅ 关键：父容器相对定位，为子元素绝对定位做铺垫
	  position: relative;
	
	  // ✅ 文本颜色差异化核心样式
	  .picker-text {
	    // 未选择仓库 - 占位文本颜色（浅灰色，placeholder色）
	    color: #999;
	    &.selected {
	      // 选中仓库后 - 内容文本颜色（深灰色，主色）
	      color: #333;
	    }
	  }
	
	  // ✅ 清除按钮：绝对定位 死死固定在输入框最右侧 永不偏移
	  .clear-btn-wrap {
	    position: absolute;
	    right: 20rpx; // 距离右侧固定间距
	    top: 50%;
	    transform: translateY(-50%); // 垂直居中完美对齐
	    width: 40rpx;
	    height: 40rpx;
	    border-radius: 50%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    // 按钮点击按压反馈，和你原有风格一致
	    &:active {
	      background-color: #e5e5e5;
	    }
	  }
	}

	// ✅ 弹窗内部根容器 - 固定高度核心 样式100%生效
	.popup-inner-container {
		width: 100%;
		height: 80vh; // 弹窗固定高度，适配所有手机
		// max-height: 900rpx;  // 大屏高度上限，防止过高
		overflow: hidden; // 禁止整体滚动
		display: flex;
		flex-direction: column; // 垂直布局核心
	}

	// 弹窗头部标题 - 固定不滚动
	.popup-header {
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		border-bottom: 1px solid #f5f5f5;
		flex-shrink: 0; // 固定高度 不被压缩
	}

	// 横向滚动tab容器 - 固定不滚动
	.tab-scroll-view {
		width: 100%;
		white-space: nowrap;
		padding: 20rpx 0;
		border-bottom: 1px solid #f5f5f5;
		flex-shrink: 0; // 固定高度 不被压缩

		.tab-item-wrap {
			display: inline-block;
			padding: 0 20rpx;
		}

		.tab-item {
			display: inline-block;
			padding: 12rpx 30rpx;
			margin: 0 10rpx;
			font-size: 28rpx;
			border-radius: 20rpx;
			color: #666;

			&.active {
				background: #007aff;
				color: #fff;
			}
		}
	}

	// 二级tab区分隔线
	.tab-second {
		border-top: 1px solid #f5f5f5;
	}

	// ✅✅✅ 筛选框样式 - 固定置顶 永不滚动 核心样式
	.search-box {
		display: flex;
		align-items: center;
		padding: 16rpx 30rpx;
		margin: 10rpx 20rpx 0;
		background: #f8f8f8;
		border-radius: 30rpx;
		flex-shrink: 0; // 关键：固定高度 不参与滚动 不被压缩

		.search-input {
			flex: 1;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 26rpx;
			color: #333;
			margin: 0 10rpx;
		}

		.search-placeholder {
			font-size: 26rpx;
			color: #999;
		}

		.clear-icon {
			padding: 0 8rpx;
		}
	}

	// ✅✅✅ 唯一滚动区域：纯数据列表区
	.select-scroll-content {
		flex: 1; // 占满弹窗剩余所有高度
		overflow-y: auto; // 仅此处滚动 核心！
		padding: 10rpx 0;
		box-sizing: border-box;

		.select-list {
			.select-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				font-size: 40rpx;
				border-bottom: 1px solid #f5f5f5; 

				&:active {
					background-color: #f5f5f5;
				}

				.code {
					color: #000;
					font-size: 30rpx;
				}
			}
		}

		.loading,
		.empty {
			text-align: center;
			padding: 50rpx 0;
			font-size: 28rpx;
			color: #999;
		}
	}
</style>