<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>
		<Loading mask="true" click="true" ref="loading"></Loading>

		<!-- 表单区域 -->
		<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-input">
					<input v-model="keyword" placeholder="请输入缴费单位名称" placeholder-class="ph" />
				</view> -->
				<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>


			<!-- 	<scroll-view scroll-y class="list-scroll"> -->
			<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> -->


		</scroll-view>
	</view>



</template>

<script>
	// 引入外部城市数据
	// import Address from '@/static/js/chinaRegions/picker-region.js'
	export default {
		onReady: function(e) {},
		components: {

		},
		computed: {



			filterList() {
				// 没有关键词直接返回全部
				if (!this.searchKey) return this.companyList;
				const key = this.searchKey.trim().toLowerCase();
				// 过滤第一层 + 第二层
				return this.companyList.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)
						)
					};
				});
			}

		},
		created() {

		},
		onShow() {

		},
		onLoad() {

		},
		mounted() {},

		onReady() {
			this.$nextTick(() => {

			})
		},
		data() {
			return {
				selectedCity: '选择城市',
				cityValue: '',
				alladdress: [{
					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"
							}
						]
					}]
				}, ],

				searchKey: '',
				/* 设定状态栏默认高度 */
				statusBarHeight: 20,
				showPicker: false,
				keyword: '',


				// 列表：一个大数组
				companyList: [{
						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能源集团"
							},

						]
					}

				]


			}
		},


		methods: {
			selectItem(item) {
				console.log(item);
				uni.redirectTo({
					url: '/pages/payment-list/addPayment',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			onchange(e) {
				console.log('选中text数组:', e.detail.value)
				let arr = e.detail.value
				let selectedCity = ''
				// 拼接省市区
				// arr.forEach((item, index) => {
				// 	if (index != arr.length - 1) {
				// 		selectedCity = selectedCity + item.text + '/'
				// 	} else {
				// 		selectedCity = selectedCity + item.text
				// 	}

				// })
				// 只显示城市判断
				if (arr[1].text == '市辖区') {
					selectedCity = arr[0].text
				} else {
					selectedCity = arr[1].text
				}
				this.selectedCity = selectedCity
			},

			// 搜索输入事件
			onSearch() {
				// 实时过滤，computed 自动处理
			},

			goBack() {
				uni.redirectTo({
					url: '/pages/payment-list/paymentIndex',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

		},


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

<style scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 关键：占满屏幕高度 */
		background-color: #f9f9f9;
	}

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

	.search-section {
		background-color: #fff;
		padding: 10px;
		display: flex;
	}

	/* 隐藏 uni-data-picker 原生样式，只保留点击功能 */
	.city-picker {
		display: block;
		width: auto;
	}

	/* 自定义城市选择区域，完美还原「日照市 ▼」 */
	.city-select {
		display: flex;
		align-items: center;
		padding: 4px 0;
		cursor: pointer;
		width: 80px;
		height: 35px;
	}

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

	.city-text {
		font-size: 14px;
		/* 匹配截图字体大小 */
		font-weight: 600;
		color: #000000;
		line-height: 1;
	}

	/* 自定义下拉箭头，1:1 还原截图样式 */
	.arrow-icon {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 8px solid #333333;
		/* 纯黑实心三角，和截图一致 */
		margin-top: 2px;
	}


	/* 搜索框 */
	.search-box {
		display: flex;
		width: 100%;
		align-items: center;
		background-color: #f3f4f6;
		border-radius: 50rpx;
		/* margin: 0rpx 30rpx 20rpx 30rpx; */
		padding: 0 15px;
		margin: 0px 0px 0px 5px;
		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;
	}

	/* 列表 */
	.list-scroll {
		height: calc(100vh - 44px - 70px);
	}

	.group-title {
		padding: 10px 15px;
		font-size: 14px;
		color: #666;
	}

	.item {
		background: #fff;
		padding: 10px 15px;
		font-size: 14px;
		border-bottom: 1px solid #f2f2f2;
	}

	.item:active {
		background: #f2f2f2;
	}

	::v-deep .selected-item {
		margin-left: 5px !important;
		margin-right: 5px !important;
	}

	.status-bar {
		width: 100vw;
		height: 46px;
	}
</style>