<template>
    <view class="bgF5"
    :class="[dataList.length==0||3>dataList.length?'height100vh':'height100']">
        <view class="TicketOrderList-header bgFFF fixed row-sb-n z-index3">
            <view v-for="(item,index) in TicketOrderTyle"
            class="border1 hidden fz24 bgF5 textCenter"
            :class="[msg.orderState==item.Id?'borderDEBF7B':'borderF5']"
            @click="research(item.Id)">
                {{item.Name}}
            </view>
        </view>
        <u-empty v-if="dataList.length==0" text="暂无数据" mode="data"></u-empty>
        <scroll-view v-else :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">
                <TicketOrderList :dataList="dataList" :msg="msg" @research="research"></TicketOrderList>
            </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";
    import { getDateWeek } from "./dates.js";
    export default {
        components: {
            TicketOrderList
        },
        data() {
            return {
                scrollTop: 0,
                status: 'loadmore',
                msg:{
                    pageIndex: 1,
                    pageSize: 15,
                    //MiniAppUserId: 0,
                    orderType:-1,
                    orderState: 0,
                    GroupType:5,//线路订单
                    queryDays:0,
                    OutBranchId:-1
                },
                pageCount: 0,
                dataList: [],
                TicketOrderTyle:[
                    {Name:'全部订单',Id:0},
                    {Name:'已付款',Id:3},
                    {Name:'待付款',Id:1},
                    {Name:'已取消',Id:4},
                ],
                loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
                scrollHeight: '30px',
            }
        },
        onLoad(options){
            this.msg.orderState = options.orderState?options.orderState:0
        },
        created() {},
        onShow() {
            
        },
        mounted() {
            this.getList()
            setTimeout(() => {
				this.getHeadHeight();
			}, 1000);
        },
        methods: {
            getHeadHeight() {
                return
				let that = this;
				const query = uni.createSelectorQuery().in(this);
				query
					.select(".TicketOrderList-header")
					.boundingClientRect((data) => {
						that.scrollHeight = data.height + "px";
					})
					.exec();
			},
            research(item) {
                this.msg.orderState = item
				this.msg.pageIndex = 1;
				this.getList(1);
			},
            //获取列表数据
			getList(type) {
				if (type == 1) {
					this.dataList = [];
				}
                uni.showLoading()
				this.apipost(
                    "sellorder_post_GetTravelOrderAppletList",
                    this.msg,
					(res) => {
						if (res.resultCode == 1) {
                            let arr = function(list){
                                list.forEach(x=>{
                                    x.time = ''
                                    x.week = ''
                                    x.duration = ''
                                    x.frequency = 0
                                    x.different = 0 //是否异地
                                    x.NewFlightList = []
                                    x.loading = false
                                })
                            }
                            arr(res.data.pageData)
                            res.data.pageData.forEach(x=>{
                                arr(x.flightList)
                            })
                            res.data.pageData.forEach(x=>{
                                if(x.flightList.length>2){
                                    x.different = 1
                                }
                                x.flightList.forEach((y,index)=>{
                                    let date =  y.flightDate.split('-')
                                    y.time = `${date[1]}-${date[2]}`
                                    y.week = getDateWeek(y.flightDate)
                                    y.frequency = x.flightList.length-2>1?x.flightList.length-2:0
                                    if(index==0){
                                        y.duration = `${x.departureTime.days>0?x.departureTime.days+'d ':''}${x.departureTime.hours>0?x.departureTime.hours+'h ':''}${x.departureTime.minutes>0?x.departureTime.minutes+'m ':''}`
                                        x.NewFlightList.push(y)
                                    }
                                    if(x.flightList.length-1==index){
                                        y.duration = `${x.arrivalTime.days>0?x.arrivalTime.days+'d ':''}${x.arrivalTime.hours>0?x.arrivalTime.hours+'h ':''}${x.arrivalTime.minutes>0?x.arrivalTime.minutes+'m ':''}`
                                        x.NewFlightList.push(y)
                                    }
                                })
                            })
							if (this.msg.pageIndex === 1) {
								this.dataList = res.data.pageData;
							} else {
								this.dataList = this.dataList.concat(res.data.pageData);
							}
							this.pageCount = res.data.pageCount;
						}
                        uni.hideLoading()
					}
				);
			},
            //滚动加载
			lower(e) {
				if (this.msg.pageIndex < this.pageCount) {
					this.msg.pageIndex++;
					this.status = "loading";
                    this.getList();
				} 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>