<template>
    <view class="ResultBox" style="
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;">
        <view style="width: 100%; height: 740rpx">
            <canlendar @finish="chosenDateResult" title="日期和人数"></canlendar>
        </view>
        <view class="column" style="background: #ecf1f4; padding: 20rpx 0 50rpx 0;height: 1rpx;flex: 1;">
            <view class="row line-flexBoxRoom">
                <text style="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="height: 1rpx;flex: 1;background: #fff;">
                <view class="line-flexBox">
                    <view class="column" v-for="(item,index) in parameters.searchroomGroup"
                    style="padding-bottom: 20rpx;">
                        <view class="line-flex line-flexTitle" 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 row-sbas-n line-flex" style="margin-left: 20rpx;">
                                <view class="row">
                                    <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>
                                </view>
                                <view class="row">
                                    <!-- <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> -->
                                    <template v-if="item.ChildAgeTexts.length>1">
                                        <text v-for="(items,indexs) in item.ChildAgeTexts" 
                                        :key="indexs" @click="eitAge(index,indexs)">
                                            {{ items }} 岁<template v-if="indexs!=(item.ChildAgeTexts.length-1)">,</template>
                                        </text>
                                    </template>
                                    
                                    <uni-section title="" type="line">
                                        <uni-data-select :ref="`select_${index}`"
                                            :placeholder="`年龄${item.numberOfChildren>1?'(选多次)':''}`"
                                            v-model="item.ChildAgeDetails"
                                            :localdata="TypeList"
                                            :clear="false"
                                            @change="(e)=>{ageChange(e,index)}"
                                        ></uni-data-select>
                                    </uni-section>
                                    <u-icon name="arrow" :size="32" color="#ccc" style="position: relative;top: -9rpx;"></u-icon>
                                </view>
                            </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,
            },
            TypeList: [],
            current: -1,
        }
    },
    watch:{
        msg: {
			handler (val, oldval) {
                if(val){
                    this.parameters = val
                }
            },
            deep: true,
        },
    },
    created(){
        for(let i=1;i<=18;i++){
            this.TypeList.push({
                text: i+'岁',
                value: i
            })
        }
    },
    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: null,
                        ChildAgeTexts: [],
                    })
                }
                if(e.value<this.parameters.rooms){
                    this.parameters.searchroomGroup.splice(e.value,1)
                }
                this.parameters.rooms = e.value;
                this.peopleChange()
            }
        },
        eitAge(index,indexs){
            this.current = indexs
            this.$refs[`select_${index}`][0].toggleSelector();
        },
        ageChange(e,index){
            let list = this.parameters.searchroomGroup[index].ChildAgeTexts
            if(this.current>=0){
                this.parameters.searchroomGroup[index].ChildAgeTexts[this.current] = e
                this.current = -1
            }else{
                if(list.length==0||list.length<this.parameters.searchroomGroup[index].numberOfChildren){
                    this.parameters.searchroomGroup[index].ChildAgeTexts.push(e)
                }else{
                    this.parameters.searchroomGroup[index].ChildAgeTexts[list.length-1] = e
                }
            }
            this.parameters.searchroomGroup[index].ChildAgeDetails = e
        },
        etChange(e,index){
            this.parameters.searchroomGroup[index].numberOfChildren = e.value;
            if(e.value<this.parameters.searchroomGroup[index].ChildAgeTexts.length){
                let num = this.parameters.searchroomGroup[index].ChildAgeTexts.length-e.value
                for(let i=0;i<num;i++){
                    this.parameters.searchroomGroup[index].ChildAgeTexts.splice(i,1)
                    this.parameters.searchroomGroup[index].ChildAgeDetails = null
                }
            }
            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) {
            for(let i=0;i<this.parameters.searchroomGroup.length;i++){
                let list = this.parameters.searchroomGroup[i]
                if(list.numberOfChildren>list.ChildAgeTexts.length){
                    return uni.showToast({
                        title: `请选择房间${i+1} 儿童年龄`,
                        icon: 'none',
                        duration: 2000
                    })
                }
            }
            this.showTimePopup = false;
            this.$emit('chosenDateResult',this.parameters,obj)
        },
    }
}
</script> 
<style lang="scss" scoped>
	@import url("@/asset/css/flex.css");
.line-flexBoxRoom{
    padding: 30rpx 30rpx 20rpx 30rpx;
    background: #fff;
    font-size: 32rpx;
}
.line-flexBox{
    padding: 0 30rpx;
    background: #fff;
}
.line-flex{
    font-size: 28rpx;
}
.line-flex.line-flexTitle{
    font-size: 32rpx;
    color: #B99846;
}

</style>