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

