<template>
	<view class="uni-container">
		<u-navbar :autoBack="true" :placeholder="true" bgColor="#fff">
			<view slot='center' style="font-size: 36rpx; font-weight: bold;">
				入住条件
			</view>
		</u-navbar>
		<scroll-view scroll-y class="scroll">
			<view class="form-box">
				<view class="form-item">
					<view class="label">间数</view>
					<u-number-box v-model="detData.room" :min="1" :max="10" integer :disabledInput="true" @change="roomChange"></u-number-box>
				</view>
				<view class="form-item">
					<view class="label">成人数</view>
					<u-number-box v-model="detData.adult" :min="adultMin" :max="adultMax" integer :disabledInput="true" @change="adultChange"></u-number-box>
				</view>
				<view class="form-item">
					<view class="label">儿童数</view>
					<u-number-box v-model="detData.children" :min="0" :max="childrenMax" integer :disabledInput="true" @change="childrenChange"></u-number-box>
				</view>
			</view>
			<view class="tips">选择儿童年龄，我们为您精准筛选可入住房型</view>
			<view class="form-box">
				<view class="form-item" v-for="(item, index) in childrenList" :key="index">
					<view class="label">儿童{{index + 1}}</view>
					<view class="value" @click="ageDetail(index)">
						<view class="age">{{item}}</view>
						<u-icon name="arrow-right" color="rgba(0, 0, 0, 0.45)" size="28rpx"></u-icon>
					</view>
				</view>
			</view>
        </scroll-view>
		<view class="footer">
			<view class="btn" @click="save">确定</view>
		</view>
		<u-popup :show="showPopupAge" :round="10" mode="bottom">
		    <view class="age_con">
				<view class="head">
					<view class="title">儿童年龄</view>
				</view>
				<view class="age_box">
					<view :class="['age', isAge == item ? 'activeAge' : '']" v-for="(item, index) in ageList" :key="index" @click="changeAge(item)">{{item}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import _config from '../../common/http/config.js'
	export default {
		data() {
			return {
				detData: {
					room: 1,
					adult: 2,
					children: 0,
				},
				adultMin: 1,
				adultMax: 8,
				childrenMax: 3,
				childrenList: [],
				ageList: ['<1岁', '1岁', '2岁', '3岁', '4岁', '5岁', '6岁', '7岁', '8岁', '9岁', '10岁', '11岁', '12岁', '13岁', '14岁', '15岁', '16岁', '17岁'],
				showPopupAge: false,
				isAge: '<1岁',
				detAgeIndex: null
			};
		},
		onLoad(options) {
			if (uni.getStorageSync('hotel_room')) {
				this.detData = uni.getStorageSync('hotel_room');
			}
			if (uni.getStorageSync('hotel_children')) {
				this.childrenList = uni.getStorageSync('hotel_children');
			}
			this.adultMin = this.detData.room;
			this.adultMax = this.detData.room * 8;
			this.childrenMax = this.detData.room * 3;
		},
		methods: {
			roomChange(e) {
				this.detData.room = e.value;
				this.adultMin = this.detData.room;
				this.adultMax = this.detData.room * 8;
				this.childrenMax = this.detData.room * 3;
				if (this.detData.adult < this.detData.room) {
					this.detData.adult = this.detData.room;
				}
				if (this.detData.adult > this.detData.room * 8) {
					this.detData.adult = this.detData.room * 8;
				}
				if (this.detData.children > this.detData.room * 3) {
					this.detData.children = this.detData.room * 3;
					this.childrenList = this.childrenList.slice(0, this.detData.children);
				}
			},
			adultChange(e) {
				this.detData.adult = e.value;
			},
			childrenChange(e) {
				this.detData.children = e.value;
				if (this.childrenList.length > this.detData.children) {
					this.childrenList = this.childrenList.slice(0, this.detData.children);
				}
				if (this.childrenList.length < this.detData.children) {
					let num = this.detData.children - this.childrenList.length;
					for (var i = 0; i < num; i ++) {
						this.childrenList.push('<1岁')
					};
				}
			},
			ageDetail(i) {
				this.isAge = this.childrenList[i];
				this.detAgeIndex = i;
				this.showPopupAge = true;
			},
			changeAge(i) {
				this.isAge = i;
				this.childrenList[this.detAgeIndex] = i;
				this.showPopupAge = false;
			},
			save() {
				uni.setStorageSync('hotel_room', this.detData);
				uni.setStorageSync('hotel_children', this.childrenList);
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
    page{ background: #F6F6F6; }
	.uni-container {
		width: 100%;
        padding-bottom: 48rpx;
		min-height: 100vh;
		box-sizing: border-box;
		.scroll {padding-bottom: 120rpx;}
		.form-box {
			background: #FFFFFF;
			padding: 0 24rpx;
			margin: 24rpx 24rpx 0;
			.form-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 96rpx;
				border-bottom: 1rpx solid #ECEAEA;
				&:last-child {
					border: none;
				}
				.label {
					font-size: 28rpx;
					color: rgba(0,0,0,0.65);
				}
				.value {
					display: flex; align-items: center;
					.age {font-size: 28rpx; color: rgba(0,0,0,0.85); margin-right: 6rpx;}
				}
				/deep/.u-number-box {
					.u-number-box__minus, .u-number-box__plus {
						width: 48rpx !important; height: 48rpx !important; border-radius: 4rpx !important; border: 1rpx solid #03AE80 !important; background: rgba(71,175,195,0.1) !important;
						.u-icon__icon {color: #03AE80 !important; font-size: 22rpx !important;}
					}
					.u-number-box__minus--disabled {
						border: 1rpx solid rgba(0,0,0,0.25) !important; background: #FFFFFF !important;
						.u-icon__icon {color: rgba(0,0,0,0.45) !important;}
					}
					.u-number-box__input {background: #FFFFFF !important; font-size: 28rpx !important; color: #333333 !important;}
				}
			}
		}
		.tips {margin: 24rpx 24rpx 0; font-size: 28rpx; color: rgba(0,0,0,0.65);}
		.footer {
			position: fixed; left: 0; bottom: 0; width: 100%; padding: 13rpx 0; box-sizing: border-box; background-color: #FFFFFF;
			.btn {
				margin: 0 auto;
				width: 654rpx;
				height: 90rpx;
				background: #03AE80;
				border-radius: 49rpx;
				line-height: 90rpx;
				text-align: center;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
		.age_con {
			padding: 32rpx 32rpx 0;
			.head {
				margin-bottom: 44rpx;
				.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
				.text { margin-top: 8rpx; font-size: 28rpx; color: rgba(0,0,0,0.25); }
			}
			.age_box {
				display: flex; align-items: center; flex-wrap: wrap;
				.age {
					width: 120rpx; height: 64rpx; background: #F6F7F9; border-radius: 4rpx; line-height: 64rpx; text-align: center; margin: 0 21rpx 16rpx 0; font-size: 26rpx; color: rgba(0,0,0,0.65);
					&:nth-child(5n) { margin-right: 0; }
				}
				.activeAge { background: rgba(71,175,195,0.1); border: 1rpx solid #03AE80; color: #03AE80; }
			}
		}
	}
</style>