<style lang="scss" scoped>
	@import url("@/asset/css/flex.css");
    .roomListBox{
        background: #f5f5f5;
        height: 100vh;
    }
    .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: #FD9700;
    }
    .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;
    }
</style>
<template>
    <view class="roomListBox">
        <view class="roomHeader">
            <headers :title="pageTitle" color="#fff"></headers>
        </view>
        <scroll-view scroll-y="true"
        :enable-back-to-top="true" :enable-flex="true" style="height: 100%;">
            <view class="PA30" style="margin-top: 160rpx;">
                <view class="roomListCenter PX20 MT30">
                    <view class="roomListC-header PY15 row justify-between items-center">
                        <view class="roomListC-L row items-center fz24">
                            <view class="roomListC-L-type">
                                单间
                            </view>
                            <view class="fz28">
                                <text>分房：</text>
                                <text>20</text>
                            </view>
                        </view>
                        <view>
                            <text>人数：</text>
                            <text>1</text>
                        </view>
                    </view>
                    <view>
                        <view class="roomListC-box PA20 MB20">
                            <view class="roomListC-Title row justify-between"
                            @click="showPassengerInfo">
                                <view class="fz28 row">
                                    <view>姓名</view>
                                    <view class="ML20 color999">(jhggyookp[p[]])</view>
                                    <img src="" style="width: 21rpx;height: 21rpx;"/>
                                </view>
                                <view>
                                    <u-icon class="" name="arrow" size="32" color="#ccc"></u-icon>
                                </view>
                            </view>
                            <view class="roomListC-bind row fz20">
                                <view>未绑定</view>
                                <view>领队</view>
                            </view>
                            <view class="roomListC-info row">
                                <view class="roomListC-info-L row">
                                    <view>护照号</view>
                                    <view class="flex1">12121</view>
                                </view>
                                <view class="roomListC-info-R row">
                                    <view>签发地</view>
                                    <view class="flex1">2121</view>
                                </view>
                            </view>
                            <view class="roomListC-info row">
                                <view class="roomListC-info-L row">
                                    <view>客户手机</view>
                                    <view class="flex1">2121</view>
                                </view>
                                <view class="roomListC-info-R row">
                                    <view>业务员</view>
                                    <view class="flex1">2121</view>
                                </view>
                            </view>
                            <view class="roomListC-info row">
                                <view class="roomListC-info-L row">
                                    <view>出生日期</view>
                                    <view class="flex1">2121</view>
                                </view>
                                <view class="roomListC-info-R row">
                                    <view>单价</view>
                                    <view class="flex1">¥</view>
                                </view>
                            </view>
                            <view class="roomListC-info row">
                                <view class="roomListC-info-L row">
                                    <view>备注</view>
                                    <view class="flex1 colorE1432E">21211</view>
                                </view>
                            </view>
                        </view>

                    </view>
                </view>
            </view>
            
            
        </scroll-view>
        <passengerInfo v-if="showVisible" @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
        }
    },
    onLoad(option){

    },
    created() {

    },
    mounted() {

    },
    methods: {
        showPassengerInfo(){
            this.showVisible = true
        }
    },
}
</script>