<template>
	<view class="store-picker">
		<view class="picker-row" @click="openPicker">
			<text class="label">所属诊所</text>
			<text class="value" :class="{ placeholder: !selectedLabel }">{{ selectedLabel || '请选择诊所' }}</text>
			<u-icon name="arrow-right" size="28" color="#999" />
		</view>
		<u-popup v-model="visible" mode="bottom" border-radius="24" height="70%">
			<view class="popup-inner">
				<view class="popup-title">选择诊所</view>
				<input class="search-input" v-model="keyword" placeholder="搜索诊所名称" @input="onSearch" />
				<scroll-view scroll-y class="option-list">
					<view
						v-for="item in options"
						:key="item.id"
						class="option-item"
						@click="select(item)"
					>
						<text>{{ item.name }}</text>
						<text v-if="item.position" class="sub">{{ item.position }}</text>
					</view>
					<view v-if="!loading && !options.length" class="empty">暂无诊所</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'StoreSearchPicker',
	props: {
		value: { type: [Number, String], default: 0 },
		api: { type: Object, required: true },
	},
	data() {
		return {
			visible: false,
			keyword: '',
			options: [],
			loading: false,
			selectedLabel: '',
			searchTimer: null,
		};
	},
	methods: {
		openPicker() {
			this.visible = true;
			this.fetchOptions('');
		},
		onSearch() {
			if (this.searchTimer) clearTimeout(this.searchTimer);
			this.searchTimer = setTimeout(() => this.fetchOptions(this.keyword.trim()), 300);
		},
		async fetchOptions(keyword) {
			this.loading = true;
			try {
				const wrap = await this.api.getPlatformStoreOptions(keyword);
				this.options = (wrap && wrap.ok && wrap.data) ? wrap.data : [];
			} finally {
				this.loading = false;
			}
		},
		select(item) {
			this.selectedLabel = item.position ? `${item.name}（${item.position}）` : item.name;
			this.$emit('input', item.id);
			this.visible = false;
		},
	},
};
</script>

<style lang="scss" scoped>
.picker-row {
	display: flex; align-items: center; padding: 24rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}
.label { width: 180rpx; font-size: 28rpx; color: #333; }
.value { flex: 1; font-size: 28rpx; text-align: right; margin-right: 8rpx; }
.placeholder { color: #bbb; }
.popup-inner { padding: 32rpx; height: 100%; display: flex; flex-direction: column; }
.popup-title { font-size: 32rpx; font-weight: 600; margin-bottom: 24rpx; }
.search-input {
	background: #f5f5f5; border-radius: 12rpx; padding: 16rpx 24rpx; margin-bottom: 16rpx;
}
.option-list { flex: 1; }
.option-item {
	padding: 24rpx 0; border-bottom: 1rpx solid #f0f0f0;
	display: flex; flex-direction: column;
}
.sub { font-size: 24rpx; color: #999; margin-top: 8rpx; }
.empty { text-align: center; color: #999; padding: 60rpx 0; }
</style>
