<template>
    <view style="
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;">
        <view style="flex: 1; width: 100%; height: 1rpx">
            <canlendar @finish="chosenDateResult" title="日期和人数"></canlendar>
        </view>
        <view class="column" style="background: #ecf1f4; padding: 20rpx 0 50rpx 0;">
            <view class="row line-flex" style="padding: 30rpx; background: #fff">
                <text style="font-size: 28rpx; color: #111; font-weight: 500">房间</text>
                <text style="
                    font-size: 22rpx;
                    color: #999;
                    margin-left: 30rpx;
                    flex: 1;
                    "></text>
                <u-number-box size="28" :min="1" :max="100000" v-model="parameters.rooms"
                @change="getRooms"></u-number-box>
            </view>
            <scroll-view :scroll-y="true" class="hotelScroll" style="max-height: 200rpx;">
                <view style="padding: 0 10rpx;background: #fff">
                    <view class="row items-center" v-for="(item,index) in parameters.searchroomGroup"
                    style="padding-bottom: 20rpx;">
                        <view class="line-flex" style="height: 29px;margin-right: 10rpx;">房间{{ item.roomNum }}</view>
                        <view class="col">
                            <view class="row line-flex" style="margin-left: 20rpx;">
                            <view style="margin-right: 10rpx;">
                                <text style="font-size: 28rpx; color: #111; font-weight: 500">成人</text>
                                <!--
                                <text style="
                                    font-size: 22rpx;
                                    color: #999;
                                    margin-left: 30rpx;
                                    flex: 1;
                                    ">18周岁以上</text>-->
                            </view>
                            <u-number-box size="28" :min="1" 
                            :max="9" 
                            v-model="item.numberOfAdults"
                            @change="(e)=>{crChange(e,index)}"></u-number-box>
                            </view>
                            <view class="row line-flex" style="margin-left: 20rpx;">
                                <view style="margin-right: 10rpx;">
                                    <text style="font-size: 28rpx; color: #111; font-weight: 500">儿童
                                        <!--(占床)-->
                                    </text>
                                    <!--
                                    <text style="
                                        font-size: 22rpx;
                                        color: #999;
                                        margin-left: 30rpx;
                                        flex: 1;
                                        ">2-18周岁(不含)</text>-->
                                </view>
                                <u-number-box size="28" :min="0" :max="5" 
                                v-model="item.numberOfChildren"
                                @change="(e)=>{etChange(e,index)}"
                                style="margin-right: 10rpx;"
                                ></u-number-box>
                                <text style="font-size: 28rpx; color: #111; font-weight: 500;">年龄</text>
                                <u-number-box size="28" :min="1" :max="12" 
                                v-model="item.ChildAgeDetails"
                                @change="(e)=>{ageChange(e,index)}"
                                style="margin-left: 10rpx;"
                                ></u-number-box>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
            
            
            <!--
            <view class="row line-flex" style="padding: 30rpx; background: #fff">
                    <text style="font-size: 28rpx; color: #111; font-weight: 500">儿童(不占床)</text>
                        <text style="
                    font-size: 22rpx;
                    color: #999;
                    margin-left: 30rpx;
                    flex: 1;
                    ">2-18周岁(不含)</text>
                    <u-number-box size="28" :min="0" :max="100000" v-model="parameters.childrenNumberBZC"></u-number-box>
            </view>-->
        </view>
    </view>
</template>
<script>
import canlendar from "./index";
export default {
    props:['msg'],
    components: {
        canlendar
    },
    data() {
        return {
            parameters: {
                rooms: 1,
                adultsNumber:2,
                childrenNumberZC:0,
                childrenNumberBZC:0,
                peoples: 2,
            }
        }
    },
    watch:{
        msg: {
			handler (val, oldval) {
                if(val){
                    this.parameters = val
                }
            },
            deep: true,
        },
    },
    methods: {
        getRooms(e){
            if(e.value>this.parameters.rooms||e.value<this.parameters.rooms){
                if(e.value>this.parameters.rooms){
                    this.parameters.searchroomGroup.push({
                        roomNum: e.value,
                        numberOfAdults: 1,
                        numberOfChildren: 0,
                        ChildAgeDetails: ''
                    })
                }
                if(e.value<this.parameters.rooms){
                    this.parameters.searchroomGroup.splice(e.value,1)
                }
                this.parameters.rooms = e.value;
                this.peopleChange()
            }
        },
        ageChange(e,index){
            this.parameters.searchroomGroup[index].ChildAgeDetails = e.value;
        },
        etChange(e,index){
            this.parameters.searchroomGroup[index].numberOfChildren = e.value;
            this.peopleChange()
        },
        crChange(e,index){
            this.parameters.searchroomGroup[index].numberOfAdults = e.value;
            this.peopleChange()
        },
        peopleChange(){
            this.parameters.peoples = 0
            this.parameters.adultsNumber = 0
            this.parameters.childrenNumberZC = 0
            this.parameters.searchroomGroup.forEach((item,index)=>{
                this.parameters.peoples+= (Number(item.numberOfAdults) + Number(item.numberOfChildren))
                this.parameters.adultsNumber+= Number(item.numberOfAdults)
                this.parameters.childrenNumberZC+= Number(item.numberOfChildren)
            })
        },
        chosenDateResult(obj) {
            this.showTimePopup = false;
            this.$emit('chosenDateResult',this.parameters,obj)
        },
    }
}
</script> 
<style lang="scss" scoped>
	@import url("@/asset/css/flex.css");

</style>