<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 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>
            <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;
                    ">18周岁以上</text>
                <u-number-box size="28" :min="1" 
                :max="100000" 
                v-model="parameters.adultsNumber"
                @change="crChange"></u-number-box>
            </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.childrenNumberZC"
                @change="etChange"
                ></u-number-box>
            </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){
            this.parameters.rooms = e.value;
        },
        etChange(e){
            this.parameters.childrenNumberZC = e.value;
            this.peopleChange()
        },
        crChange(e){
            this.parameters.adultsNumber = e.value;
            this.peopleChange()
        },
        peopleChange(){
            this.parameters.peoples = Number(this.parameters.adultsNumber) + Number(this.parameters.childrenNumberZC)
        },
        chosenDateResult(obj) {
            this.showTimePopup = false;
            this.$emit('chosenDateResult',this.parameters,obj)
        },
    }
}
</script> 
<style lang="scss" scoped>
	@import url("@/asset/css/flex.css");

</style>