<template>
	<view style="width:100vw;height:100vh;" class="column">
		<scroll-view :scroll-y="true" @scroll="scrollHandler" 
		@scrolltoupper="scrollTopHandler" class="col" 
		style="height: 1px;width: 100%;">
			<view class="userStyle">
				<view class="headStatus"
				:class="[statistics&&statistics.isVip==1?'active':'']" v-if="scrollTop > 50" :style="[titleStyle,{
					zIndex: scrollTop < 10 ? 'unset' : 2,
					opacity: scrollTop < 10 ? '100' : scrollTop,
				}]">
					<view class="title">{{ pageTitle }}</view>
				</view>
				<view class="userBox">
					<vipUserHeader v-if="statistics&&statistics.isVip==1" :statistics="statistics" :b2b_user_info="b2b_user_info" @login="openAuth"></vipUserHeader>
					<userHeader v-if="statistics&&statistics.isVip!=1" :statistics="statistics" :b2b_user_info="b2b_user_info" @login="openAuth"></userHeader>
					<view class="userMyOrderBox">
						<view style="position: relative;top:-13rpx">
							<view class="userMyOrder">
								<view class="userMyOrderTitle row-sbas-n col">
									<view class="userMyOrderTitL">我的订单</view>
									<view class="userMyOrderTitR row" @click="goUrl('/pages/AggregateOrders/AggregateOrdersList')">
										<text>全部</text>
										<view>
											<u-icon class="userMyOrderTitRIght" name="arrow-up" size="30" color="#B2B3B3"></u-icon>
										</view>
									</view>
								</view>
								<view class="order_bar_list">
									<view class="order_bar_item" @click="goUrl('/pages/AggregateOrders/AggregateOrdersList?OrderStatus=1')">
										<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748963970628311.png" style="width: 66rpx; height: auto" mode="widthFix"></image>
										<Text style="margin-top: 10rpx;font-size: 24rpx;">待付款</Text>
										<view class="badge" v-if="statistics.waitPayOrderNum>0">{{ statistics.waitPayOrderNum }}</view>
									</view>
									<view class="order_bar_item" @click="goUrl('/pages/AggregateOrders/AggregateOrdersList?OrderStatus=2')">
										<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748963971941398.png" style="width: 66rpx; height: auto" mode="widthFix"></image>
										<Text style="margin-top: 10rpx;font-size: 24rpx;">待出行</Text>
										<view class="badge" v-if="statistics.waitTravelOrderNum>0">{{ statistics.waitTravelOrderNum }}</view>
									</view>
									<view class="order_bar_item" @click="goUrl('/pages/AggregateOrders/AggregateOrdersList?OrderStatus=3')">
										<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748963971902348.png" style="width: 66rpx; height: auto" mode="widthFix"></image>
										<Text style="margin-top: 10rpx;font-size: 24rpx;">已完成</Text>
										<!-- <view class="badge"></view> -->
									</view>
									<!-- #ifdef MP-DI -->
									<view class="order_bar_item" @click="goUrl('/pages/AggregateOrders/AggregateOrdersList?OrderStatus=5')">
										<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748964440207840.png" style="width: 66rpx; height: auto" mode="widthFix"></image>
										<Text style="margin-top: 10rpx;font-size: 24rpx;">售后</Text>
										<view class="badge" v-if="statistics.afterSalesOrderNum>0">{{ statistics.afterSalesOrderNum }}</view>
									</view>
									<!-- #endif -->
									<!-- #ifdef MP-AG -->
									<view class="order_bar_item" @click="goUrl('/pages/AggregateOrders/AggregateOrdersList?OrderStatus=4')">
										<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638781648143931243.png" style="width: 66rpx; height: auto" mode="widthFix"></image>
										<Text style="margin-top: 10rpx;font-size: 24rpx;">已取消</Text>
									</view>
									<!-- #endif -->
								</view>
								<view class="orderProductBox" v-if="g.length>0">
									<swiper class="swiper" circular 
										:indicator-dots="indicatorDots" 
										:autoplay="autoplay" 
										:interval="interval"
										:duration="duration">
										<swiper-item v-for="(item,index) in g" :key="index">
											<view
											class="orderProduct row items-center"
											@click="goDetails(item)">
												<view class="orderProductL">
													<image style="width: 91rpx; height: 88rpx;" mode="aspectFill" :src="item.goodsPic"></image>
												</view>
												<view class="orderProductR col column" style="width: 1px;">
													<view class="orderProductR_state">
														<!-- #ifdef MP-DI -->
														<template v-if="item.orderStatus!=5">
															{{ item.orderStatusInfo.desc }}
														</template>
														<template v-else>{{ item.afterSalesOrderStatusStr }}</template>
														<!-- #endif -->
														<!-- #ifdef MP-AG -->
															{{ item.orderStatusInfo.desc }}
															<!-- {{ item.orderStatusStr=='取消'?'已取消':item.orderStatusStr }}-->
														<!-- #endif -->
													</view>
													<view class="orderProductR_text">{{ item.goodsName }}</view>
												</view>
											</view>
										</swiper-item>
									</swiper>
								</view>
								
							</view>
							<view style="height: 20rpx;"></view>
							<view class="userMyOrder" style="padding: 12rpx 0 20rpx 0;">
								<view class="order_bar_list">
									<view class="order_bar_item relative" style="margin-top: 0;">
										<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638749519965857485.png" style="width: 70rpx; height: 70rpx" mode="widthFix"></image>
										<Text style="margin-top: 10rpx;font-size: 24rpx;">在线客服</Text>
										<button open-type="contact" style="position: absolute;left: 0;top: 0;bottom: 0;right: 0;z-index: 1;opacity: 0;"></button>
									</view>
									<!-- #ifdef MP-AG -->
										<view class="order_bar_item" style="margin-top: 0;" @click="goUrl('/pages/bigredrnvelope/list')">
											<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638749520007722617.png" style="width: 70rpx; height: 70rpx" mode="widthFix"></image>
											<Text style="margin-top: 10rpx;font-size: 24rpx;">年底大红包</Text>
										</view>
									<!-- #endif -->
									<!--
									<view class="order_bar_item" style="margin-top: 0;" @click="goUrl()">
										<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638749520286130928.png" style="width: 70rpx; height: 70rpx" mode="widthFix"></image>
										<Text style="margin-top: 10rpx;font-size: 24rpx;">我的旅行社</Text>
									</view>
									-->
									<!-- #ifdef MP-DI -->
									<view class="order_bar_item" style="margin-top: 0;" @click="goUrl('/pages/user-center/user-bind-erp')">
										<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638749520286130928.png" style="width: 70rpx; height: 70rpx" mode="widthFix"></image>
										<Text style="margin-top: 10rpx;font-size: 24rpx;">员工激活</Text>
									</view>
									<!-- #endif -->
									<view class="order_bar_item" style="margin-top: 0;" @click="goUrl('/pages/coupon/list/list')">
										<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638749520367368328.png" style="width: 70rpx; height: 70rpx" mode="widthFix"></image>
										<Text style="margin-top: 10rpx;font-size: 24rpx;">领券中心</Text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view style="height: 140rpx;"></view>
					
				</view>
				
			</view>
		</scroll-view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
		<tabbars></tabbars>
	</view>
