<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 v-if="houseList.length === 0" class="empty-state">
				<uni-icons type="info" size="60" color="#ccc"></uni-icons>
				<text class="empty-text">
					{{ '暂无数据'}}
				</text>
			</view>
			<!-- 房屋列表 v-for 渲染 -->
			<view class="house-list">
				<view class="house-card" v-for="(item, index) in houseList" :key="index" @click="tapHouse(item)">
					<!-- 标题 + 状态 -->
					<view class="card-header">
						<view class="title-box">
							<text class="tag-default" v-if="item.isDefault==1">默认</text>
							<text
								class="house-name">{{ item.villageName+"-"+item.buildingName+"-"+item.unitNo }}</text>
						</view>
						<text class="status-tag"
							:class="item.certificationStatus=='0'?'pending':item.certificationStatus=='1'?'success':item.certificationStatus=='2'?'fail':''">{{ item.certificationStatus=='0'?'未认证':item.certificationStatus=='1'?'认证成功':item.certificationStatus=='2'?'认证失败':'' }}</text>
					</view>

					<!-- 房屋信息 -->
					<view class="card-body">
						<view class="row">
							<text class="label">房间号</text>
							<view class="value-box">
								<text class="value">{{ item.houseNo }}</text>
							</view>
						</view>
						<view class="row">
							<text class="label">业主</text>
							<text class="value">{{ item.name }}</text>
						</view>
						<view class="row">
							<text class="label">房屋状态</text>
							<text
								class="value">{{ item.houseStatus==0?'自住':item.houseStatus==1?'闲置':item.houseStatus==2?'租赁':item.houseStatus==3?'其他':''}}</text>
						</view>
						<view class="defaultBox" v-if="item.certificationStatus=='1'&&!item.isDefault==1">
							<text class="set-default">设为默认</text>
							<switch class="no-cross-switch" :checked="item.isDefault==1" color="#1677ff"
								@change="onSwitchChange($event,item)" @click.stop />
						</view>
					</view>
				</view>
			</view>

		<view v-if="houseList.length > 0" class="load-more-wrap">
			<view v-if="noMoreData" class="no-more">没有更多了</view>
			<button v-else class="load-more-btn" :loading="loading" @click="loadMore">加载更多</button>
		</view>
		</scroll-view>
		<!-- 底部添加按钮 -->
		<view class="bottom-btn">
			<button class="add-btn" @click="addHouse">添加房屋</button>
		</view>
	</view>



</template>
<script setup>
	import {
		ref,
		onMounted,

	} from 'vue'
	import {
		getMyHouseList,
		setMyHouseDefault
	} from '/pageSubPack/api/apiSub.js'


	const houseList = ref([])
	const loading = ref(false)
	const pageNum = ref(1)
	const pageSize = ref(10)
	const noMoreData = ref(false)
	// ==================== 获取列表数据 ====================
	const getList = async () => {
		if (loading.value) return
		loading.value = true
		try {
			const res = await getMyHouseList({
				pageNum: pageNum.value,
				pageSize: pageSize.value
			})
			const newList = res.rows || []
			if (pageNum.value === 1) {
				houseList.value = newList
			} else {
				houseList.value = [...houseList.value, ...newList]
			}
			// 不足一页说明没有更多数据了
			if (newList.length < pageSize.value) {
				noMoreData.value = true
			}
		} catch (err) {
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			})
			console.error('列表接口报错：', err)
		} finally {
			loading.value = false
		}
	}

	// ==================== 加载更多 ====================
	const loadMore = () => {
		if (loading.value || noMoreData.value) return
		pageNum.value++
		getList()
	}

	// 页面加载时请求第一页
	onMounted(() => {
		pageNum.value = 1
		noMoreData.value = false
		getList()
	})



	const onSwitchChange = async (e, i) => {
		// uni.showLoading({
		// 	title: '设置中...',
		// 	mask: true
		// });

		try {
			const res = await setMyHouseDefault({
				houseId: i.houseId
			})
			const data = res
			if (data.code === 200) {
				// uni.hideLoading();
				pageNum.value = 1
				noMoreData.value = false
				getList()
				uni.setStorageSync('houseIsDefault', e.detail.value)
				uni.showToast({
					title: '设置默认房屋成功',
					icon: 'none'
				});
			} else {
				// uni.hideLoading();
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			}
		} catch (err) {
			// uni.hideLoading();
			uni.showToast({
				title: err.msg,
				icon: 'none'
			})
			console.error('列表接口报错：', err)
		}
	}



	const tapHouse = (item) => {
		uni.navigateTo({
			url: '/pageSubPack/my/houseDetail?id=' + item.id + '&certificationStatus=' + item.certificationStatus,
			success: res => {},
			fail: () => {},
			complete: () => {}
		});
	}

	const addHouse = () => {
		uni.setStorageSync('operationType', 'add');
		uni.navigateTo({
			url: '/pageSubPack/my/addHouse',
			success: res => {},
			fail: () => {},
			complete: () => {}
		});


	}

	const goBack = () => {
		uni.switchTab({
			url: '/pages/myIndex/myIndex',
			success: res => {},
			fail: () => {},
			complete: () => {}
		});
	}
