<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">
			<!-- 房屋列表 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">默认</text>
							<text class="house-name">{{ item.houseName }}</text>
						</view>
						<text class="status-tag" :class="item.statusClass">{{ item.statusText }}</text>
					</view>

					<!-- 房屋信息 -->
					<view class="card-body">
						<view class="row">
							<text class="label">房间号</text>
							<view class="value-box">
								<text class="value">{{ item.roomNo }}</text>
							</view>
						</view>
						<view class="row">
							<text class="label">业主</text>
							<text class="value">{{ item.owner }}</text>
						</view>
						<view class="row">
							<text class="label">房屋状态</text>
							<text class="value">{{ item.houseStatus }}</text>
						</view>
						<view class="defaultBox" v-if="item.statusText=='认证成功'&&!item.isDefault">
							<text class="set-default">设为默认</text>
							<switch class="no-cross-switch" :checked="item.isDefault" color="#1677ff"
								@change="onSwitchChange($event,index)" @click.stop />
						</view>
						<!-- <text v-if="item.showSetDefault" class="set-default"
							@click="setDefault(item.id)">设为默认</text> -->
					</view>
				</view>
			</view>

		</scroll-view>
		<!-- 底部添加按钮 -->
		<view class="bottom-btn">
			<button class="add-btn" @click="addHouse">添加房屋</button>
		</view>
	</view>



</template>

<script>
	export default {
		onReady: function(e) {},
		components: {

		},

		computed: {


		},
		created() {

		},
		onShow() {

		},
		onUnload() {
			// 页面卸载时清除定时器
			if (this.timer) clearInterval(this.timer)
		},
		mounted() {},
		data() {
			return {
				/* 设定状态栏默认高度 */
				statusBarHeight: 20,
				houseList: [{
						id: 1,
						houseName: "北境碧桂园小区（别墅）",
						roomNo: "2号楼2层",
						owner: "张三",
						houseStatus: "自住",
						isDefault: true,
						statusText: "认证成功",
						statusClass: "success",
						showSetDefault: false,
					},
					{
						id: 2,
						houseName: "北境碧桂园小区（别墅）",
						roomNo: "3号楼2层",
						owner: "张三",
						houseStatus: "自住",
						isDefault: false,
						statusText: "认证成功",
						statusClass: "success",
						showSetDefault: true,
					},
					{
						id: 3,
						houseName: "北境碧桂园小区（别墅）",
						roomNo: "2号楼1层",
						owner: "张三",
						houseStatus: "闲置",
						isDefault: false,
						statusText: "认证失败",
						statusClass: "fail",
						showSetDefault: false,
					},
					{
						id: 4,
						houseName: "北境碧桂园小区（别墅）",
						roomNo: "2号楼1层",
						owner: "张三",
						houseStatus: "闲置",
						isDefault: false,
						statusText: "认证中",
						statusClass: "pending",

						showSetDefault: false,
					},

				]


			}
		},


		methods: {
			// 开关切换
			onSwitchChange(e, i) {

				uni.showLoading({
					title: '设置中...',
					mask: true
				});
				setTimeout(() => {
					uni.showToast({
						title: '设置默认房屋成功',
						icon: 'success'
					});
				}, 1000);
				setTimeout(() => {
					this.houseList.forEach((item, index) => {
						if (index != i) {
							item.isDefault = false
						} else {
							this.houseList[i].isDefault = e.detail.value

						}
					})
					uni.setStorageSync('houseIsDefault', e.detail.value)
				}, 3000);
			},
			tapHouse(item) {
				uni.redirectTo({
					url: '/pages/my/houseDetail?id=' + item.id + '&statusClass=' + item.statusClass,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

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


			},

			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 20px;
		box-sizing: border-box;
	}

	/* 底部按钮 */
	.bottom-btn {
		padding: 10px 15px 20px;
	}

	/* 列表 */
	.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;
	}

	.house-name {
		font-size: 16px;
		font-weight: 600;
	}

	.tag-default {
		background: #007aff;
		color: #fff;
		font-size: 24rpx;
		padding: 1px 8px;
		border-radius: 15px;
	}

	/* 状态标签 */
	.status-tag {
		font-size: 14px;
		padding: 6rpx 14rpx;
		font-weight: 600;
		border-radius: 6rpx;
	}

	.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: 14px;

		/* color: #666; */
	}

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

	.value {
		font-size: 14px;
		font-weight: 600;
		color: #333;
	}

	.defaultBox {
		margin-top: 5px;
		display: flex;
		justify-content: space-between;
		z-index: 99 !important;
	}

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

	}



	.add-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: #007aff;
		color: #fff;
		border-radius: 12rpx;
		font-size: 16px;
		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>