<style lang="scss" scoped>
	@import url("@/asset/css/flex.css");

	.AggOrdBox {
		height: 100vh;
		background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772246864278108.jpg')no-repeat #F3F1EF;
		background-size: 100% 240rpx;

		.AggOrdHeader {
			padding-bottom: 20rpx;
			// background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772246864278108.jpg')no-repeat;
			// background-size: 100% 100%;
		}

		.AggOrdStatus {
			padding-top: 20rpx;

			.AggOrdT {
				width: 25%;
				padding: 10rpx 20rpx;
				font-size: 28rpx;
				color: #080A09;
				position: relative;
			}

			.AggOrdT.active {
				color: #B99846;
				font-weight: bold;
			}

			.AggOrdT text {
				display: block;
				text-align: center;
			}

			.AggOrdT view {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
			}

			.AggOrdT view view {
				width: 60rpx;
				height: 10rpx;
				margin: auto;
				background: #E6E6E6;
				border-radius: 10rpx;
			}
		}

	}

	/deep/.showModalInfo .u-drawer-bottom {
		background-color: rgba(23, 23, 23, 0) !important;
	}
</style>
<template>
	<view class="AggOrdBox column">
		<view class="AggOrdHeader" :style="[titleStyle]">
			<AggOrdHeader :title="pageTitle" @change="getOrderType" :params="msg"></AggOrdHeader>
			<view class="AggOrdStatus row items-center">
				<template>
					<view class="AggOrdT" v-for="(item,index) in statusList" :key="index"
						:class="[msg.OrderStatus==item.ID?'active':'']" @click="getStatus(item.ID)">
						<text>{{ item.Name }}</text>
					</view>
				</template>
			</view>
		</view>
		<view class="col" style="height: 1px;flex: 1;overflow: hidden;padding-top: 10rpx;">
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
				style="height: 100%;">
				<orders :orders="g" @research="research"></orders>
				<u-empty v-if="g.length==0" text="暂无数据" mode="data" padding-top="20"></u-empty>
				<u-loadmore v-else :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
					:margin-bottom="20" bg-color="#F3F1EF" />
				<view style="width: 100%;height: 20rpx;"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mappingListType,
		mappingListTypeTy
	} from "../../utils/producttypeenum";
	import EnumHelper from '../../utils/enumhelper';
	import OrderStatusEnum from '../../utils/orderStautsEnum';
	import AggOrdHeader from "./components/header.vue";
	import orders from "./components/orders.vue";
	export default {
		components: {
			AggOrdHeader,
			orders,
		},
		data() {
			return {
				pageTitle: '所有订单',
				msg: {
					pageSize: 10,
					pageIndex: 1,
					OrderStatus: 0,
					GoodsName: '',
					OrderTypeStr: ''
				},
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				status: "loadmore",
				showModal: false,
				barshow: 0,
				statusList: [],
				g: [],
				page_count: 1,
				index: 0,
				payindex: 0,
				showAuth: false,
				titleStyle: {},
			}
		},
		onLoad(options) {
			if (options.OrderTypeStr) this.msg.OrderTypeStr = options.OrderTypeStr
			if (options.OrderStatus) this.msg.OrderStatus = options.OrderStatus
			this.research()
		},
		created() {
			const that = this
			uni.getSystemInfo({
				success(res) {
					that.titleStyle = {
						paddingTop: `${res.statusBarHeight}px`
					};
				},
			});
			this.getOrderEnums()
		},
		methods: {
			getStatus(ID) {
				this.msg.OrderStatus = ID
				this.research()
			},
			research(status) {
				if (status) this.msg.OrderStatus = status;
				this.msg.pageIndex = 1;
				this.msg.pageSize = 10;
				this.status = "loadmore";
				this.page_count = 1;
				this.g = [];
				this.init()
			},
			getOrderType(item) {
				this.msg.OrderTypeStr = item.Id
				this.pageTitle = item.Name
				this.research()
			},
			init() {
				uni.showLoading({
					title: '加载中...'
				})
				// #ifdef MP-DI
				this.OrderPageZK();
				// #endif
				// #ifdef MP-AG
				this.OrderPageTY();
				// #endif
			},
			OrderPageTY() {
				this.apipost('b2b_get_GetB2BAllOrderPageList', this.msg,
					res => {
						if (res.resultCode == 1) {
							uni.hideLoading()
							res.data.pageData.forEach(x => {
								// #ifdef MP-DI 
								x.goodTypeEnum = mappingListType(x.goodsType)
								// #endif
								// #ifdef MP-AG 
								x.goodTypeEnum = mappingListTypeTy(x.goodsType)
								// #endif
								x.orderStatusInfo = EnumHelper.ParseToEnum(OrderStatusEnum, x.orderStatus,
									'value')
							})
							this.g = this.g.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.status = "nomore";
							}
						}
					},
					err => {
						uni.hideLoading()
					}
				);
			},
			OrderPageZK() {
				this.apipost('GetMyDirectOrderPageList_post', this.msg,
					res => {
						if (res.resultCode == 1) {
							uni.hideLoading()
							res.data.pageData.forEach(x => {
								x.goodTypeEnum = mappingListType(x.goodsType)
								x.orderStatusInfo = EnumHelper.ParseToEnum(OrderStatusEnum, x.orderStatus,
									'value')
							})
							this.g = this.g.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.status = "nomore";
							}
						}
					},
					err => {
						uni.hideLoading()
					}
				);
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.init();
				} else {
					this.status = "nomore";
				}
			},
			getOrderEnums() {
				this.apipost(
					"GetDirectOrderStatusEnum_post", {},
					(res) => {
						if (res.resultCode == 1) {
							// #ifdef MP-DI
							this.statusList = res.data.filter(x => x.ID != 4);
							// #endif
							// #ifdef MP-AG
							this.statusList = res.data.filter(x => x.ID != 5);
							// #endif
							this.statusList.splice(0, 0, {
								ID: 0,
								Name: '全部'
							})
							this.statusList.forEach(x => {
								if (x.Name == '已付款') x.Name = '待出行'
							})
						}
					},
					err => {
						uni.showToast({
							title: err.message,
							icon: "none",
						});
					}
				);
			},
		},
	}
</script>