<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>
							<view class="form-item-fr">
								<picker @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>
							<view class="form-item-fr">
								<picker @change="e=>bindPickerChange(e, 'company')" 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>
						<view class="form-item">
							<view class="form-item-fl">房屋</view>
							<view class="form-item-fr">
								<picker mode="multiSelector" :range="houseList" range-key="name" :value="houseRoomKey" @change="houseKeyChange" @columnchange="colChange" class="form-item-tit">
									<view class="uni-input">{{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 @change="e=>bindPickerChange(e, 'status')" range-key="label" :value="statusKey" :range="statusList" class="form-item-tit">
									<view class="uni-input">{{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 @change="e=>bindPickerChange(e, 'type')" range-key="label" :value="typeKey" :range="typeList" class="form-item-tit">
									<view class="uni-input">{{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: '',
	buildingId: '',
	buildingName: '',
	unitId: '',
	unitName: '',
	roomId: '',
	roomName: '',
	buildingStatus: '',
	buildingType: '',
	isDefault: 0
}
export default {
	data() {
		return {
			settledList: [],
			settledKey: '',
			companyList: [],
			companyKey: '',

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

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

			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]].id
				house.unitName = this.houseList[1][newV[1]].name
				house.roomId = this.houseList[2][newV[2]].id
				house.roomName = this.houseList[2][newV[2]].name
				this.houseRoomName = `${this.houseList[0][newV[0]].name} ${this.houseList[1][newV[1]].name} ${this.houseList[2][newV[2]].name}`
			},
			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.buildingType = this.statusList[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
		},
		async ongetBuildingList(platformCode) {
			let {result} = await getBuildingListApi({platformCode}, {custom: {load: false}})
			let buildingList = result.map(item=> {
				return {
					...item,
					name: item.buildingName
				}
			})
			this.houseList[0] = new Array().concat([...buildingList])
			// this.houseList[0].push(...buildingList)
			if(buildingList.length) 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.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.$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() {
			house.isDefault = this.isDefault ? 1 : 0
			let registerInfo = getApp().globalData.registerInfo
			getApp().globalData.registerInfo = {...registerInfo, ...house}
			uni.navigateTo({
				url: '/pages/housingResidents/index',
			});
		}
	},
	async onLoad() {
		this.ongetSettledList()
		this.statusList = await this.ongetDictItems('house_status')
		this.typeList = await this.ongetDictItems('house_purpose')
	},
	onShow() {

	}
}
</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: 84rpx;
				line-height: 84rpx;
				border-bottom: 1px solid #F8F6F9;
				overflow: hidden;
			}

			.form-item-fl {
				font-size: 28rpx;
				color: #373737;
			}

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

			.form-item-tit {
				font-size: 28rpx;
				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>