<style lang="scss" scoped>
	@import url("@/asset/css/flex.css");
    .passHeader{
        background: linear-gradient(-30deg, #4FA9FF, #4779FF);
    }
    .carrHeader-title{
        width: 100%;
        position: relative;
        left: 0;
        right: 0;
        font-size: 32rpx;
    }
    .carrHeader-title.carrHeader-titleL{
        text-indent: 80rpx;
    }
    .carrHeader-left{
        position: absolute;
        left: 32rpx;
        z-index: 3;
    }
    .carrHeaderBox{
        width: 100%;
        height: 88rpx;
        padding: 0 32rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
    .carrHeader{
        padding-top: 48rpx;
    }
    .passCenter{
        margin-bottom: 25rpx;
    }
    .passCenter-L{
        width: 150rpx;
    }
    .passCenter-R view{
        font-weight: 500;
    }
</style>
<template>
     <u-popup mode="center" border-radius="20" 
        :popup="false" 
        v-model="showVisible" :maskCloseAble="true" 
        length="100%" :safeAreaInsetBottom="true" 
        @close="close" :z-index="9999">
        <view class="column" style="height: 100vh;">
            <view class="passHeader">
                <view class="carrHeader" :style="[titleStyle]">
                    <view class="carrHeaderBox">
                        <view class="carrHeader-left">
                            <view class="carrHeader-left-icon" @click="close">
                                <uni-icons name="" type="closeempty" size="25" color="#fff"></uni-icons>
                            </view>
                        </view>
                        <view class="carrHeader-title"
                        :style="{'color':'#fff','text-align':'center'}">
                            <slot>{{pageTitle}}</slot>
                        </view>
                    </view>
                </view>
            </view>
            <scroll-view class="flex1" :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" 
            style="background: #ffff;">
                <view class="passCenterBox PA30">
                    <view class="passCenter row items-center">
                        <view class="passCenter-L fz24">旅客姓名</view>
                        <view class="passCenter-R row">
                            <view class="fz28">{{ datas.GuestName }}</view>
                            <text class="ML10 color999">({{ datas.ESurName }}{{ datas.EName }})</text>
                        </view>
                    </view>
                    <view class="passCenter row items-center">
                        <view class="passCenter-L fz24">性别</view>
                        <view class="passCenter-R row">
                            <view class="fz28">{{ datas.Sex==2?'女':'男' }}</view>
                        </view>
                    </view>
                    <view class="passCenter row items-center">
                        <view class="passCenter-L fz24">出生日期</view>
                        <view class="passCenter-R row">
                            <view class="fz28">{{ datas.Birthday }}</view>
                        </view>
                    </view>
                    <view class="passCenter row items-center">
                        <view class="passCenter-L fz24">年龄类型</view>
                        <view class="passCenter-R row">
                            <view class="fz28">{{ datas.PeopleType }}</view>
                        </view>
                    </view>
                    <view class="passCenter row items-center">
                        <view class="passCenter-L fz24">出生地</view>
                        <view class="passCenter-R row">
                            <view class="fz28">{{ datas.BirthdayAddress }}</view>
                        </view>
                    </view>
                    <view class="passCenter row items-center">
                        <view class="passCenter-L fz24">护照号</view>
                        <view class="passCenter-R row">
                            <view class="fz28">{{ datas.PassportNo }}</view>
                        </view>
                    </view>
                    <view class="passCenter row items-center">
                        <view class="passCenter-L fz24">签发地</view>
                        <view class="passCenter-R row">
                            <view class="fz28">{{ datas.BirthdayAddress }}</view>
                        </view>
                    </view>
                    <view class="passCenter row items-center">
                        <view class="passCenter-L fz24">签发日期</view>
                        <view class="passCenter-R row">
                            <view class="fz28">{{ datas.PassportIssued }}</view>
                        </view>
                    </view>
                    <view class="passCenter row items-center">
                        <view class="passCenter-L fz24">护照有效期</view>
                        <view class="passCenter-R row">
                            <view class="fz28">{{ datas.PassportExpiry }}</view>
                        </view>
                    </view>
                    <view class="passCenter row items-center">
                        <view class="passCenter-L fz24">客户手机</view>
                        <view class="passCenter-R row">
                            <view class="fz28">{{ datas.MobilePhone }}</view>
                        </view>
                    </view>
                    <view class="passCenter row items-center">
                        <view class="passCenter-L fz24">身份证</view>
                        <view class="passCenter-R row">
                            <view class="fz28">{{ datas.IdCard }}</view>
                        </view>
                    </view>
                    <view class="passCenter row items-center">
                        <view class="passCenter-L fz24">单价</view>
                        <view class="passCenter-R row">
                            <view class="fz28">{{ datas.UnitPrice?'¥'+datas.UnitPrice:'' }}</view>
                        </view>
                    </view>
                    <view class="passCenter row items-center">
                        <view class="passCenter-L fz24">业务员</view>
                        <view class="passCenter-R row">
                            <view class="fz28">{{ datas.CreateBy }}</view>
                        </view>
                    </view>
                    <view class="passCenter row items-center">
                        <view class="passCenter-L fz24">方式</view>
                        <view class="passCenter-R row">
                            <view class="fz28">{{ datas.GroupTypeStr }}</view>
                        </view>
                    </view>
                    <view class="passCenter row items-center">
                        <view class="passCenter-L fz24">航位</view>
                        <view class="passCenter-R row">
                            <view class="fz28">经济舱（Y）</view>
                        </view>
                    </view>
                    <view class="passCenter row items-center">
                        <view class="passCenter-L fz24">签证类型</view>
                        <view class="passCenter-R row">
                            <view class="fz28">{{ datas.VisaType }}</view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </u-popup>
</template>
<script>
import headers from "@/components/header/header";
export default {
    props:['datas'],
    components: {
        headers
    },
    data() {
        return {
            pageTitle: '旅客',
            showVisible: true,
            newCurrent: 0,
            titleStyle: {},
        }
    },
    watch: {
        datas:{
            handler(newVal,oldVal){
                
            },
            immediate:true,
        },
    },
    mounted() {
        const that = this
        uni.getSystemInfo({
          success(res) {
            that.titleStyle = {
              paddingTop: `${res.statusBarHeight}px`
            };
          },
        });
        this.showVisible = true
    },
    methods: {
        close(){
            this.showVisible = false
            this.$emit('close')
        },
    }
}
</script>