<template>
	<view class="container">
		<view class="page">
			<view class="housing">
				<view class="audit">
					<view class="uni-icons"><uni-icons type="more-filled" size="25" color="#F6C864"></uni-icons></view>
					<view class="name">房屋{{statusTitle}}</view>
				</view>
				<view class="steps">
					<view class="item active">
						<view class="uni-icons"><uni-icons type="home-filled" size="20" color="#6A59F2"></uni-icons>
						</view>
						<view class="name">房屋信息</view>
					</view>
					<view class="dotted dottedActive"></view>
					<view class="item active">
						<view class="uni-icons"><uni-icons type="person-filled" size="20" color="#6A59F2"></uni-icons>
						</view>
						<view class="name">住户信息</view>
					</view>
					<view class="dotted dottedActive"></view>
					<view class="item active">
						<view class="uni-icons"><uni-icons type="auth-filled" size="20" color="#6A59F2"></uni-icons>
						</view>
						<view class="name">物业审核</view>
					</view>
					<view class="dotted"></view>
					<view class="item">
						<view class="uni-icons"><uni-icons type="checkbox-filled" size="20" color="#B5B8ED"></uni-icons>
						</view>
						<view class="name">认证成功</view>
					</view>
				</view>
				<view class="information">
					<view class="title">房屋信息</view>
					<view class="content">
						<view class="item">
							<view class="name">物业公司</view>
							<view class="detail">{{userHouse.propertyName || ''}}</view>
						</view>
						<view class="item">
							<view class="name">小区</view>
							<view class="detail">{{userHouse.platformName || ''}}</view>
						</view>
						<view class="item">
							<view class="name">房屋</view>
							<view class="detail">{{userHouse.buildingName ? (userHouse.buildingName + userHouse.unitName + userHouse.roomName) : ''}}</view>
						</view>
						<view class="item">
							<view class="name">房间状态</view>
							<view class="detail">{{filterbuildingCode(userHouse.buildingStatus, statusList)}}</view>
						</view>
						<view class="item">
							<view class="name">房屋用途</view>
							<view class="detail">{{filterbuildingCode(userHouse.buildingType, typeList)}}</view>
						</view>
					</view>
				</view>
				<view class="information">
					<view class="title">住户信息</view>
					<view class="content">
						<view class="item">
							<view class="name">与业主关系</view>
							<view class="detail">{{filterbuildingCode(userHouse.relationShip, relationShipList)}}</view>
						</view>
						<view class="item">
							<view class="name">{{userHouse.relationShip === '1' ? '业主' : '住户'}}姓名</view>
							<view class="detail">{{userHouse.residentName}}</view>
						</view>
						<view class="item">
							<view class="name">手机号码</view>
							<view class="detail">{{userHouse.residentPhone || ''}}</view>
						</view>
						<view class="item">
							<view class="name">性别</view>
							<view class="detail">{{userHouse.sex ? '女' : '男'}}</view>
						</view>
						<view class="item">
							<view class="name">证件类型</view>
							<view class="detail">{{filterbuildingCode(userHouse.certificateType, certificateList)}}</view>
						</view>
						<view class="item">
							<view class="name">证件号码</view>
							<view class="detail">{{userHouse.certificateNo || ''}}</view>
						</view>
					</view>
				</view>
				<template v-if="userHouse.auditStatus === 'refuse'">
					<view class="form-submit" @click="toEditor()">修改</view>
					<view class="form-delete" @click="deleteDialog">删除</view>
				</template>
			</view>
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog type="error" cancelText="关闭" confirmText="同意" title="删除信息" content="确定要删除此房屋信息吗？!"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import {
	getDictItemsApi,
	queryByOpenIddApi,
	deleteByOpenIdApi
} from '@/config/api.js'
export default {
	data() {
		return {
			statusList: [],
			typeList: [],
			relationShipList: [
				{label: '本人', value: '1'},
				{label: '租户', value: '2'},
				{label: '亲人', value: '3'},
				{label: '朋友', value: '4'}
			],
			certificateList: [
				{label: '身份证', value: '1'},
				{label: '港澳通行证', value: '2'},
				{label: '护照', value: '3'}
			],
			userHouse: {}
		}
	},
	computed: {
		statusTitle() {
			if(this.userHouse.auditStatus === 'waitAudit') return '审核中，请耐心等待'
			if(this.userHouse.auditStatus === 'refuse') return '已驳回，请确认'
			return ''
		}
	},
	methods: {
		filterbuildingCode(code, list) {
			if(!code) return
			let row = list.find(item=>item.value === code)
			return row ? row.label : ''
		},
		deleteDialog() {
			this.$refs.popup.open()
		},
		async dialogConfirm() {
			let data = await deleteByOpenIdApi({id: this.userHouse.id})
			setTimeout(()=> {
				uni.showToast({
					icon: "none",
					title: '删除成功！'
				})
				setTimeout(()=> {
					uni.switchTab({
						url: '/pages/home/index'
					})
				}, 1500)
			}, 50)
		},
		dialogClose() {
			this.$refs.popup.close()
		},
		toEditor() {
			getApp().globalData.registerInfo = {...this.userHouse}
			uni.navigateTo({
				url: '/pages/housing/index',
			});
		},
		async getHouseInfo(id) {
			let {result} = await queryByOpenIddApi({id})
			this.userHouse = {...result}
		}
	},
	async onLoad(options) {
		let data = getApp().globalData.registerInfo
		if(data.propertyCode && data.residentName) {
			this.userHouse = {...data}
			console.log(this.userHouse)
		} else {
			this.getHouseInfo(options.id)
		}
		this.statusList = await getDictItemsApi('house_status')
		this.typeList = await getDictItemsApi('house_purpose')
	},
	onShow() {

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

	.housing {
		.audit {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			background-color: #ffffff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;

			.uni-icons {
				background-color: #F8F6F9;
				text-align: center;
				width: 100rpx;
				height: 100rpx;
				border-radius: 100rpx;
				border: 2px dashed #6A59F2;
				line-height: 100rpx;
			}

			.name {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #373737;
				width: 100%;
				text-align: center;
			}

		}

		.steps {
			display: flex;
			justify-content: space-between;
			background-color: #ffffff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;

			.item {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				.uni-icons {
					text-align: center;
					width: 60rpx;
					height: 60rpx;
					border-radius: 60rpx;
					border: 1px solid #B5B8ED;
					line-height: 60rpx;
				}

				.name {
					margin-top: 10rpx;
					font-size: 28rpx;
					color: #9D9CA6;
				}

			}

			.active {
				.uni-icons {
					border: 1px solid #6A59F2;
				}

				.name {
					color: #373737;
				}
			}

			.dotted {
				margin-top: 28rpx;
				width: 40px;
				height: 1px;
				border-bottom: 1px dashed #B5B8ED;
			}

			.dottedActive {
				border-bottom: 1px solid #6A59F2;
			}
		}
	}

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

		.title {
			height: 40rpx;
			line-height: 40rpx;
			padding-left: 20rpx;
			border-left: 3px solid #6852F0;
			font-size: 32rpx;
			color: #373737;
		}

		.content {
			margin-top: 20rpx;

			.item {
				display: flex;
				height: 70rpx;
				line-height: 70rpx;

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

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

	}

	.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>