`<template>
<fui-bottom-popup :show="show" @close="closePopup">
<view class="fui-custom__wrap">
<fui-index-list :listData="lists" custom @click="toArea">
<template v-slot:item="{ model, idx, index }">
<fui-list-cell>
{{ model.text }}
</fui-list-cell>
</template>
</fui-index-list>
</view>
</fui-bottom-popup>
</template>

export default {
	name: "areaList",
	data() {
		return {
			lists: [],
			show: false
		};
	},
	mounted() {
		this.getAreaList();
	},
	methods: {
		toArea(e) {
			this.show = false
			this.$emit("upArea", e.text)
		},
		getAreaList() {
			areaList().then((res) => {
				this.processGWList(res.data);
			}).catch((err) => {
				console.log(err)
			})
		},
		processGWList(data) {
			const GWList = [];
			data.forEach((item) => {
				const initial = this.getInitial(item.name);
				let existingGroup = GWList.find((group) => group.letter === initial);

				if (!existingGroup) {
					existingGroup = {
						letter: initial,
						descr: initial,
						data: []
					};
					GWList.push(existingGroup);
				}
				existingGroup.data.push({
					text: item.name,
					avgScore: item.avgScore,
					src: '',
					checked: false,
					subText: ''
				});
			});
			GWList.sort((a, b) => a.letter.localeCompare(b.letter));
			this.lists = GWList;
		},
		getInitial(chinese) {
			return this.getPinyin(chinese)[0].toUpperCase();
		},
		getPinyin(chinese) {
			return pinyin(chinese, {
				toneType: 'none'
			}).toUpperCase();
		},
		showPopup(type) {
			this.show = true
		},
		closePopup(type) {
			this.show = false
		}
	}
};

</script>

.fui-custom__wrap {
	width: 100%;
	height: 90vh; // 设置为100%
	display: flex;
	flex-direction: column; // 确保子元素纵向排列
	position: relative; // 设置为相对定位，确保绝对定位的子元素能相对于此元素定位
	top: 50px;
}

// .fui-index-list {
// 	flex: 1; // 使索引列表占满剩余空间
// 	overflow-y: auto; // 添加滚动条
// 	width: 100%;
// }

</style>`