<template>
	<view class="AreaSelect flex-start">
		<view class="selector" v-for="(province,index) in provinces" :key="index">
			<view class="item"
				:style="selectedProvince && provincestyle == index?'background: #fff;font-weight: bold;':''"
				@click="selectProvince(province,index)">
				{{ province.name }}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineEmits
	} from 'vue';
	import {
		cityData
	} from './cityData.js';
	const emits = defineEmits(['grouping']);
	// 省份列表
	const provinces = ref([{
		detail: [],
		dictId: 56,
		dictName: "category",
		isChild: null,
		name: "双人餐",
		value: "2"
	}, {
		detail: [],
		dictId: 56,
		dictName: "category",
		isChild: null,
		name: "双人餐",
		value: "2"
	}]);
	// 选中的省份
	const selectedProvince = ref(null);
	// 显示省份列表
	const showProvinceList = ref(true);

	// 切换省份列表显示状态
	const toggleProvinceList = () => {
		showProvinceList.value = !showProvinceList.value;
		// showCityList.value = false;
		// showDistrictList.value = false;
	};
	// 选择省份 选中状态
	const provincestyle = ref(null)
	// 选择省份
	const selectProvince = (province, index) => {
		selectedProvince.value = province;
		provincestyle.value = index
		emits('grouping', selectedProvince.value.name);
	};
</script>

<style scoped lang="scss">
	.AreaSelect {
		max-height: 60vh;
		border-radius: 0 0 20rpx 20rpx;
		align-items: flex-start;
		overflow: auto;

		.selector {
			position: relative;
			width: 100%;
			border-radius: 0 0 0 20rpx;

			.item {
				padding: 16rpx 24rpx;
				background: #f9f9f9;
			}
		}
	}
</style>