<template>
	<view class="wa-attr">
		<view class="wa-attr__label">
			<text class="wa-attr__label-row">
				<text v-if="required" class="wa-attr__required">*</text>
				<text>{{ title }}</text>
			</text>
			<text v-if="list.length > perRow * 2" class="wa-attr__toggle" @tap="expanded = !expanded">{{ expanded ? '收起' : '展开更多' }}<text v-if="!expanded" class="wa-attr__count">（共 {{ list.length }} 项）</text></text>
		</view>
		<view class="wa-btn-group" :class="{ 'wa-btn-group--fold': !expanded && list.length > perRow * 2 }">
			<view
				v-for="entry in displayItems"
				:key="entry.index"
				class="wa-btn"
				:class="{ 'wa-btn--on': entry.index === pickIndex }"
				@tap="handlePick(entry.index)"
			>
				{{ entry.item[field] }}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		title: { type: String, default: '' },
		list: { type: Array, default: () => [] },
		field: { type: String, default: 'descripts' },
		pickIndex: { type: Number, default: -1 },
		required: { type: Boolean, default: false }
	},
	data() {
		return {
			expanded: false,
			perRow: 3
		};
	},
	computed: {
		// Only reorder the rendered chips; the original index is still emitted for dictionary ID lookup.
		displayItems() {
			const entries = this.list.map((item, index) => ({ item, index }));
			if (this.pickIndex < 0 || this.pickIndex >= entries.length) return entries;
			const selected = entries.splice(this.pickIndex, 1)[0];
			return [selected, ...entries];
		}
	},
	methods: {
		handlePick(index) {
			this.expanded = false;
			this.$emit('pick', index);
		}
	},
	watch: {
		list() {
			this.expanded = false;
		}
	}
};
</script>

<style scoped>
.wa-attr {
	padding: 16rpx 0;
	border-bottom: 1rpx solid #f3f4f6;
}
.wa-attr__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 24rpx;
	color: #6b7280;
	margin-bottom: 12rpx;
}
.wa-attr__label-row {
	display: inline-flex;
	align-items: center;
}
.wa-attr__required {
	color: #ef4444;
	font-size: 24rpx;
	margin-right: 4rpx;
	line-height: 1;
}
.wa-attr__toggle {
	color: #1890ff;
	font-size: 22rpx;
}
.wa-attr__count {
	color: #9ca3af;
	font-size: 22rpx;
	margin-left: 4rpx;
}
.wa-btn-group {
	display: flex;
	flex-wrap: wrap;
}
.wa-btn-group--fold {
	max-height: 156rpx; /* 折叠时仅显示约 5 个（约 1.3 行），配合展开更多 */
	overflow: hidden;
}
.wa-btn {
	padding: 10rpx 24rpx;
	margin: 0 16rpx 16rpx 0;
	background: #f3f4f6;
	color: #374151;
	font-size: 24rpx;
	border-radius: 12rpx;
	line-height: 1.2;
	max-width: 100%;
}
.wa-btn--on {
	background: #1890ff;
	color: #fff;
}

/* 紧凑展示：折叠状态固定展示约两行。 */
.wa-attr {
	padding: 12rpx 0;
}
.wa-attr__label {
	font-size: 23rpx;
	margin-bottom: 8rpx;
}
.wa-attr__required {
	font-size: 23rpx;
}
.wa-attr__toggle,
.wa-attr__count {
	font-size: 21rpx;
}
.wa-btn-group--fold {
	max-height: 112rpx;
}
.wa-btn {
	padding: 8rpx 18rpx;
	margin: 0 12rpx 12rpx 0;
	font-size: 23rpx;
	border-radius: 10rpx;
}
.wa-btn--on {
	box-shadow: 0 4rpx 10rpx rgba(24, 144, 255, 0.18);
}
</style>
