<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 {}

		.AggOrdStatus {
			padding-top: 10rpx;

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

			.AggOrdT.active {
				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;
			}
		}

		.AggregateTitle {
			padding: 40rpx 30rpx 40rpx 30rpx;
			font-size: 36rpx;
			font-weight: bold;
			text-align: left;
		}

		.AggregateTypeBox {
			flex-wrap: wrap;
			padding: 0 15rpx;
		}

		.AggregateType {
			width: 33.33%;
			padding: 0 15rpx;
			margin-bottom: 30rpx;
		}

		.AggregateType view {
			display: block;
			padding: 10rpx 0 15rpx 35rpx;
			background: #E3E6D2;
			border-radius: 14rpx;
			border: 1rpx solid #E3E6D2;
			overflow: hidden;
		}

		.AggregateType img {
			width: 40rpx;
			height: 40rpx;
			display: inline-block;
			position: relative;
			top: 10rpx;
			right: 20rpx;
		}

		.AggregateType text {
			display: inline-block;
		}

		.AggregateType.active view {
			border: 1rpx solid #B99846;
		}
	}
</style>
<template>
	<view class="AggOrdBox column">
		<view class="AggOrdHeader" :style="[titleStyle]">
			<AggOrdSearch @change="change" :params="msg"></AggOrdSearch>
		</view>
		<view class="col" style="height: 1px;flex: 1;overflow: hidden;padding-top: 40rpx;">
			<view v-if="!msg.keyword">
				<view class="AggregateTitle">订单类型</view>
				<view class="AggregateTypeBox row">
					<view class="AggregateType" v-for="(item,index) in orderTypeList" :key="index"
						:class="[msg.OrderTypeStr==item.Id?'active':'']" @click="getTypeId(item)">
						<view class="row">
							<img :src="item.icon" />
							<text>
								{{ item.Name }}
							</text>
						</view>

					</view>
				</view>
			</view>
			<scroll-view v-else :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
				style="height: 100%;">
				<orders :orders="g"></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>


		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth='goback'></auth>
		<tabbar v-if='barshow==1'></tabbar>
	</view>
</template>

<script>
	import {
		mappingListType,
		mappingListTypeTy
	} from "../../utils/producttypeenum";
	import EnumHelper from '../../utils/enumhelper';
	import OrderStatusEnum from '../../utils/orderStautsEnum';
	import AggOrdSearch from "./components/searchHeader.vue";
	import orders from "./components/orders.vue";
	export default {
		components: {
			AggOrdSearch,
			orders,
		},
		data() {
			return {
				msg: {
					pageSize: 10,
					pageIndex: 1,
					OrderStatus: 0,
					GoodsName: '',
					OrderTypeStr: '',
					keyword: '',
				},
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				status: "loadmore",
				showModal: false,
				barshow: 0,
				g: [],
				page_count: 1,
				index: 0,
				payindex: 0,
				orderTypeList: [
					// {
					//     Id: '',
					//     Name: '全部订单'
					// },
					{
						Id: '1,2,3',
						icon: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772246968492575.jpg',
						Name: '线路订单'
					},
					{
						Id: '16',
						icon: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772247052998903.jpg',
						Name: '机票订单'
					},
					{
						Id: '15',
						icon: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772247084971514.jpg',
						Name: '签证订单'
					},
					{
						Id: '8,9,10,11',
						icon: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772247342163794.jpg',
						Name: '酒店住宿'
					},
					{
						Id: '12,13,14',
						icon: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772247230118434.jpg',
						Name: '包车服务'
					},
					{
						Id: '4,5,6,7',
						icon: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772247194112722.jpg',
						Name: '景点门票'
					}
				],
				icons: [
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772246968492575.jpg',
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772247052998903.jpg',
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772247084971514.jpg',
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772247342163794.jpg',
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772247230118434.jpg',
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772247194112722.jpg',
				],
				titleStyle: {},
			}
		},
		onLoad(options) {
			if (options.OrderTypeStr) {
				this.msg.OrderTypeStr = options.OrderTypeStr
			}
		},
		created() {
			const that = this
			uni.getSystemInfo({
				success(res) {
					that.titleStyle = {
						paddingTop: `${res.statusBarHeight}px`
					};
				},
			});
			// #ifdef MP-AG
			this.getEnumList()
			// #endif
		},
		methods: {
			getEnumList() {
				this.apipost("CarSingle_post_GetOrderTypeEnumList", {}, (res) => {
					if (res.resultCode == 1) {
						this.orderTypeList = []
						res.data.forEach(x => {
							if (x.Name == '团队') {
								x.Name = '线路'
							}
							if (x.Name != 'Jalan酒店') {
								let icon = ''
								if (x.Id == '1') icon = this.icons[1]
								if (x.Id == '2') icon = this.icons[0]
								if (x.Id == '3') icon = this.icons[3]
								if (x.Id == '4') icon = this.icons[5]
								if (x.Id == '5') icon = this.icons[4]
								if (x.Id == '6') icon = this.icons[2]
								let obj = {
									Id: x.Id,
									Name: x.Name + '订单',
									icon: icon
								}
								//酒店切换为道旅酒店
								if (obj.Id == '3') {
									obj.Id = '7';
								}
								this.orderTypeList.push(obj)
							}
						})
					}
				}, (err) => {
					uni.showToast({
						title: err.message,
						icon: "none",
					});
				})
			},
			research() {
				this.msg.pageIndex = 1;
				this.msg.pageSize = 10;
				this.status = "loadmore";
				this.g = [];
				this.page_count = 1;
				this.init()
			},
			getTypeId(item) {
				this.msg.OrderTypeStr = item.Id
				this.msg.keyword = item.Name
				this.research()
			},
			change(item) {
				this.msg.keyword = item.keyword
				this.msg.OrderTypeStr = item.OrderTypeStr
				this.research()
			},
			init() {
				if (!this.msg.keyword) return
				if (!this.msg.OrderTypeStr) {
					this.msg.GoodsName = this.msg.keyword
				} else {
					this.msg.GoodsName = ''
				}
				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) {
							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";
							}
							uni.hideLoading()
						}
					},
					err => {
						uni.hideLoading()
					}
				);
			},
			OrderPageZK() {
				this.apipost('GetMyDirectOrderPageList_post', this.msg,
					res => {
						if (res.resultCode == 1) {
							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";
							}
							uni.hideLoading()
						}
					},
					err => {
						uni.hideLoading()
					}
				);
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.init();
				} else {
					this.status = "nomore";
				}
			},

			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				this.getOrderStatusList();
			},
			goback() {
				uni.navigateBack()
			},
		},
	}
</script>