<template>
	<view class="container">
		<uni-nav-bar :fixed="true" style="width: 100%" :statusBar="true" :border="false" title="物业审核" left-icon="left" @clickLeft="onReturnHome"></uni-nav-bar>
		<view class="page">
			<view class="housing">
				<view class="audit">
					<view class="uni-icons" v-if="userHouse.auditStatus === 'refuse'"><uni-icons type="closeempty" size="25" color="#F42E2E"></uni-icons></view>
					<view class="uni-icons" v-else-if="userHouse.auditStatus === 'auditPass'"><uni-icons type="checkmarkempty" size="25" color="#1BDA1B"></uni-icons></view>
					<view class="uni-icons" v-else><uni-icons type="more-filled" size="25" color="#F6C864"></uni-icons></view>
					<view class="name">房屋{{statusTitle}}</view>
					<view class="name" v-if="userHouse.auditStatus === 'refuse' && userHouse.auditOpinion">驳回理由：{{userHouse.auditOpinion}}</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.useTo, 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 === 2 ? '女' : '男'}}</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'
let isHome = false
export default {
	data() {
		return {
			statusList: [],
			typeList: [],
			relationShipList: [
				{label: '本人', value: 'self'},
				{label: '租户', value: 'tenant'},
				{label: '亲人', value: 'relative'},
				{label: '朋友', value: 'friend'},
				{label: '其他', value: 'other'}
			],
			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 '已驳回，请确认'
			if(this.userHouse.auditStatus === 'auditPass') 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.reLaunch({
						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}
		},
		onReturnHome() {
			if(isHome) {
				uni.navigateBack();
			} else {
				// let registerInfo = getApp().globalData.registerInfo
				// if(registerInfo.id) {
	
				// } else {
					uni.reLaunch({
						url: '/pages/home/index'
					});
				// }
			}
		}
	},
	async onLoad(options) {
		if(options.id) {
			isHome = true
			this.getHouseInfo(options.id)
		} else {
			isHome = false
			let data = getApp().globalData.registerInfo
			this.userHouse = {...data}
		}
		this.statusList = await getDictItemsApi('house_status')
		this.typeList = await getDictItemsApi('house_purpose')
	}
}
</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;
			font-weight: bold;
		}

		.content {
			margin-top: 20rpx;

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

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

				.detail {
					font-size: 30rpx;
					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>