<template>
	<view>

		<view class="box" @click.stop="openPopup">
			<text class="u-font-28 color-999 u-p-r-16" v-if="!modelValue">请选择</text>
			<text class="u-font-28 color-333 u-p-r-16" v-else>{{returnLabel()}}</text>
			<view class="icon">
				<up-icon name="arrow-down" size="14" color="#999"></up-icon>
			</view>
			
		</view>
		<up-popup :show="show" placement="bottom" round="18rpx" closeOnClickOverlay @close="close">
			<view class="u-p-30">
				<view class="font-bold color-333 u-font-32">选择银行</view>
				<view class="u-m-t-24">
					<up-search v-model="keywords" @search="search" @change="search" @custom="search"
						@clear="search"></up-search>
				</view>
				<scroll-view scroll-with-animation :scroll-into-view="selid" class="scroll-view u-m-t-30"
					scroll-y="true" style="max-height :60vh;">
					<template v-if="list.length">
						<view class="u-m-b-10 u-flex item" v-for="item in list" :key="item.bankCode"
							@click="itemClick(item)" :id="'shop_'+item.bankCode"
							:class="{active:selItem&&selItem.bankCode==item.bankCode}">
							<view class="checkbox">
								<up-icon name="checkbox-mark" color="#fff"></up-icon>
							</view>
							<view class="u-flex-1">{{item.branchName}}</view>
						</view>
						<view class="u-p-20 u-flex u-row-center">
							<up-loadmore status="nomore"></up-loadmore>
						</view>
					</template>
					<template v-else>
						<template v-if="keywords">
							<up-empty  text="未搜索到相关支行"></up-empty>
						</template>
						<up-empty v-else text="暂无支行"></up-empty>
					</template>
				


				</scroll-view>
				<view class="u-flex gap-20 u-m-t-30">
					<view class="u-flex-1">
						<my-button type="default" @click="close">取消</my-button>
					</view>
					<view class="u-flex-1">
						<my-button type="primary" @click="submit">确定</my-button>
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>
<script setup>
	import {
		computed,
		onMounted,
		reactive,
		ref,
		watch
	} from 'vue';
	import {
		bankBranchList
	} from '@/http/api/order/entryManager.js';

	const customStyle = ref({
		marginRight: '20px'
	});

	const show = ref(false);
	const modelValue = defineModel();
	const bankBranchName = defineModel('bankBranchName', {
		default: '',
	});

	const selid = ref('')

	function returnLabel() {
		const findShop = list.value.find(v => v.bankCode == modelValue.value)
		return findShop ? findShop.branchName : ''
	}
	const selItem = ref(null)

	function itemClick(data) {
		selItem.value = data
	}

	function returnbranchName(bankCode) {
		const item = list.value.find((v) => v.bankCode == bankCode);
		return item?.branchName || '';
	}

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

	function submit() {
		modelValue.value = selItem.value.bankCode
		bankBranchName.value = selItem.value.branchName
		show.value = false;
	}

	const keywords = ref('')

	function search() {
		list.value = matchStr(allList, keywords.value)
	}


	/**
	 * 模糊匹配对象数组中每个对象的全部属性，按匹配度由高到低排序返回，未匹配到的对象直接过滤（不返回）
	 * @param {Array<Object>} arr - 待匹配的对象数组（必传，非数组返回空数组）
	 * @param {string} str - 待匹配的目标字符串（空字符串返回原数组浅拷贝）
	 * @returns {Array<Object>} 按匹配度降序排序后的对象数组（仅包含匹配项，不修改原数组）
	 */
	function matchStr(arr, str) {
		// ------------- 步骤1：严格边界处理，避免运行报错 -------------
		if (!Array.isArray(arr)) {
			console.warn('入参arr必须是对象数组');
			return [];
		}
		const targetStr = String(str || '').trim().toLowerCase();
		if (!targetStr) {
			return [...arr]; // 空字符串返回原数组浅拷贝（保持原有逻辑）
		}

		// ------------- 步骤2：定义匹配度得分规则 -------------
		const getSinglePropScore = (propValue) => {
			const propStr = String(propValue).trim().toLowerCase();
			if (propStr === targetStr) return 3;
			if (propStr.startsWith(targetStr)) return 2;
			if (propStr.includes(targetStr)) return 1;
			return 0;
		};

		// ------------- 步骤3：遍历数组，计算每个对象的总匹配度得分 -------------
		const arrWithScore = arr.map(item => {
			if (typeof item !== 'object' || item === null) {
				return {
					originItem: item,
					totalScore: 0
				};
			}

			let totalScore = 0;
			Object.keys(item).forEach(propKey => {
				const propValue = item[propKey];
				totalScore += getSinglePropScore(propValue);
			});

			return {
				originItem: item,
				totalScore: totalScore
			};
		});

		// ------------- 步骤4：先过滤（仅保留得分>0的项），再排序，最后返回原对象格式 -------------
		return arrWithScore
			.filter(item => item.totalScore > 0) // 核心新增：过滤未匹配项（总得分=0的对象不保留）
			.sort((a, b) => b.totalScore - a.totalScore) // 仅对匹配项进行降序排序
			.map(item => item.originItem); // 剔除得分字段，返回原对象格式
	}

	const list = ref([]);

	function openPopup() {
		selid.value = 'shop_' + modelValue.value
		const findShop = list.value.find(v => v.bankCode == modelValue.value)
		selItem.value=findShop?findShop:null
		show.value = true;

	}

	// --------------- 核心新增：节流函数实现 ---------------
	/**
	 * 节流函数：限制函数在指定时间内只触发一次
	 * @param {Function} fn - 要节流的函数
	 * @param {number} delay - 节流延迟时间（毫秒）
	 * @returns {Function} 节流后的函数
	 */
	function throttle(fn, delay = 300) {
		let timer = null; // 定时器标识
		return function(...args) {
			// 如果已有定时器，直接返回（未到触发时间）
			if (timer) return;
			// 执行函数并设置新定时器
			fn.apply(this, args);
			timer = setTimeout(() => {
				clearTimeout(timer);
				timer = null;
			}, delay);
		};
	}

	// --------------- 核心修改：创建节流后的search方法 ---------------
	// 300ms内只触发一次search，可根据需求调整delay值（如500ms）
	const throttledSearch = throttle(search, 300);

	// --------------- 改造bankNameChange：调用节流后的搜索 ---------------
	function bankNameChange() {
		// 输入变化时，调用节流后的搜索方法
		throttledSearch();
	}

	const props = defineProps({
		query: {
			type: Object,
			default: () => ({
				province: '',
				city: '',
				instId: '',
			})
		}
	})


	watch(() => show.value, (newval) => {
		init()
	})

	let allList = []
	async function init() {
		const res = await bankBranchList(props.query);
		list.value = res
		allList = res
	}
</script>
<style lang="scss">
	.box {
		border-radius: 8upx;
		display: flex;
		flex-direction: row;
		align-items: top;
		flex-wrap: wrap;
		padding: 20rpx 40rpx 20rpx 24rpx;
		border: 2rpx solid #e5e5e5;
		position: relative;

		.icon {
			position: absolute;
			top: 50%;
			right: 24rpx;
			transform: translateY(-50%);
		}
	}

	.shop-item {
		padding: 4rpx 8rpx 4rpx 16rpx;
		border-radius: 4rpx;
		border: 2rpx solid #f0f0f0;
		background-color: #f5f5f5;
		margin-bottom: 16rpx;
		margin-left: 16rpx;
	}

	.scroll-view {
		.item {
			border: 1px solid #eee;
			padding: 20rpx;
			border-radius: 12rpx;

			&.active {
				border-color: $my-main-color;
			}

		}
	}

	.checkbox {
		margin-right: 10rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 6rpx;
		border: 1px solid #999;

	}

	.item {
		&.active {
			.checkbox {
				background-color: $my-main-color;
				border-color: $my-main-color;
			}
		}
	}
</style>