</script>

<style lang="scss">
	page {
		// background: #F3F8FD;
		background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
	}
</style>

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

	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0px 40rpx;
		box-sizing: border-box;
	}

	/* 空状态 */
	.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;
	}

	.no-more {
		text-align: center;
		padding: 30rpx 0;
		color: #999;
		font-size: 24rpx;
	}

	.load-more-wrap {
		padding: 20rpx 0 40rpx;
	}

	.load-more-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background: #ffffff;
		color: #007aff;
		border: 1rpx solid #007aff;
		border-radius: 12rpx;
		font-size: 28rpx;
		text-align: center;
	}

	.load-more-btn::after {
		border: none;
	}

	/* 底部按钮 */
	.bottom-btn {
		padding: 20rpx 30rpx 40rpx;
	}

	/* 列表 */
	.house-list {
		height: 100%;
		overflow-y: scroll;

	}

	.house-card {
		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	/* 头部 */
	.card-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title-box {
		display: flex;
		align-items: center;
		gap: 16rpx;
		width: 100%;
		overflow-x: hidden;
	}

	.house-name {
		font-size: 32rpx;
		font-weight: 600;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tag-default {
		background: #007aff;
		color: #fff;
		font-size: 24rpx;
		padding: 2rpx 16rpx;
		border-radius: 30rpx;
		min-width: 48rpx;
	}

	/* 状态标签 */
	.status-tag {
		font-size: 28rpx;
		padding: 6rpx 14rpx;
		font-weight: 600;
		border-radius: 6rpx;
		min-width: 120rpx;
		text-align: center;
	}

	.success {
		/* background: #e6f7ee; */
		color: #2F77FD;
	}

	.pending {
		/* background: #fff4e4; */
		color: #09C2BD;
	}

	.fail {
		/* background: #ffe7e7; */
		color: #E34D59;
	}

	/* 内容行 */
	.card-body {
		padding: 30rpx;
	}

	.row {
		display: flex;
		margin-bottom: 24rpx;
	}

	.row:last-child {
		margin-bottom: 0;
	}

	.label {
		width: 100px;
		font-size: 28rpx;

		/* color: #666; */
	}

	.value-box {
		flex: 1;
		display: flex;
		justify-content: space-between;
	}

	.value {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
	}

	.defaultBox {
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 99 !important;
	}

	.set-default {
		color: #222222;
		/* font-weight: 600; */
		font-size: 32rpx;

	}



	.add-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: #007aff;
		color: #fff;
		border-radius: 12rpx;
		font-size: 32rpx;
		border: none;
	}

	.status-bar {
		width: 100vw;
		height: 46px;
	}
</style>
<style>
	/* 去掉 switch 内部的 × 和 √ 图标 */
	uni-switch::before,
	uni-switch::after {
		display: none !important;
	}

	/* 微信小程序专属去除 */
	wx-switch::before,
	wx-switch::after {
		display: none !important;
	}

	/* 支付宝/百度/抖音小程序兼容 */
	my-switch::before,
	swan-switch::before,
	tt-switch::before {
		display: none !important;
	}
</style>
<style>
	::v-deep .uni-switch-input:before {
		background-color: #cccccd !important;
	}

	/* 隐藏 switch 关闭状态的 × 号 */
	.no-cross-switch::before {
		display: none !important;

	}

	.no-cross-switch {
		transform: scale(0.85);
		border-radius: 50rpx !important;
	}

	.no-cross-switch>>>.uni-switch-input-checked {
		background-color: #007aff !important;
	}
</style>