<template>
    <view class="TicketOrderDetailsBg height100vh">
        <scroll-view
            scroll-y="true"
            style="height: 100%; flex: 1; box-sizing: border-box"
            @scroll="scroll"
            >
        <NavigationHeader :title="title" :titleStyle="titleStyle"></NavigationHeader>
        <!--  :style="{top:topheight+'px'}" -->
        <view class="TicketOrderDetailsC overflow PT123 PB260">
            <view class="PY53">
                <view class="row-sb-n MT20">
                    <view class="flexS row-aic-n">
                        <img class="inlineblock MR20" mode="widthFix" style="width: 44rpx;height: 44rpx;"
                            :src="statusImg[0]"/>
                            <!-- 已付款 待付款 已取消colorC6C1BC  -->
                        <text class="fz36 fontBold">已付款</text>
                    </view>
                    <view @click="getDetail">
                        <text class="fz26 colorC09D4F">¥</text>
                        <text class="fz36 colorC09D4F fontBold ML15"> 759.9</text>
                        <img class="inlineblock ML10" mode="widthFix" style="width: 18rpx;height: 12rpx;"
                            :src="statusImg[3]"/>
                    </view>
                </view>
                <view class="TicketOrderDetailsCard MT45 bgFFF hidden">
                    <view class="row-sb-n">
                        <view class="row-aic-n">
                            <view class="fz28 color111 ML20">
                                <text>09-30</text> <text class="ML10">周六</text>
                            </view>
                            <view class="fz28 color111 ML31">
                                总时长 5h
                                </view> 
                        </view>
                        <view class="fz28 colorE1C278 row-aic-n" @click="TicketDetails(items)">
                            <text>详情</text>
                            <uni-icons class="ML10" color="#DEBF7B" :type="items.show?'arrowdown':'arrowright'" size="14"></uni-icons>
                             <!-- <uni-icons class="ML10" color="#DEBF7B" type="arrowright" size="14"></uni-icons> -->
                        </view>   
                    </view>
                    <view class="MT60 PX50" style="display: none;">
                        <view class="row relative" v-for="(item,index) in 2"
                        :class="[index==0?'MB50':'']">
                            <text v-if="index==1" class="fz18 fontWeight400 colorFF5858 absolute airTicketDetailsCard-timeT">
                                10-01 周日
                            </text>
                            <view class="airTicketDetailsCard-timeL column flexS MR20 textRight">
                                <view v-if="index==0" class="fz28 fontBold relative relativeFT10">09:00 </view>
                                <view v-if="index==1" class="MT25 fz28 fontBold">
                                    11:30
                                </view>
                            </view>
                            <view class="flexS MR30">
                                <view class="width-lineH49 bgE1C278 relative">
                                    <view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinT"></view>
                                    <template v-if="index">
                                        <view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT2"></view>
                                        <view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT3"></view>
                                        <view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT4"></view>
                                     </template>
                                    <view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinB"></view>
                                    <template v-if="index!=1">
                                        <view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinB2"></view>
                                    </template>
                                </view>
                            </view>
                            <view class="column flexG relative">
                                <view v-if="index==1" class="airTicketDetailsCard-ZhuanNum bgE1C278 fz18 colorFFF absolute">转+2</view>
                                <view class="airTicketDetailsCard-title row-aic-n absolute" v-if="index==0">
                                    <img class="inlineblock flexS" mode="widthFix" style="width: 20rpx;height: 17rpx;"
                                    src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696749257000_469.png"/>
                                    <view class="flexG">
                                        <text class="block width100One overflow fz20 ML5 color9999A5 fontWeight400">东航 CA1852 </text>
                                    </view>
                                </view>
                                <view class="fz28 fontBold relative relativeFT8" v-if="index==0">
                                    <text class="block width100One hidden">CTU 双流机场 T2</text>
                                </view>
                                <view class="fz28 fontBold MT25" v-if="index==1">
                                    <text class="block width100One hidden">PEK 首都机场 T3</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="MT60 PX50 MB50">
                        <view class="row-aic-n relative" v-for="(item,index) in 3"
                        :class="[index!=2?'MB70':'']">
                            <text v-if="index==2" class="fz18 fontWeight400 colorFF5858 absolute airTicketDetailsCard-timeT">
                                10-01 周日
                            </text>
                            <view class="airTicketDetailsCard-timeL column flexS MR20 textRight">
                                <view :class="[index?'fz24':'fz28 fontBold']">09:00 </view>
                                <view class="MT35" :class="[index!=2?'fz24':'fz28 fontBold']">
                                    11:30
                                </view>
                            </view>
                            <view class="flexS MR30">
                                <view class="width-lineH83 bgE1C278 relative">
                                    <view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinT"></view>
                                    <template v-if="index">
                                        <view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT2"></view>
                                        <view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT3"></view>
                                     </template>
                                    <view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinB"></view>
                                    <template v-if="index!=2">
                                        <view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinB2"></view>
                                        <view class="bgE1C278 fz18 colorFFF absolute airTicketDetailsCard-LinText">中转</view>
                                    </template>
                                </view>
                            </view>
                            <view class="column flexG relative">
                                <view class="airTicketDetailsCard-title row-aic-n absolute">
                                    <img class="inlineblock flexS" mode="widthFix" style="width: 20rpx;height: 17rpx;"
                                    src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696749257000_469.png"/>
                                    <view class="flexG">
                                        <text class="block width100One overflow fz20 ML5 color9999A5 fontWeight400">东航 CA1852 </text>
                                    </view>
                                </view>
                                <view class="fz28 fontBold relative relativeFT8">
                                    <text class="block width100One hidden">CTU 双流机场 T2</text>
                                </view>
                                <view class="fz28 fontBold MT25">
                                    <text class="block width100One hidden">PEK 首都机场 T3</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="height-dashed1 DashedECF1F4 relative MT30">
                        <view class="TicketOrderDetailsBor-LR TicketOrderDetailsBor-L absolute z-index2 bgF2EEE5"></view>
                        <view class="TicketOrderDetailsBor-LR TicketOrderDetailsBor-R absolute z-index2 bgF2EEE5"></view>
                    </view>
                    <view class="MT38">
                        <view class="TicketOrderDetailsN-box" v-for="(item,index) in 3">
                            <view class="row-sb-n ">
                                <view class="TicketOrderDetails-Name MR40 fz26 color9999A5 textRight flexS">
                                    <text>01</text>
                                    <text class="ML15">乘机人</text>
                                </view>
                                <view class="fz26 fontBold color1D1D20 flexG">
                                    <text class="width100One ellipsis1">李润豪</text>
                                </view>
                                <view class="fz22 color9999A5 flexS">
                                    ¥258.5
                                </view>
                            </view>
                            <view class="row-sb-n MT25">
                                <view class="TicketOrderDetails-Name MR40 fz26 color9999A5 textRight flexS">
                                    <text></text>
                                    <text class="ML15">身份证</text>
                                </view>
                                <view class="fz26 fontBold color1D1D20 flexG">
                                    514474455121454521
                                </view>
                            </view>
                        </view>
                        
                    </view>
                    
                </view>
                
            </view>
            <view class="airTicketDetailsInstructionsBox" style="display: none;">
                <img class="inlineblock" mode="widthFix" style="width: 125rpx;height: 30rpx;"
                    src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696821283000_148.png"/>
                <view class="airTicketDetailsInstructions MT15 fz24">
                    本模块为保险投保页面，由明亚保险经纪股份有限公司管理运
                    营。请仔细阅读客户通知书、保险代理协议、投保须知及条款
                    等重要内容。为保障你的权益，我们将会安全记录你的操作。本模
                    块为保险投保页面，由明亚保险经纪股份有限公司管理运营。请
                    仔细阅读客户通知书、保险代理协议、投保须知及条款等重要内容
                    。为保障你的权益，我们将会安全记录你的操作。本模块为保险投
                    保页面，由明亚保险经纪股份有限公司管理运营。请仔细阅读客户通知
                    书、保险代理协议、投保须知及条款等重要内容。为保障你的权益，我
                    们将会安全记录你的操作。本模块为保险投保页面，由明亚保险经纪股份
                    有限公司管理运营。请仔细阅读客户通知书、保险代理协议、投保须知及
                    条款等重要内容。为保障你的权益，我们将会安全记录你的操作。
                </view>
            </view>
        </view>
        </scroll-view>
        <view class="airTicketDetailsFooter fixedFooter bgFFF fixed row-ajc-n z-index2">
            <view class="TicketOrderDetailsFooter">
                <view class="airTicketDetailsFooter-order bgDEBF7B row-ajc-w fontBold">
                    <!-- 取消订单 立即支付 重新下单 -->
                    <text class="fz32">取消订单</text>
                </view>
            </view>
        </view>
        <u-popup
        v-model="showDetailPreviwe"
        mode="bottom"
        border-radius="50"
        :safe-area-inset-bottom="true">
            <view class="TicketOrderDetailsGet-box relative">
                <uni-icons class="TicketOrderDetailsGet-close absolute" 
                color="#9999A5" type="closeempty" size="24"
                @click="showDetailPreviwe=false"></uni-icons>
                <view class="fz30 fontBold textCenter">金额明细</view>
                <view class="MT75 TicketOrderDetailsGetC">
                    <view class="TicketOrderDetailsGet-Num MB52">
                        <view class="row-sb-n">
                            <text class="flexS">人数</text>
                            <view class="TicketOrderDetailsGet-NumA flexS ML30">
                                <view class="height-line1 lineC8C8CF"></view>
                            </view>
                            <view class="TicketOrderDetailsGet-NumR row-aic-n">
                                <view class="fz30 fontBold ML60 MR60 textRight">
                                    ¥654
                                </view>
                                <view class="fz30 fontBold textRight">
                                    ×1人
                                </view>
                            </view>
                        </view>
                        <view class="fz24 color9999A5 MT25">(2岁及2岁以上的顾客)</view>
                    </view>
                    <view class="TicketOrderDetailsGet-Num MB52">
                        <view class="row-sb-n">
                            <text class="flexS">婴儿</text>
                            <view class="TicketOrderDetailsGet-NumA flexS ML30">
                                <view class="height-line1 lineC8C8CF"></view>
                            </view>
                            <view class="TicketOrderDetailsGet-NumR row-aic-n">
                                <view class="fz30 fontBold ML60 MR60 textRight">
                                    ¥654
                                </view>
                                <view class="fz30 fontBold textRight">
                                    ×1人
                                </view>
                            </view>
                        </view>
                        <view class="fz24 color9999A5 MT25">(2岁以下的顾客)</view>
                    </view>
                </view>
                <view class="absolute TicketOrderDetailsGet-Footer bgFFF row-sb-n">
                    <view>
                        <view class="fontBold">
                            <text class="fz32 color111">¥ </text>
                            <text class="fz52">3,200</text>
                        </view>
                        <view class="fz26 color9999A5 MT5">共 2 人</view>
                    </view>
                    <view>
                        <view class="airTicketDetailsFooter-order PXY2463 bgDEBF7B row-ajc-w fontBold">
                            <!-- 取消订单 立即支付 重新下单 -->
                            <text class="fz32">去支付</text>
                        </view>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>