</template>

<script>
	import {mappingListType,mappingListTypeTy} from "../../utils/producttypeenum";
	import EnumHelper from '../../utils/enumhelper';
	import OrderStatusEnum from '../../utils/orderStautsEnum';
	import tabbars from "@/components/tabbar/index";
	import auth from "@/components/auth/index.vue";
	import userHeader from "./components/userHeader.vue";
	import vipUserHeader from "./components/vipUserHeader.vue";
	export default {
		components: {
			tabbars,
			auth,
			userHeader,
			vipUserHeader
		},
		data() {
			return {
				pageTitle: "个人中心",
				scrollTop: 0,
				showAuth: false,
				b2b_user_info: {},
				mall_UserInfo: {},
				statistics: {},
				msg:{
					pageSize:100,
					pageIndex:1,
					OrderStatus: 0,
					GoodsName: '',
					OrderTypeStr: ''
				},
				g: [],
				indicatorDots: true,
				autoplay: true,
				interval: 4000,
				duration: 1000,
				titleStyle: {},
			};
		},
		onLoad() {
			this.b2b_user_info = uni.getStorageSync('b2b_user');
			this.mall_UserInfo = uni.getStorageSync("mall_UserInfo");
			this.showAuth = !this.mall_UserInfo || !this.b2b_user_info;
		},
		onShow() {
			const that = this
            uni.getSystemInfo({
                success(res) {
                    that.titleStyle = {
                    	paddingTop: `${res.statusBarHeight}px`
                    };
                },
            });
			this.GetCustomerCenter()
			this.g = []
			this.init()
		},
		methods: {
			goDetails(item) {
				
				let url = null
				let msg = null
				// #ifdef MP-DI
					msg = `OrderNo=${item.orderNo}`
					if(item.goodsType>0&&item.goodsType<4) url = `jiuzhai/jz_SureOrder?` //线路
					else if(item.goodsType>3&&item.goodsType<8){//景点门票
					}else if(item.goodsType>7&&item.goodsType<12){//酒店住宿 
						url = `hotel/orderdetails?`
						msg = `orderId=${item.erpOrderId}`
					}else if(item.goodsType>11&&item.goodsType<15){//目的地用车
						url = `bus/orderdetails?`
						msg = `orderId=${item.erpOrderId}`
					}else if(item.goodsType==15) url = `visa/visa_SureOrder?`//签证  
					else if(item.goodsType==16)url = `airTicket/airTicketOrderDetail?`//机票
				// #endif
				// #ifdef MP-AG
					msg = `orderId=${item.erpOrderId}`
					if(item.goodsType==2) url = `jiuzhai/jz_SureOrder?`//线路
					else if(item.goodsType==4){//景点门票
					}else if(item.goodsType==3||item.goodsType==7){//酒店住宿
						url = `hotel/orderdetails?`
					}else if(item.goodsType==5){//目的地用车
						url = `bus/orderdetails?`
					}else if(item.goodsType==6) url = `visa/visa_SureOrder?`//签证  
					else if(item.goodsType==1){//机票
						url = `airTicket/airTicketOrderDetail?`
						msg = `id=${item.erpOrderId}`
					}
				// #endif
				
				if(url) {
					let path = `/pages/${url}${msg}`
					uni.navigateTo({
						url: path,
					});
				}
			},
			openAuth() {
				this.showAuth = true;
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			},
			scrollHandler(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			scrollTopHandler() {
				this.scrollTop = 0;
			},
			goUrl(url) {
				if(!url){
					return uni.showToast({
								title: '灰度开放中，尽情期待！',
								icon: "none",	
							})
				}
				uni.navigateTo({ url });
			},
			reloadUserinfo() {
				this.b2b_user_info = uni.getStorageSync('b2b_user');
				this.GetCustomerCenter();
				this.mall_UserInfo = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo") : {};
			},
			GetCustomerCenter(){
				this.apipost('b2b_get_GetCustomerCenter_New',
					{},
					(res) => {
						uni.hideLoading()
						this.statistics = res.data
					},err=>{
						uni.showToast({
							title: err.message,
							icon: "none",
						});
					}
				);
			},
			init(){
				uni.showLoading({
					title: '加载中...'
				})
				// #ifdef MP-DI
					this.OrderPageZK(1);
					this.OrderPageZK();
				// #endif
				// #ifdef MP-AG
					this.OrderPageTY();
				// #endif
			},
			OrderPageTY(){
				this.msg.OrderStatus = 1
				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 = res.data.pageData
						}
					},
					err => {
						uni.hideLoading()
					}
				);
			},
			OrderPageZK(type){
				if(type==1) this.msg.OrderStatus = 1
				else this.msg.OrderStatus = 5
				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);
						}
					},
					err => {
						uni.hideLoading()
					}
				);
			},
		}
	};
