<template>
    <view class="bgF5 height100">
        <view class="TicketOrderList-header bgFFF fixed row-sb-n z-index3">
            <view v-for="(item,index) in TicketOrderTyle"
            class="border1 borderDEBF7B hidden fz24 bgF5 textCenter">
                {{item.Name}}
            </view>
        </view>
        <!-- <u-empty v-if="dataList.length==0" text="暂无数据" mode="data"></u-empty> -->
        <scroll-view :scroll-y="true" style="background-color: #f0f4f7;" 
        :enable-back-to-top="true" :enable-flex="true"
		 @scrolltolower="lower" :style="{ 'height': `calc(100% - ${scrollHeight})`}">
         <view class="TicketOrderListC">
            <view class="TicketOrderList-box">
                <template v-for="(item,index) in 15">
                    <TicketOrderList></TicketOrderList>
                </template>
            </view>
            <view style="padding:10px 0;">
                <u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="0" :margin-bottom="0" bg-color="#f0f4f7" />
            </view>
        </view>
        </scroll-view>
    </view>
</template>
<script>
    import TicketOrderList from "./components/TicketOrderList.vue";
    export default {
        components: {
            TicketOrderList
        },
        data() {
            return {
                status: 'loadmore',
                msg:{
                    ageIndex:1,
					pageSize:5,
					OrderStaus:0,
					TeacherId:0,
					CourseId:0,
					ID:0,
					StartTime:'',
					EndTime:''
                },
                dataList: [],
                loading: false,
                TicketOrderTyle:[
                    {Name:'全部订单',Id:1},
                    {Name:'已付款',Id:2},
                    {Name:'待付款',Id:3},
                    {Name:'已取消',Id:4},
                ],
                loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
                scrollHeight: 0,
            }
        },
        onLoad(options){
            
        },
        created() {},
        mounted() {
            setTimeout(() => {
				this.getHeadHeight();
			}, 1000);
        },
        methods: {
            getHeadHeight() {
				let that = this;
				const query = uni.createSelectorQuery().in(this);
				query
					.select(".TicketOrderList-header")
					.boundingClientRect((data) => {
						that.scrollHeight = data.height + "px";
					})
					.exec();
			},
            //滚动加载
			lower(e) {
				if (this.msg.pageIndex < this.pageCount) {
					this.msg.pageIndex++;
					this.status = "loading";
				} else {
					this.status = "nomore";
				}
			},
        }
    }
</script>
<style scoped>
@import url("@/asset/css/flex.css");
@import url("./style.css");
.TicketOrderList-header{
    left: 0;
    right: 0;
    top: 0;
    padding: 27rpx 54rpx;
}
.TicketOrderList-header>view{
    width: 135rpx;
    padding: 15rpx 0;
    border-radius: 20rpx;
}
.TicketOrderListC{
    padding-top: 145rpx;
}
.TicketOrderList-box{
    padding: 0 54rpx;
    padding-bottom: 49rpx;
}
</style>