<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,
					CustomerId: 0, //客户ID
					orderType: -1,
					orderState: 0,
					GroupType: 5, //机票订单
					queryDays: 0,
					OutBranchId: -1,
					DirectCustomerId: 0,
				},
				pageCount: 0,
				dataList: [],
				TicketOrderTyle: [{
						Name: '全部订单',
						Id: 0
					},
					{
						Name: '已付款',
						Id: 3
					},
					{
						Name: '待付款',
						Id: 1
					},
					{
						Name: '已取消',
						Id: 4
					},
				],
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				scrollHeight: '30px',
				b2b_user_info: {},
			}
		},
		onLoad(options) {
			this.msg.orderState = options.orderState ? options.orderState : 0;
			this.b2b_user_info = uni.getStorageSync('b2b_user');
			//#ifdef MP-DI
				this.msg.DirectCustomerId = this.b2b_user_info.customerId;
			//#endif
			//#ifdef MP-AG
				this.msg.CustomerId = this.b2b_user_info.customerId;
			//#endif
		},
		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
								}

								let FlightList = x.flightList.filter(z => {
									return z.flightSubType != 3
								})
								let FlightList2 = x.flightList.filter(z => {
									return z.flightSubType == 3
								})

								x.flightList.forEach((y, index) => {
									let date = y.flightDate.split('-')
									y.time = `${date[1]}-${date[2]}`
									y.week = getDateWeek(y.flightDate)
									if (index == 0) {
										y.frequency = FlightList.length - 1
										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.frequency = FlightList2.length - 1
										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;
							if (this.pageCount == 1) this.status = "nomore";
						}
						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>
