<template>
	<view class="container">
		<view class="page">
			<view class="housing">
				<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"></view>
					<view class="item">
						<view class="uni-icons"><uni-icons type="person-filled" size="20" color="#B5B8ED"></uni-icons>
						</view>
						<view class="name">住户信息</view>
					</view>
					<view class="dotted"></view>
					<view class="item">
						<view class="uni-icons"><uni-icons type="auth-filled" size="20" color="#B5B8ED"></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="form">
					<uni-forms>
						<view class="form-item">
							<view class="form-item-fl"><view class="asterisk">*</view>物业公司</view>
							<view class="form-item-tit">{{propertyObj.propertyName}}</view>
							<!-- <view class="form-item-fr">
								<picker style="width:100%;text-align:right;" @change="e=>bindPickerChange(e, 'property')" range-key="propertyName" :value="settledKey" :range="settledList" class="form-item-tit">
									<view class="uni-input">{{settledList[settledKey].propertyName || '请选择'}}</view>
								</picker>
								<uni-icons type="forward" color="#E4E4EA"></uni-icons>
							</view> -->
						</view>
						<view class="form-item">
							<view class="form-item-fl"><view class="asterisk">*</view>小区</view>
							<!-- <view class="form-item-fr">
								<picker style="width:100%;text-align:right;" @change="e=>bindPickerChange(e, 'company')" :disabled="companyList.length === 0" range-key="communityName" :value="companyKey" :range="companyList" class="form-item-tit">
									<view class="uni-input">{{companyList[companyKey].communityName || '请选择'}}</view>
								</picker>
								<uni-icons type="forward" color="#E4E4EA"></uni-icons>
							</view> -->
							<view class="form-item-tit">{{propertyObj.platformName}}</view>
						</view>
						<view class="form-item">
							<view class="form-item-fl"><view class="asterisk">*</view>房屋</view>
							<view class="form-item-fr">
								<picker style="width:100%;text-align:right;" mode="multiSelector" :range="houseList" :disabled="houseList[0].length === 0" range-key="name" :value="houseRoomKey" @change="houseKeyChange" @columnchange="colChange">
									<view class="form-item-tit">{{houseRoomName || '请选择'}}</view>
								</picker>
								<uni-icons type="forward" color="#E4E4EA"></uni-icons>
							</view>
						</view>
						<view class="form-item">
							<view class="form-item-fl">房屋状态</view>
							<view class="form-item-fr">
								<picker style="width:100%;text-align:right;" @change="e=>bindPickerChange(e, 'status')" range-key="label" :value="statusKey" :range="statusList">
									<view class="form-item-tit">{{statusList[statusKey].label || '请选择'}}</view>
								</picker>
								<uni-icons type="forward" color="#E4E4EA"></uni-icons>
							</view>
						</view>
						<view class="form-item">
							<view class="form-item-fl">房屋用途</view>
							<view class="form-item-fr">
								<picker style="width:100%;text-align:right;" @change="e=>bindPickerChange(e, 'type')" range-key="label" :value="typeKey" :range="typeList">
									<view class="form-item-tit">{{typeList[typeKey].label || '请选择'}}</view>
								</picker>
								<uni-icons type="forward" color="#E4E4EA"></uni-icons>
							</view>
						</view>
						<view class="form-item">
							<view class="form-item-fl">设为默认房屋</view>
							<view class="form-item-fr">
								<switch :checked="isDefault" color="#6A59F2" style="transform:scale(0.7)" />
							</view>
						</view>
					</uni-forms>
				</view>

				<view class="form-submit" @click="toNext()">下一步</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	getSettledListApi,
	getCompanyListApi,
	getBuildingListApi,
	getCommunityUnitListApi,
	getCommunityRoomListApi,
	getDictItemsApi
} from '@/config/api.js'
const house = {
	// propertyName: '',
	// propertyCode: '',
	// platformName: '',
	// platformCode: '',
	buildingName: '',
	buildingId: '',
	unitId: '',
	unitName: '',
	roomId: '',
	roomName: '',
	floorSpace: '',
	buildingStatus: '',
	useTo: '',
	isDefault: 0
}
export default {
	data() {
		return {
			// settledList: [],
			// settledKey: '',
			// companyList: [],
			// companyKey: '',
			propertyObj: {
				propertyName: '',
				propertyCode: '',
				platformName: '',
				platformCode: ''
			},

			houseList: [[], [], []],
			houseRoomKey: [0, 0 , 0],
			houseRoomName: '',

			statusList: [],
			statusKey: 0,
			typeList: [],
			typeKey: 0,

			isDefault: true
		}
	},
	watch: {
		houseRoomKey: {
			handler(newV, oldName) {
				house.buildingId = this.houseList[0][newV[0]].id
				house.buildingName = this.houseList[0][newV[0]].name
				house.unitId = this.houseList[1][newV[1]] ? this.houseList[1][newV[1]].id : ''
				house.unitName = this.houseList[1][newV[1]] ? this.houseList[1][newV[1]].name : ''
				house.roomId = this.houseList[2][newV[2]] ? this.houseList[2][newV[2]].id : ''
				house.roomName = this.houseList[2][newV[2]] ? this.houseList[2][newV[2]].name : ''
				house.floorSpace = this.houseList[2][newV[2]] ? this.houseList[2][newV[2]].floorSpace : ''
				this.houseRoomName = `${this.houseList[0][newV[0]].name} ${this.houseList[1][newV[1]] ? this.houseList[1][newV[1]].name : ''} ${this.houseList[2][newV[2]] ? this.houseList[2][newV[2]].name : ''}`

				let statusValue = this.houseList[2][newV[2]].roomStatus
				let statusKey = this.statusList.findIndex(item=>item.value == statusValue)
				this.statusKey = statusKey || 0
				let typeValue = this.houseList[2][newV[2]].useTo
				let typeKey = this.typeList.findIndex(item=>item.value == typeValue)
				this.typeKey = typeKey || 0
			},
			deep: true
		}
	},
	methods: {
		bindPickerChange(e, type) {
			switch(type) {
				// case 'property':
				// 	this.settledKey = Number(e.detail.value)
				// 	house.propertyName = this.settledList[this.settledKey].propertyName
				// 	house.propertyCode = this.settledList[this.settledKey].propertyCode
				// 	this.ongetCompanyList(house.propertyCode)
				// 	break;
				// case 'company':
				// 	this.companyKey = Number(e.detail.value)
				// 	house.platformName = this.companyList[this.companyKey].communityName
				// 	house.platformCode = this.companyList[this.companyKey].communityCode
				// 	this.ongetBuildingList(house.platformCode)
				// 	break;
				case 'status':
					this.statusKey = Number(e.detail.value)
					house.buildingStatus = this.statusList[this.statusKey].value
					break;
				case 'type':
					this.typeKey = Number(e.detail.value)
					house.useTo = this.typeList[this.typeKey].value
					break;
				default:
					break
			}
		},
		async ongetSettledList() {
			let {result} = await getSettledListApi({}, {custom: {load: false}})
			this.settledList = result
		},
		async ongetCompanyList(platformCode) {
			let {result} = await getCompanyListApi({platformCode}, {custom: {load: false}})
			this.companyList = result
			if(result.length === 0) {
				setTimeout(()=> {
					uni.showToast({
						icon: "none",
						title: '当前物业公司下暂无小区'
					})
				}, 30)
			}
		},
		async ongetBuildingList() {
			let {result} = await getBuildingListApi({platformCode: this.propertyObj.platformCode}, {custom: {load: false}})
			if(result.length === 0) {
				setTimeout(()=> {
					uni.showToast({
						icon: "none",
						title: '当前小区下暂无楼栋'
					})
				}, 30)
			} else {
				let buildingList = result.map(item=> {
					return {
						...item,
						name: item.buildingName
					}
				})
				this.houseList[0] = new Array().concat([...buildingList])
				// this.houseList[0].push(...buildingList)
				// this.$set(this.houseList, 0, buildingList)
				this.ongetCommunityList()
			}
		},
		async ongetCommunityList() {
			let platformCode = this.houseList[0][this.houseRoomKey[0]].platformCode
			let id = this.houseList[0][this.houseRoomKey[0]].id
			let {result} = await getCommunityUnitListApi({platformCode, id}, {custom: {load: false}})
			let communityList = result.map(item=> {
				return {
					...item,
					name: item.unitName
				}
			})
			this.houseList[1] = new Array().concat([...communityList])
			// this.$set(this.houseList, 1, communityList)
			if(communityList.length) this.ongetHouseList()
		},
		async ongetHouseList() {
			let platformCode = this.houseList[1][this.houseRoomKey[1]].platformCode
			let id = this.houseList[1][this.houseRoomKey[1]].id
			let {result} = await getCommunityRoomListApi({platformCode, id}, {custom: {load: false}})
			let houseList = result.map(item=> {
				return {
					...item,
					name: item.roomNum
				}
			})
			this.houseList[2] = new Array().concat([...houseList])
			
			// this.$set(this.houseList, 2, houseList)
			this.$forceUpdate();
		},

		ongetDictItems(name) {
			return getDictItemsApi(name)
		},

		colChange(node) {
			if(node.detail.column === 0) {
				this.houseRoomKey[1] = 0
				this.houseRoomKey[0] = node.detail.value
				this.ongetCommunityList()
			}
			if(node.detail.column === 1) {
				this.houseRoomKey[2] = 0
				this.houseRoomKey[1] = node.detail.value
				this.ongetHouseList()
			}
		},
		houseKeyChange(e) {
			this.houseRoomKey = e.detail.value
		},
		toNext() {
			// if(!house.propertyName) {
			// 	uni.showToast({
			// 		title: '请选择物业公司',
			// 		icon: 'none'
			// 	})
			// 	return
			// }
			// if(!house.platformName) {
			// 	uni.showToast({
			// 		title: '请选择小区',
			// 		icon: 'none'
			// 	})
			// 	return
			// }
			if(!house.buildingName) {
				uni.showToast({
					title: '请选择房屋',
					icon: 'none'
				})
				return
			}
			if(!house.roomId) {
				uni.showToast({
					title: '请选择完整的房屋',
					icon: 'none'
				})
				return
			}
			house.isDefault = this.isDefault ? 1 : 0
			let registerInfo = getApp().globalData.registerInfo
			getApp().globalData.registerInfo = {...registerInfo, ...house, ...this.propertyObj}
			uni.navigateTo({
				url: '/pages/housingResidents/index',
			});
		}
	},
	async onLoad() {
		this.statusList = await this.ongetDictItems('house_status')
		this.typeList = await this.ongetDictItems('house_purpose')
		let registerInfo = getApp().globalData.registerInfo
		if(registerInfo.id) {
			// let propertyList = await getSettledListApi({}, {custom: {load: true}})
			// this.settledList = propertyList.result
			// if(registerInfo.propertyCode) this.settledKey = this.settledList.findIndex(item=>item.propertyCode === registerInfo.propertyCode)
			// house.propertyName = this.settledList[this.settledKey].propertyName
			// house.propertyCode = this.settledList[this.settledKey].propertyCode

			// let platformList = await getCompanyListApi({platformCode: registerInfo.propertyCode}, {custom: {load: true}})
			// this.companyList = platformList.result
			// if(registerInfo.platformCode) this.companyKey = this.companyList.findIndex(item=>item.communityCode === registerInfo.platformCode)
			// house.platformName = this.companyList[this.companyKey].communityName
			// house.platformCode = this.companyList[this.companyKey].communityCode
			this.propertyObj.propertyName = registerInfo.propertyName
			this.propertyObj.propertyCode = registerInfo.propertyCode
			this.propertyObj.platformName = registerInfo.platformName
			this.propertyObj.platformCode = registerInfo.platformCode

			let buildingList = await getBuildingListApi({platformCode: registerInfo.platformCode}, {custom: {load: false}})
			let buildingLists = buildingList.result.map(item=> {
				return {
					...item,
					name: item.buildingName
				}
			})
			this.houseList[0] = new Array().concat([...buildingLists])
			if(buildingLists.length) {
				let houseRoomKey = buildingLists.findIndex(item=>item.id === registerInfo.buildingId)
				let houseRoomplatformCode = buildingLists[houseRoomKey].platformCode
				let houseRoomid = buildingLists[houseRoomKey].id
				let communityList = await getCommunityUnitListApi({platformCode: houseRoomplatformCode, id: houseRoomid}, {custom: {load: false}})
				let communityLists = communityList.result.map(item=> {
					return {
						...item,
						name: item.unitName
					}
				})
				this.houseList[1] = new Array().concat([...communityLists])
				if(communityLists.length) {
					let RoomKey = communityLists.findIndex(item=>item.id === registerInfo.unitId)
					let platformCode = communityLists[RoomKey].platformCode
					let id = communityLists[RoomKey].id
					let roomList = await getCommunityRoomListApi({platformCode, id}, {custom: {load: false}})
					let houseList = roomList.result.map(item=> {
						return {
							...item,
							name: item.roomNum
						}
					})
					this.houseList[2] = new Array().concat([...houseList])
					if(houseList.length) {
						let key = houseList.findIndex(item=>item.id === registerInfo.roomId)
						this.houseRoomKey = [houseRoomKey, RoomKey, key]
					}
				}
			}
			// this.ongetSettledList()
			// house.propertyName = registerInfo.propertyName
			// house.propertyCode = registerInfo.propertyCode
			// house.platformName = registerInfo.platformName
			// house.platformCode = registerInfo.platformCode
			// house.buildingName = registerInfo.buildingName
			// house.buildingId = registerInfo.buildingId
			// house.unitId = registerInfo.unitId
			// house.unitName = registerInfo.unitName
			// house.roomId = registerInfo.roomId
			// house.roomName = registerInfo.roomName
			
			// house.buildingStatus = registerInfo.buildingStatus
			// house.useTo = registerInfo.useTo
			this.isDefault = registerInfo.isDefault === 1
			this.statusKey = this.statusList.findIndex(item=>item.value === registerInfo.buildingStatus)
			house.buildingStatus = this.statusList[this.statusKey].value
			this.typeKey = this.typeList.findIndex(item=>item.value === registerInfo.useTo)
			house.useTo = this.typeList[this.typeKey].value
		} else {
			this.propertyObj.propertyName = uni.getStorageSync('property_name')
			this.propertyObj.propertyCode = uni.getStorageSync('property_code')
			this.propertyObj.platformName = uni.getStorageSync('platform_name')
			this.propertyObj.platformCode = uni.getStorageSync('platform_code')
			this.ongetBuildingList()
			house.buildingStatus = this.statusList[this.statusKey].value
			house.useTo = this.typeList[this.typeKey].value
		}
	}
}
</script>
<style>
	page {
		background-color: #F8F6F9;
	}
</style>
<style lang="scss" scoped>
	.page {
		padding: 30rpx;
	}

	.housing {
		.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;
			}
		}

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

			.form-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
				line-height: 100rpx;
				border-bottom: 1px solid #F8F6F9;
				overflow: hidden;
			}

			.form-item-fl {
				font-size: 30rpx;
				color: #373737;
				display: flex;

				.asterisk {
					color: #F42E2E;
					width: 10rpx;
					margin-right: 6rpx;
				}
			}

			.form-item-fr {
				display: flex;
				flex: 2;
				align-items: center;
				justify-content: flex-end;
				margin-left: 20rpx;
			}

			.form-item-tit {
				font-size: 30rpx;
				color: #666;
				margin-right: 20rpx;
			}
		}
	}
	.form-submit {
		height: 80rpx;
		line-height: 80rpx;
		background-color: #6A59F2;
		border-radius: 80rpx;
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>