<script>
    import NavigationHeader from "./components/NavigationHeader.vue";
    export default {
        components: {
            NavigationHeader
        },
        data() {
            return {
                showDetailPreviwe: false,
                topheight:0,
                titleStyle:{},
                boxOption: 0,
                statusImg:[
                    'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696906390000_78.png',
                    'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696906393000_283.png',
                    'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696906397000_762.png',
                    'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696906709000_896.png'
                ],
                title:'订单详情'
            }
        },
        onLoad(options){
            let that = this;
            uni.getSystemInfo({
                success(res) {
                    that.titleStyle = {
                        height: "45px",
                        paddingTop: `${res.statusBarHeight}px`,
                        opacity: 0,
                    };
                    that.topheight = 55+res.statusBarHeight
                },
            });
        },
        created() {},
        mounted() {
            
        },
        methods: {
            getDetail(){
                this.showDetailPreviwe = true
            },
            scroll(e) {
                this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
                this.titleStyle.opacity =
                e.detail.scrollTop - 100 < 0
                ? 0
                : Math.floor(e.detail.scrollTop - 100) / 100 > 1
                ? 1
                : Math.floor(e.detail.scrollTop - 100) / 10;
                this.$forceUpdate();
            },
        }
    }
</script>
<style scoped>
@import url("@/asset/css/flex.css");
@import url("./style.css");
.TicketOrderDetailsC{
    
}
.TicketOrderDetailsCard{
    border-radius: 50rpx;
    padding: 30rpx 50rpx 37rpx 42rpx;
    margin-bottom: 90rpx;
}
.TicketOrderDetailsCard-Time{
    
}
.TicketOrderDetails-Name{
    width: 122rpx;
}
.TicketOrderDetailsN-box{
    margin-bottom: 47rpx;
}
.TicketOrderDetailsN-box:last-child{
    margin-bottom: 0;
}
.TicketOrderDetailsFooter{
    padding: 38rpx 0 67rpx 0;
}
.TicketOrderDetailsGet-box{
    margin: 46rpx 53rpx 51rpx 53rpx;
}
.TicketOrderDetailsGet-close{
    right: 0;
    top: 0;
}
.TicketOrderDetailsGetC{
    padding-bottom: 300rpx;
}
.TicketOrderDetailsGet-Num{
    
}
.TicketOrderDetailsGet-NumA{
    width: 295rpx;
}
.TicketOrderDetailsGet-NumR{
    /* width: 350rpx; */
}
.TicketOrderDetailsGet-Footer{
    left: 0;
    right: 0;
    bottom: 0;
}
.airTicketDetailsFooter-order.PXY2463{
    padding: 24rpx 63rpx;
}
.TicketOrderDetailsBor-LR{
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
}
.TicketOrderDetailsBor-L{
    left: -78rpx;
    top: -25rpx;
}
.TicketOrderDetailsBor-R{
    right: -78rpx;
    top: -25rpx;
}
</style>