<template>
	<view class="container">
		<view class="header">
			<view class="search-box">
					<view class="input-button-container">
						<view class="search-input-wrapper">
							<u-input v-model="searchKeyword" placeholder="搜索户主姓名或身份证号" prefix-icon="search"
								@confirm="handleSearch" :disabled="isSerach" clearable />
						</view>
						<view class="scan-button" @click="handleScan">
							<uni-icons type="scan" size="28" color="#28A0F8"></uni-icons>
						</view>
						<view class="search-button-wrapper">
							<u-button @click="handleSearch" :disabled="isSerach" type="error" size="medium">
								<u-icon name="search" size="24" />
								搜索
							</u-button>
						</view>
					</view>
				<view class="area-select-row">
					<!-- 镇/街 -->
					<view class="select-item">
						<uni-easyinput prefixIcon="search" v-model="selectedTown" placeholder="请选择镇/街"
							@clear="clearTown" @iconClick="showTown" clearable />
					</view>
					<!-- 村/社区 -->
					<view class="select-item">
						<uni-easyinput prefixIcon="search" v-model="selectedVillage" @clear="clearVillage"
							placeholder="请选择村/社区" clearable @iconClick="showVillage()" />
					</view>
					<!-- 组/网格 -->
					<view class="select-item">
						<uni-easyinput prefixIcon="search" v-model="selectedGroup" placeholder="请选择组/网格" clearable
							@iconClick="showGroup()" />
					</view>
				
					<!-- 镇选择器 -->
					<u-picker :show="showTownPicker" mode="region" :columns="[townList]" keyName="label"
						@confirm="onTownConfirm" @close="showTownPicker = false" />
					<!-- 村选择器 -->
					<u-picker :show="showVillagePicker" mode="region" :columns="[villageList]" keyName="label"
						@confirm="onVillageConfirm" @close="showVillagePicker = false" />
					<!-- 组选择器 -->
					<u-picker :show="showGroupPicker" mode="region" :columns="[groupList]" keyName="label"
						@confirm="onGroupConfirm" @close="showGroupPicker = false" />
				</view>
				<view class="area-select-row">
					<view class="select-item1">
						<uni-easyinput prefixIcon="search" v-model="selectDoorNum"
							placeholder="请输入门牌号，若要未填写门牌号数据，请输入无" clearable />
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="filter-tabs">
				<view class="tab-item" :class="{ active: currentStatus === '' }" @click="filterByStatus('')">
					{{getTitel('')}}
				</view>
				<view class="tab-item" :class="{ active: currentStatus === '1' }" @click="filterByStatus('1')">
					{{getTitel('1')}}

				</view>
				<view class="tab-item" :class="{ active: currentStatus === '0' }" @click="filterByStatus('0')">
					{{getTitel('0')}}

				</view>

			</view>
			<view class="list-container">

				<mescroll-body ref="mescrollRef" :up="upOption" @init="mescrollInit" @up="upCallback" :down="downOption"
					@down="downCallback" :height="mescrollHeight">
					<view v-if="loading && householdList.length === 0" class="loading">
						<u-loading-icon mode="spinner" size="40"></u-loading-icon>
						<text>加载中...</text>
					</view>
					<view v-else-if="householdList.length === 0" class="empty">
						<u-icon name="info-circle" size="80" color="#ccc"></u-icon>
						<text>暂无数据</text>
					</view>
					<view v-else class="household-list">

						<view class="household-item" v-for="item in householdList" :key="item.id"
							@click="viewDetail(item)">
							<view class="item-header">
								<text class="householder-name">{{ getMsg(item.householderName) }}</text>
								<view class="status-tag" :class="item.submitStatus === 1 ? 'submitted' : 'draft'">
									{{ item.submitStatus === 1 ? '已提交' : '暂存' }}
								</view>
							</view>
							<view class="item-info">
								<text class="info-text">{{ '身份证号：'+getMsg(item.householderIdNumber) }}</text>
								<text class="info-text">{{ '联系电话：'+getMsg(item.householderPhone) }}</text>
								<text class="info-text">{{'户籍人数：'+getMsg(item.householdNum) }}人</text>
								<text class="info-text">{{'地址：'}}{{ getMsg(item.town) }}{{ getMsg(item.village) }}{{getMsg(item.groupName)}}{{ getMsg(item.doorNumber) }}</text>
								<text class="info-text">{{ '入户员：'+ getMsg(item.submitterName) }}</text>
							</view>
							<view class="item-footer">
								<text class="time-text">{{ '入户时间：'+formatTime(item.updateTime) }}</text>
							</view>
						</view>
					</view>
				</mescroll-body>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollBody from 'mescroll-uni/mescroll-body.vue'
	import MescrollMixin from 'mescroll-uni/mescroll-mixins.js'
	import {
		householdApi,areaApi
	} from '../../utils/api.js'
	import CryptoJS from "crypto-js";
	let Qrcode = require('../../utils/reqrcode.js') //引用二维码（源码） 
	export default {
		components: {
			MescrollBody
		},
		mixins: [MescrollMixin],
		data() {
			return {
				qrCodeRes: '',
				searchKeyword: '',
				total: '',
				isSerach: false,
				type: 'select',
				secretKey: "m+=sad_sgAlo+1sag",
				currentStatus: '',
				householdList: [],
				// 选择器弹窗控制
				showTownPicker: false,
				showVillagePicker: false,
				showGroupPicker: false,
				// 选中的值
				selectedTown: '',
				selectedVillage: '',
				selectedGroup: '',
				selectDoorNum: '',
				// 下拉数据
				townList: [],
				villageList: [],
				groupList: [],
				// 三级原始数据
				townVillageGroup: [],
				loading: false,
				upOption: {
					use: true,
					auto: true,
					page: {
						size: 5
					},
					noMoreSize: 5,
					empty: {
						tip: '暂无数据'
					}
				},
				downOption: {
					use: true
				},
				mescrollHeight: 'auto',
				userInfo: {},
				query: {}
			}
		},
		async onLoad() {
			this.loadUserInfo()
			await this.listAreaNode();
			
		},
		methods: {
			getMsg(value){
				if(value){
					return value
				}else{
					return ''
				}
			},
			async listAreaNode() {
				var areaDate = await areaApi.getAreaList();
				this.townVillageGroup = this.transformTree(areaDate);
				this.townList = this.townVillageGroup
			},
			transformTree(nodes) {
				return nodes.map(node => {
					// 创建基础对象（只包含label和value）
					const newNode = {
						"label": node.name,
						"value": node.name
					};
			
					// 如果存在非空children则递归处理
					if (node.children && node.children.length > 0) {
						newNode.children = this.transformTree(node.children);
					}
			
					return newNode;
				});
			},
			handleScan() {
				// #ifdef APP-PLUS || MP-WEIXIN 
				uni.scanCode({
					success: (res) => {
						var msg = res.result
						const bytes = CryptoJS.AES.decrypt(msg, this.secretKey);
						this.searchKeyword = bytes.toString(CryptoJS.enc.Utf8);
						this.mescroll.resetUpScroll()
					},
					fail: () => {
						uni.showToast({
							title: '扫码失败',
							icon: 'none'
						})
					}
				})
				// #endif
				// #ifdef H5
				this.scanCodeH5()
				// #endif
			},
			//h5识别条码和二维码
			scanCodeH5() {
				uni.chooseImage({
					count: 1,
					success: imgRes => {
						Qrcode.qrcode.decode(this.getObjectURL(imgRes.tempFiles[0]))
						Qrcode.qrcode.callback = (codeRes) => {
							if (codeRes.indexOf('error') >= 0) {
								// 二维码识别失败
								uni.showToast({
									title: '扫码失败',
									icon: 'none'
								})
							} else {
								const bytes = CryptoJS.AES.decrypt(codeRes, this.secretKey);
								this.searchKeyword = bytes.toString(CryptoJS.enc.Utf8);
								this.mescroll.resetUpScroll()
							}
						}
					}
				})
			},
			getTitel(current) {
				if (current === '') {
					if (this.currentStatus != '' || this.total == '' || this.total == 0) {
						return '全部'
					} else {
						return '全部(' + this.total + ')'
					}
				} else if (current === '1') {
					if (this.currentStatus != '1' || this.total == '' || this.total == 0) {
						return '已提交'
					} else {
						return '已提交(' + this.total + ')'
					}
				} else if (current === '0') {
					if (this.currentStatus != '0' || this.total == '' || this.total == 0) {
						return '暂存'
					} else {
						return '暂存(' + this.total + ')'
					}
				}


			},
			// 获取文件地址函数
			getObjectURL(file) {
				var url = null
				if (window.createObjectURL !== undefined) { // basic
					url = window.createObjectURL(file)
				} else if (window.URL !== undefined) { // mozilla(firefox)
					url = window.URL.createObjectURL(file)
				} else if (window.webkitURL !== undefined) { // webkit or chrome
					url = window.webkitURL.createObjectURL(file)
				}
				return url
			},
			// 解码，输出：中文
			decodeStr(str) {
				var out, i, len, c;
				var char2, char3;
				out = "";
				len = str.length;
				i = 0;
				while (i < len) {
					c = str.charCodeAt(i++);
					switch (c >> 4) {
						case 0:
						case 1:
						case 2:
						case 3:
						case 4:
						case 5:
						case 6:
						case 7:
							// 0xxxxxxx
							out += str.charAt(i - 1);
							break;
						case 12:
						case 13:
							// 110x xxxx 10xx xxxx
							char2 = str.charCodeAt(i++);
							out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
							break;
						case 14:
							// 1110 xxxx 10xx xxxx 10xx xxxx
							char2 = str.charCodeAt(i++);
							char3 = str.charCodeAt(i++);
							out += String.fromCharCode(((c & 0x0F) << 12) |
								((char2 & 0x3F) << 6) |
								((char3 & 0x3F) << 0));
							break;
					}
				}
				return out;
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll
			},
			loadUserInfo() {
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo) {
					this.userInfo = userInfo
				} else {
					uni.reLaunch({
						url: '/packageUser/pages/login'
					})
				}
			},
			handleSearch() {
				this.mescroll.resetUpScroll()
			},
			filterByStatus(status) {
				this.currentStatus = status
				this.mescroll.resetUpScroll()
			},
			clearTown() {
				this.selectedGroup = '';
				this.selectedVillage = '';
			},
			clearVillage() {
				this.selectedGroup = '';
			},
			// 镇选择
			onTownConfirm(e) {
				const town = e.value[0]
				this.selectedTown = town.label
				// 找到对应村
				this.villageList = town.children || []
				this.selectedVillage = ''
				this.groupList = []
				this.selectedGroup = ''
				this.showTownPicker = false
			},
			showTown() {
				console.log('s')
				this.showTownPicker = true
			},
			showVillage() {
				if (this.selectedTown) {
					this.showVillagePicker = true
				} else {
					uni.showToast({
						title: "请先选择村镇/街",
						icon: 'none'
					})
				}
			},
			showGroup() {
				if (this.selectedVillage) {
					this.showGroupPicker = true;
				} else {
					uni.showToast({
						title: "请先选择村/社区",
						icon: 'none'
					})
				}
			},
			// 村选择
			onVillageConfirm(e) {
				const village = e.value[0]
				this.selectedVillage = village.label
				// 找到对应组
				this.groupList = village.children || []
				this.selectedGroup = ''
				this.showVillagePicker = false
			},
			// 组选
			onGroupConfirm(e) {
				const group = e.value[0]
				this.selectedGroup = group.label
				this.showGroupPicker = false
			},
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			async upCallback(page) {
				this.total = 0
				// this.loading = page.num === 1
				try {
					uni.showLoading();
					this.isSerach = true;
					// console.log(this.loading)
					// const token = uni.getStorageSync('token')
					const params = {
						pageNo: page.num,
						pageSize: page.size,
					}
					if (this.searchKeyword) {
						params.keyword = this.searchKeyword
					}
					if (this.currentStatus !== '') {
						params.submitStatus = this.currentStatus
					}
					if (this.selectedTown != '') {
						params.town = this.selectedTown;

					}
					if (this.selectedVillage != '') {
						params.village = this.selectedVillage;

					}
					if (this.selectedGroup != '') {
						params.groupName = this.selectedGroup;
					}
					if (this.selectDoorNum != '') {
						params.doorNumber = this.selectDoorNum;
					}
					const response = await householdApi.pageHouseHoldPage(params)
					if (response.total && response.total > 0) {
						const newList = response.list;
						this.total = response.total
						if (page.num === 1) {
							this.householdList = newList

						} else {
							this.householdList = [...this.householdList, ...newList]
						}
						this.mescroll.endBySize(newList.length, response.total || 0)
						uni.hideLoading();
						this.isSerach = false;
					} else {
						this.mescroll.endErr()
						uni.hideLoading();
						this.isSerach = false;
					}
				} catch (error) {
					uni.hideLoading();
					this.isSerach = false;
					this.mescroll.endErr()
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				} finally {
					uni.hideLoading();
					this.isSerach = false;
				}

			},
			viewDetail(item) {
				uni.navigateTo({
					url: `/packageForm/pages/householdForm?id=${item.id}`
				})
			},
			formatTime(timeStr) {
				if (!timeStr) return ''
				const date = new Date(timeStr)
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background: #f4f6fa;
	}

	.header {
		background: #fff;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.search-box {
		/* 搜索框样式 */
	}

	.input-button-container {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 20rpx;
	}

	.search-input-wrapper {
		flex: 3;
	}

	.scan-button {
		background: none;
		border: none;
		padding: 0 10rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		background-color: #f5f5f5;
	}

	.search-button-wrapper {
		flex: 1;
	}

	.content {
		padding: 15rpx;
	}

	.filter-tabs {
		display: flex;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 15rpx;
		overflow: hidden;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #666;
		transition: all 0.3s;
		border-left: 1rpx solid #F5F3F2;
		/* 灰色边框 */
		/* 添加上边框 */
		border-top: 1rpx solid #F5F3F2;
		/* 添加下边框 */
		border-bottom: 1rpx solid #F5F3F2;
		border-right: 1rpx solid #F5F3F2;
	}

	.tab-item.active {
		background: #2979ff;
		color: #fff;
	}

	.list-container {
		min-height: 400rpx;
	}

	.loading,
	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 0;
		color: #999;
		font-size: 28rpx;
	}

	.household-list {
		margin-bottom: 32rpx;
	}

	.household-item {
		background: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.householder-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.status-tag {
		padding: 8rpx 16rpx;
		border-radius: 12rpx;
		font-size: 24rpx;
	}

	.status-tag.submitted {
		background: #e8f5e8;
		color: #19be6b;
	}

	.status-tag.draft {
		background: #fff3e0;
		color: #ff9500;
	}

	.item-info {
		margin-bottom: 16rpx;
	}

	.info-text {
		display: block;
		font-size: 26rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.item-footer {
		border-top: 1rpx solid #eee;
		padding-top: 16rpx;
	}

	.time-text {
		font-size: 24rpx;
		color: #999;
	}

	.area-select-row {
		display: flex;
		margin-top: 20rpx;
		flex-direction: row;
	}
	.select-item1 {
		flex: 1;
	}
	
	.select-item {
		width: 32%;
		margin-right: 2%;
	}
</style>