<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar title="选择缴费单位" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
		</uni-nav-bar>

		<!-- 表单区域 -->
		<scroll-view class="page" scroll-y="true">
			<!-- 城市 + 搜索 -->
			<view class="search-section">
				<!-- 城市选择器 -->
				<uni-data-picker placeholder="选择省市" popup-title="选择省市" :localdata="alladdress"
					field="code as value, value as text" orderby="value asc" :step-searh="true" self-field="code"
					parent-field="code" @change="onchange" v-model="cityValue" class="city-picker">
					<view class="city-select">
						<text class="city-text ellipsis">{{ selectedCity }}</text>
						<text class="arrow-icon"></text>
					</view>
				</uni-data-picker>

				<!-- 搜索框 -->
				<view class="search-box">
					<input class="search-input" v-model="searchKey" placeholder="请输入缴费单位名称"
						placeholder-class="input-placeholder" @input="onSearch" />
					<uni-icons type="search" size="20" color="#999" />
				</view>
			</view>

			<view v-if="filterList.length === 0" class="empty-state">
				<uni-icons type="info" size="60" color="#ccc"></uni-icons>
				<text class="empty-text">{{ '暂无数据' }}</text>
			</view>

			<view v-for="item in filterList">
				<view class="group-title">{{item.name}}</view>
				<view class="item" v-for="itemChild in item.children" :key="itemChild.id"
					@click="selectItem(itemChild)">
					{{ itemChild.name }}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed

	} from 'vue'
	import {
		onShow,
		onReady,
		onReachBottom,
		onLoad,
		onUnload,
		onPullDownRefresh
	} from '@dcloudio/uni-app'

	// 响应式数据
	const selectedCity = ref('选择城市')
	const cityValue = ref('')
	const alladdress = ref([{
		text: "北京市",
		value: "110000000000",
		children: [{
			text: "市辖区",
			value: "110100000000",
			children: [{
					text: "东城区",
					value: "110101000000"
				},
				{
					text: "西城区",
					value: "110102000000"
				},
				{
					text: "朝阳区",
					value: "110105000000"
				},
				{
					text: "丰台区",
					value: "110106000000"
				},
				{
					text: "石景山区",
					value: "110107000000"
				},
				{
					text: "海淀区",
					value: "110108000000"
				},
				{
					text: "门头沟区",
					value: "110109000000"
				},
				{
					text: "房山区",
					value: "110111000000"
				},
				{
					text: "通州区",
					value: "110112000000"
				},
				{
					text: "顺义区",
					value: "110113000000"
				},
				{
					text: "昌平区",
					value: "110114000000"
				},
				{
					text: "大兴区",
					value: "110115000000"
				},
				{
					text: "怀柔区",
					value: "110116000000"
				},
				{
					text: "平谷区",
					value: "110117000000"
				},
				{
					text: "密云区",
					value: "110118000000"
				},
				{
					text: "延庆区",
					value: "110119000000"
				}
			]
		}]
	}])

	const searchKey = ref('')
	const statusBarHeight = ref(20)
	const showPicker = ref(false)
	const keyword = ref('')

	const companyList = ref([{
			id: 7,
			name: '官方机构',
			children: [{
					id: 1,
					name: "XX市燃气集团有限公司"
				},
				{
					id: 2,
					name: "XX市供水有限公司"
				},
				{
					id: 3,
					name: "XX供电服务中心"
				},
				{
					id: 4,
					name: "XX新能源服务公司"
				},
				{
					id: 5,
					name: "XX公共事业缴费中心"
				},
				{
					id: 6,
					name: "XX综合能源服务站"
				}
			]
		},
		{
			id: 8,
			name: '非智享日照提供的服务单位',
			children: [{
					id: 9,
					name: "XX市燃气集团有限公司"
				},
				{
					id: 10,
					name: "XX能源集团"
				}
			]
		}
	])

	// 计算属性：搜索过滤
	const filterList = computed(() => {
		if (!searchKey.value) return companyList.value
		const key = searchKey.value.trim().toLowerCase()

		return companyList.value.filter(group => {
			const hasChild = group.children.some(child =>
				child.name.toLowerCase().includes(key)
			)
			const groupMatch = group.name.toLowerCase().includes(key)
			return hasChild || groupMatch
		}).map(group => {
			return {
				...group,
				children: group.children.filter(child =>
					child.name.toLowerCase().includes(key)
				)
			}
		})
	})

	// 生命周期
	onShow(() => {})
	onMounted(() => {})
	onReady(() => {})

	// 方法
	const selectItem = (item) => {
		console.log(item)
		uni.navigateTo({
			url: '/pageSubPack/payment-list/addPayment'
		})
	}

	const onchange = (e) => {
		console.log('选中text数组:', e.detail.value)
		const arr = e.detail.value
		let city = ''
		if (arr[1].text === '市辖区') {
			city = arr[0].text
		} else {
			city = arr[1].text
		}
		selectedCity.value = city
	}

	const onSearch = () => {}

	const goBack = () => {
		uni.navigateBack();
	}
</script>

<style lang="scss">
	page {
		background: #f9f9f9;
	}
</style>

<style scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f9f9f9;
	}

	.page {
		flex: 1;
		overflow-y: auto;
		box-sizing: border-box;
		background-color: #fff;
	}

	.search-section {
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		align-items: center;
	}

	.city-picker {
		display: block;
		width: auto;
	}

	.city-select {
		display: flex;
		align-items: center;
		padding: 8rpx 0;
		cursor: pointer;
		width: 80px;
		height: 70rpx;
	}

	.ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.city-text {
		font-size: 28rpx;
		font-weight: 600;
		color: #000000;
		line-height: 1;
	}

	.arrow-icon {
		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 16rpx solid #333333;
		margin-top: 4rpx;
	}

	.search-box {
		display: flex;
		width: 100%;
		align-items: center;
		background-color: #f3f4f6;
		border-radius: 20rpx;
		padding: 0 30rpx;
		margin: 10rpx 0px 0px 10rpx;
		height: 70rpx;
	}

	.search-input {
		flex: 1;
		height: 100%;
		font-size: 30rpx;
		border: none;
		background: transparent;
	}

	.input-placeholder {
		color: #999;
		font-size: 30rpx;
	}

	.search-icon {
		font-size: 36rpx;
		color: #999;
	}

	.group-title {
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		color: #666;
		background-color: #f3f3f3;
	}

	.item {
		background: #fff;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		border-bottom: 2rpx solid #f2f2f2;
	}

	.item:active {
		background: #f2f2f2;
	}

	::v-deep .selected-item {
		margin-left: 10rpx !important;
		margin-right: 10rpx !important;
	}

	.status-bar {
		width: 100vw;
		height: 46px;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		color: #ccc;
	}

	.empty-text {
		font-size: 32rpx;
		color: #999;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}
</style>