<style lang="scss" scoped>
	@import url("@/asset/css/flex.css");
    .roomListBox{
        background: #f5f5f5;
        height: 100vh;
        overflow: hidden;
    }
    .roomHeader{
        background: linear-gradient(-30deg, #4779FF, #47A5FF);
        // position: fixed;
        // left: 0;
        // right: 0;
        // z-index: 2;
    }
    .roomListCenter{
        background: #fff;
        border-radius: 10rpx;
        overflow: hidden;
    }
    .roomListC-L-type{
        border-radius: 6rpx;
        background: #0072FF;
        padding: 5rpx 10rpx;
        color: #fff;
        margin-right: 20rpx;
    }
    .roomListCenter.active1 .roomListC-L-type{
        background: #FD9700;
    }
    .roomListCenter.active2 .roomListC-L-type{
        background: #8d5dfc;
    }
    .roomListCenter.active3 .roomListC-L-type{
        background: #47A5FF;
    }
    .roomListCenter.active4 .roomListC-L-type{
        background: #FF5858;
    }
    .roomListC-box{
        background: #F8F8F8;
        border-radius: 4rpx;
    }
    .roomListC-bind view{
        border: 1px solid #73AEFF;
        color: #257BF1;
        border-radius: 6rpx;
        padding: 5rpx 10rpx;
        margin-right: 20rpx;
        margin-top: 20rpx;
        margin-bottom: 25rpx;
    }
    .roomListC-info{
        margin-bottom: 23rpx;
        font-size: 24rpx;
    }
    .roomListC-info-L{
        width: 350rpx;
        color: #333333;
    }
    .roomListC-info-L view:first-child{
        width: 100rpx;
        text-align: right;
        margin-right: 20rpx;
        color: #666666;
        flex-shrink: 0;
    }
    .roomListC-info-R {
        color: #333333;
    }
    .roomListC-info-R view:first-child{
        width: 80rpx;
        text-align: right;
        margin-right: 20rpx;
        color: #666666;
        flex-shrink: 0;
    }
    .roomListC-info-L view:last-child,.roomListC-info-R view:last-child{
        font-weight: 500;
    }
    .roomHeaderTitle view{
        color: #666;
    }
    .roomHeaderTitle view.active{
        background: #fff;
        border-radius: 50rpx;
        color: #0072FF;
        box-shadow: 0rpx 1rpx 6rpx 0rpx rgba(102,102,102,0.4);
    }
</style>
<template>
    <view class="roomListBox column">
        <view class="roomHeader">
            <headers :title="pageTitle" color="#fff"></headers>
        </view>
        <view v-if="dataList&&dataList.length>1" class="PT20 row justify-between items-center roomHeaderTitle PX30 fz30">
            <view v-for="(item,index) in dataList" class="PX40 PY10"
            :class="[currentId==item.TCNUM?'active':'']"
            @click="newData(item)">
                {{ item.TCNUM }}
            </view>
        </view>
        <scroll-view class="flex1" scroll-y="true"
        :enable-back-to-top="true" :enable-flex="true" style="overflow: hidden;">
            <view class="PA30">
                <template v-for="(item,index) in datas">
                    <view class="roomListCenter PX20 MB30"
                    :class="[item.HouseType==2?'active1':item.HouseType==3?'active2':item.HouseType==4?'active3':item.HouseType==5?'active4':'']">
                        <view class="roomListC-header PY15 row justify-between items-center">
                            <view class="roomListC-L row items-center fz24">
                                <view class="roomListC-L-type">
                                    {{ getTypeStr(item.HouseType) }}
                                </view>
                                <view class="fz28">
                                    <text>分房：</text>
                                    <text>{{ item.HouseNo }}</text>
                                </view>
                            </view>
                            <view>
                                <text>人数：</text>
                                <text>{{ item.peopleNum }}</text>
                            </view>
                        </view>
                        <view>
                            <view class="roomListC-box PA20 MB20" v-for="(child,c) in item.list">
                                <view class="roomListC-Title row justify-between"
                                @click="showPassengerInfo(child)">
                                    <view class="fz28 row items-center">
                                        <view>{{ child.GuestName }}</view>
                                        <view class="ML20 color999 MR20">({{ child.ESurName }}{{ child.EName }})</view>
                                        <img v-if="child.Sex==2" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638875723517488195.png" style="width: 35rpx;height: 35rpx;"/>
                                        <img v-else src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638875723461863180.png" style="width: 35rpx;height: 35rpx;"/>
                                    </view>
                                    <view>
                                        <u-icon class="" name="arrow" size="32" color="#ccc"></u-icon>
                                    </view>
                                </view>
                                <view class="roomListC-bind row fz20">
                                    <view>{{ child.VisaType }}</view>
                                    <view v-if="child.IsLeaderOrder">{{ child.GroupTypeStr }}</view>
                                </view>
                                <view class="roomListC-info row">
                                    <view class="roomListC-info-L row">
                                        <view>护照号</view>
                                        <view class="flex1">{{ child.PassportNo }}</view>
                                    </view>
                                    <view class="roomListC-info-R row">
                                        <view>签发地</view>
                                        <view class="flex1">{{ child.BirthdayAddress }}</view>
                                    </view>
                                </view>
                                <view class="roomListC-info row">
                                    <view class="roomListC-info-L row">
                                        <view>客户手机</view>
                                        <view class="flex1">{{ child.MobilePhone }}</view>
                                    </view>
                                    <view class="roomListC-info-R row">
                                        <view>业务员</view>
                                        <view class="flex1">{{ child.CreateBy }}</view>
                                    </view>
                                </view>
                                <view class="roomListC-info row">
                                    <view class="roomListC-info-L row">
                                        <view>出生日期</view>
                                        <view class="flex1">{{ child.Birthday }}</view>
                                    </view>
                                    <view class="roomListC-info-R row">
                                        <view>单价</view>
                                        <view class="flex1">¥{{ child.UnitPrice }}</view>
                                    </view>
                                </view>
                                <!--<view class="roomListC-info row">
                                    <view class="roomListC-info-L row">
                                        <view>备注</view>
                                        <view class="flex1 colorE1432E">{{ child.UnitPrice }}</view>
                                    </view>
                                </view>-->
                            </view>

                        </view>
                    </view>
                </template>
                
            </view>
            
            
        </scroll-view>
        <passengerInfo v-if="showVisible" 
        :datas="childDatas"
        @close="showVisible=false"></passengerInfo>
    </view>
    
</template>
<script>
import headers from "@/components/header/header";
import passengerInfo from "./components/passengerInfo";
export default {
    components: {
        headers,
        passengerInfo
    },
    data() {
        return {
            pageTitle: '分房表',
            showVisible: false,
            msg:{
                TCIDList: ''
            },
            currentId: '',
            currentIndex: 0,
            dataList: [],
            datas: [],
            HouseTypeList:[
                {name:'单间',id:1},
                {name:'双人间',id:2},
                {name:'大床房',id:3},
                {name:'三人间',id:4},
                {name:'拼凑双人间',id:5},
            ],
            childDatas:{}
        }
    },
    onLoad(options){
        if(options.TCIDs){
            this.msg.TCIDList = options.TCIDs
            this.init()
        }
    },
    created() {

    },
    mounted() {

    },
    methods: {
        getTypeStr(HouseType){
            let findIndex = this.HouseTypeList.findIndex((item)=>{
                return item.id==HouseType
            })
            if(findIndex!=-1){
                return this.HouseTypeList[findIndex].name
            }
        },
        newData(item){
            this.currentId = item.TCNUM
            this.datas = []
            item.result.forEach(x => {
                let obj = {
                    HouseType: 0,
                    HouseNo: 1,
                    peopleNum: 0,
                    list: [],
                }
                obj.HouseType = x[0].HouseType
                obj.HouseNo = x[0].HouseNo
                obj.peopleNum = x.length
                x.forEach(y=>{
                    obj.list.push(y)
                })
                this.datas.push(obj)
            });
        },
        showPassengerInfo(child){
            this.showVisible = true
            this.childDatas = child
        },
        init() {
            uni.showLoading()
            this.apipost("sellorder_get_GetGuestListForHouse", this.msg, (res) => {
                if (res.resultCode == 1) {
                    uni.hideLoading()
                    this.dataList = res.data;
                    this.currentId = res.data[0].TCNUM
                    this.datas = []
                    res.data[0].result.forEach(x => {
                        let obj = {
                            HouseType: 0,
                            HouseNo: 1,
                            peopleNum: 0,
                            list: [],
                        }
                        obj.HouseType = x[0].HouseType
                        obj.HouseNo = x[0].HouseNo
                        obj.peopleNum = x.length
                        x.forEach(y=>{
                            obj.list.push(y)
                        })
                        this.datas.push(obj)
                    });
                    console.log(this.datas,'----------44')
                }
            }, (failed) => {
                uni.hideLoading()
                uni.showToast({
                    title: failed.message,
                    icon: "none",
                });
            }, (error) => {
                uni.hideLoading()
            })
        },
    },
}
</script>