</script>

<style scoped>
	@import url('../../asset/css/flex.css');
	.row-sbas-n {
		justify-content: space-between;
	}
	.relative {
		position: relative;
	}

	.userStyle .userBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #f3f4f6;
		min-height: 100vh;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.order_bar_list {
		padding: 22rpx 55rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.order_bar_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
		position: relative;
	}

	.badge {
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		padding: 0 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		background: #FF3166;
		color: #fff;
		min-width: 28rpx;
		height: 28rpx;
		border-radius: 14rpx;
	}

	.headStatus {
		position: fixed;
		width: 140vw;
		padding-right: 40vw;
		padding-bottom: 10px;
		left: 0;
		right: 0;
		top: 0;
		display: flex;
		background: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748787642081151.png") no-repeat;
		background-size: 100% auto;
	}
	.headStatus.active{
		background: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748788146223914.png") no-repeat;
		background-size: 100% auto;
		
	}

	.headStatus .title {
		font-size: 18px;
		color: #000;
		flex: 1;
		width: 1px;
		line-height: 34px;
		text-align: center;
	}
	.headStatus.active .title{ 
		color: #fff;
	}

	.userMyOrderBox {
		width: 100%;
		padding: 0 31rpx;
	}
	.userMyOrder {
		background: #FFF;
		border-radius: 20rpx;
		padding: 33rpx 0 22rpx 0;
	}
	.userMyOrderTitle {
		padding: 23rpx 31rpx 0 31rpx;
	}
	.userMyOrderTitL {
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 32rpx;
		color: #080A09;
	}
	.userMyOrderTitR {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #B2B3B3;
		align-items: center;
	}
	.userMyOrderTitRIght {
		margin-left: 11rpx;
		transform: rotate(90deg);
	}

	.orderProductBox {
		padding: 0 20rpx;
	}
	.orderProduct {
		width: 648rpx;
		height: 132rpx;
		background: #F7F7F7;
		border-radius: 18rpx;
		padding: 21rpx 20rpx;
		overflow: hidden;
	}
	.orderProductL {
		width: 91rpx;
		height: 88rpx;
		border-radius: 14rpx;
		overflow: hidden;
		margin-right: 18rpx;
	}
	.orderProductR_state {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #080A09;
		padding-top: 5rpx;
	}
	.orderProductR_text {
		width: 100%;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #8C8C8C;
		padding-top: 4rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}
	.swiper {
		height: 132rpx;
	}
	.swiper-item {
		display: block;
		height: 132rpx;
		text-align: center;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	.info {
		position: absolute;
		right: 20rpx;
	}
	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
</style>