<template>
	<view class="container">
		<view class="page">
			<view class="house">
				<view class="details">
					<view class="item">
						<view class="name">物业公司</view>
						<view class="detail">汉江之星物业公司</view>
					</view>
					<view class="item">
						<view class="name">小区</view>
						<view class="detail">十堰汉江之星小区</view>
					</view>
					<view class="item">
						<view class="name">房屋ID</view>
						<view class="detail">25845628</view>
					</view>
					<view class="item">
						<view class="name">楼栋</view>
						<view class="detail">9号楼</view>
					</view>
					<view class="item">
						<view class="name">单元</view>
						<view class="detail">1单元</view>
					</view>
					<view class="item">
						<view class="name">房屋编号</view>
						<view class="detail">1-1</view>
					</view>
					<view class="item">
						<view class="name">房屋用途</view>
						<view class="detail">商用</view>
					</view>
					<view class="item">
						<view class="name">户型</view>
						<view class="detail">两室一厅一厨一卫</view>
					</view>
					<view class="item">
						<view class="name">建筑面积</view>
						<view class="detail">95平方米</view>
					</view>
					<view class="item">
						<view class="name">房屋状态</view>
						<view class="detail green">
							<view class="tag">认证成功</view>
						</view>
					</view>
					<view class="item">
						<view class="name">房屋状态</view>
						<view class="detail red">
							<view class="tag">认证失败</view>
						</view>
					</view>
				</view>
			</view>
			<view class="form-submit" @click="toEditor()">解除绑定/修改</view>
			<view class="form-delete" @click="deleteDialog">删除</view>
			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			deleteDialog() {
				this.$refs.popup.open()
			},
			toEditor() {
				// uni.navigateTo({
				// 	url: '/pages/housing/index',
				// });
			}
		},
		onLoad() {

		},
		onShow() {

		}
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.page {
		padding: 30rpx 30rpx 90rpx;
	}

	.house {

		.details {
			background-color: #ffffff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;

			.yellow {
				border-left: 2px solid #F1BE51;

				.tag {
					color: #F1BE51;
					border: 1px solid #F1BE51;
					background-color: #FFFCF6;
				}
			}

			.item {
				display: flex;
				height: 84rpx;
				line-height: 84rpx;
				justify-content: space-between;
				border-bottom: 1px solid #F0F0F2;
				align-items: center;

				.name {
					font-size: 28rpx;
					color: #CECED3;
				}

				.detail {
					font-size: 28rpx;
					color: #373737;

					.tag {
						width: 130rpx;
						text-align: center;
						height: 36rpx;
						line-height: 36rpx;
						font-size: 22rpx;
						border-radius: 30rpx;

					}
				}

			}

			.red {

				.tag {
					color: #F42E2E;
					border: 1px solid #F42E2E;
					background-color: #FFF5F5;
				}
			}

			.green {

				.tag {
					color: #10D680;
					border: 1px solid #10D680;
					background-color: #F1FFF9;
				}
			}

			.gray {

				.tag {
					color: #B6B6BA;
					border: 1px solid #B6B6BA;
					background-color: #F8F8F8;
				}
			}


		}
	}

	.form-submit {
		height: 80rpx;
		line-height: 80rpx;
		background-color: #6A59F2;
		border-radius: 80rpx;
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-bottom: 30rpx;
	}
	.form-delete {
		height: 80rpx;
		line-height: 80rpx;
		background-color: #ffffff;
		border: 1px solid #6A59F2;
		border-radius: 80rpx;
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		color: #6A59F2;
	}
</style>