<template>
	<view class="supplierOrder" :style="{'height':contentHeight}">
		<view style="width: 100%;height: 100%;">
			
			<view style="width: 100%;display: flex;flex-direction: row;align-items: center;">
				<view style="width: calc(100vw - 75px);">
					<u-tabs :list="list" :is-scroll="false" :current="SelectBillState" @change="change" :active-color='mainColor' bg-color='#FFFFFF'></u-tabs>
				</view>
				<view style="width: 75px;height: 40px;display: flex;flex-direction: row;align-items: center;justify-content: center;background: #FFFFFF;" @click="show = true">
					<text>筛选</text>
					<image src="../../static/images/shaix.png" style="width: 11px;height: 13px;"></image>
				</view>
				
			</view>
			<u-empty v-if="g.length==0" text="暂无数据" mode="data"></u-empty>
			<template v-if="g.length > 0">
				<view  
				  style="
						height: calc(100vh - 50px);
						width: calc(100vw);
						overflow: hidden;
						padding: 10px 0;
				  ">
					<scroll-view
						:scroll-y="true"
						:enable-back-to-top="true"
						:enable-flex="true"
						@scrolltolower="lower"
						:style="{ height: '100%' }">
						<view style="display: flex;flex-direction: column;align-items: center;">
							<view v-for="(item, index) in g" :key="index" class="listbox">
								<view class="box_t">
									<view style="display: flex;flex-direction: row;align-items: center;">
										<u-avatar :src="item.Photo" size="64"></u-avatar>
										<text class="box_tname">{{item.UserName}}</text>
									</view>
									<view>{{item.StatusName}}</view>
								</view>
								<view class="box_c"  v-for="(x, index2) in item.DetailList" :key="index2">
									<image :src="x.CoverImagePath" style="width: 65px;height: 65px;border-radius: 6px;" ></image>	
									<view style="width: calc(100vw - 30px - 65px - 15px);display: flex;flex-direction: column;margin-left: 15px;">
										<view class="box_c_name">{{x.GoodsName}}</view>
										<view class="box_c_name" style="font-size: 12px;color: #555555;margin-top: 3px;">
											规格:
											<text v-for="(t, y) in x.SpecificationList" :key="y">{{t}}</text>
										</view>
										<view class="box_r_b">
											<text style="font-size: 12px;color: #555555;">X{{x.Number}}</text>
											
										</view>
									</view>
									
								</view>
								
								<view class="OrderNoStyle" >
									<text >订单号:{{item.OrderNo}}</text>
									<view style="font-size: 12px;color: #111111;">
										<text>已得佣金：</text>
										<text style="color: #FF4048;font-size: 12px;">{{item.Commission}}</text>
										<text>元</text>
									</view>
								</view>
								
							</view>
						</view>
							<u-loadmore
							  :status="status"
							  :load-text="loadText"
							  :font-size="24"
							  :margin-top="20"
							  :margin-bottom="20"
							  bg-color="#f3f4f6"
							/>
					</scroll-view>
					
				</view>
			</template>
		</view>
		<u-popup v-model="show" 
			mode="right"
			length="70%"
			height='100%'
		>
				<view class="popupbox">
					<text class="popupbox_text" style="margin-top: 15px;">供应商</text>
					<view class="popup_item" @click="showmodel=true">
							<view  :style="{color:SupplierName==''?'#A5A4AC':'#111111'}">{{SupplierName==''?'请选择~':SupplierName}}</view>
					</view>
					<text class="popupbox_text" style="margin-top: 15px;">商品名称</text>
					<view class="popup_item">
						<input class="uni-input inputM" v-model="msg.GoodsName" />
					</view>
					<text class="popupbox_text" style="margin-top: 15px;">下单时间</text>
					
					<view style="width: 96%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-left: 2%;height: 40px;">
						<view class="popup_item_t" @click="godate(1)">
							<text :style="{color:msg.StartTime==''?'#A5A4AC':'#111111'}">{{msg.StartTime==''?'开始时间':msg.StartTime}}</text>
						</view>
						<view>-</view>
						<view class="popup_item_t" @click="godate(2)">
							<text :style="{color:msg.EndTime==''?'#A5A4AC':'#111111'}">{{msg.EndTime==''?'结束时间':msg.EndTime}}</text>
						</view>
					</view>
					
					
					<view class="popup_b" :style="{height:cHeight+'px'}">
						<view class="popup_b_item" style="background: #FAF8F9;color: #000000;" @click="goreset()">
							<text>重置</text>
						</view>
						<view class="popup_b_item" :style="{background:mainColor }" @click="determine()">
							<text>确定</text>
						</view>
					</view>
				</view>
				
		</u-popup>
		<u-picker mode="selector" v-model="showmodel"   :range="array" range-key="Name" @confirm= 'choosesupplier'></u-picker>
		<u-picker v-model="showpicker" mode="time" @confirm='dateconfirm' :default-time='datetype==1?msg.StartTime:msg.EndTime'></u-picker>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: "供应商订单",
				contentHeight:0,
				mainColor:'',
				secondary:'',
				g:[],
				show:false,
				showmodel:false,
				showpicker:false,
				list:[
					{name: '全部'},
					{name: '待付款'},
					{name: '已付款'},
					{name: '已完成'},
					
				
				],
				msg:{
					pageIndex: 1,
					pageSize:10,
					UserId:0,
					SupplierId:0,
					GoodsName:'',
					CommissionState:0,
					StartTime:'',
					EndTime:'',
				},
				rangeVal:'',//时间
				SupplierName:'',
				SelectBillState:0,
				page_count:1,
				status: "loadmore",
				loadText: {
				  loadmore: "轻轻上拉，加载更多",
				  loading: "努力加载中",
				  nomore: "没有更多了",
				},
				cHeight:0,
				array:[],
				datetype:1,
			}
		},
	
		created(){
			 this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
			 this.mainColor = this.$uiConfig.mainColor;
			 this.secondary = this.$uiConfig.secondary;
			 this.msg.UserId = uni.getStorageSync("mall_UserInfo")?uni.getStorageSync("mall_UserInfo").UserId:0
			 uni.setNavigationBarTitle({
			   title: this.pageTitle,
			 });
			 this.init()
			 this.getUserMemberSupplier()
		},
		mounted() {
			this.cHeight = this.$uiConfig.is_bang ? 80 : 52;
			
		},
		methods: {
			init(){
				
				uni.showLoading({
					title: '加载中'
				});
				this.request2(
					  {
						url: '/api/AppletUser/GetUserDistributionOrdersPageList',
						data: this.msg
					  },
								
					  (res) => {
						 
						uni.hideLoading();
						
						this.g = this.g.concat(res.data.pageData);
						
						this.page_count = res.data.pageCount;
						if (this.page_count == 1) {
						  this.status = "nomore";
						}
						
					  }
				);
			},
			choosesupplier(val){
				this.msg.SupplierId = this.array[val].ID;
				this.SupplierName = this.array[val].Name;
			},
		
			godate(type){
				this.datetype = type;
				this.showpicker = true;
			},
			dateconfirm(val){
				
				if(this.datetype==1){
					
					let StartTime = val.year +'-'+val.month +'-'+val.day;
					let str =StartTime.replace(/-/g,'/');
					let date = new Date(str).getTime()
					
					let date2=0
					if(this.msg.EndTime!=''){
						let str2 = this.msg.EndTime.replace(/-/g,'/');
						date2 = new Date(str2).getTime();
					}
					if(date2>date){
						this.msg.StartTime = StartTime
						
					}else{
						this.msg.StartTime = StartTime
						this.msg.EndTime = ''
					}
					
				}else if(this.datetype==2){
					let EndTime = val.year +'-'+val.month +'-'+val.day;
					let str =EndTime.replace(/-/g,'/');
					let date = new Date(str).getTime()
					
					let date2=0
					if(this.msg.StartTime!=''){
						let str2 = this.msg.StartTime.replace(/-/g,'/');
						date2 = new Date(str2).getTime();
					}
					if(date2>date){
						uni.showToast({
							title: '不能小于开始时间',
							icon: "none"
						});
					}else{
						this.msg.EndTime = EndTime
					}
					
				}
			},
			getUserMemberSupplier(){
				this.request2(
					  {
					  	url: '/api/AppletUser/GetUserMemberSupplier',
					  	data: {}
					  },
								
					  (res) => {
						 let  obj = {ID:0,Name:'不限'}
						this.array = res.data
						this.array.unshift(obj)
						
					  }
				);
			},
			change(index){
				
				this.msg.CommissionState = index
				this.SelectBillState = index;
				this.msg.pageIndex=1;
				this.g=[]
				this.init()
			},
			lower(e) {
			  if (this.msg.pageIndex < this.page_count) {
				this.msg.pageIndex++;
				this.status = "loading";
				this.init();
			  } else {
				this.status = "nomore";
			  }
			},
			goDetails(item){
				uni.navigateTo({
				  url: '/pages/mySupplier/billDetails?ID='+item.Id
				});
			},
			goreset(){//重置
			
				this.show=false;
				this.msg.SupplierId=0;
				this.msg.GoodsName='';
				this.msg.StartTime='';
				this.msg.EndTime='';
				this.msg.pageIndex=1;
				this.SupplierName = '',
				this.g=[]
				this.init()
			},
			determine(){//确认
				
				this.show=false
				this.msg.pageIndex=1;
				this.g=[]
				this.init()
			}
		}
	}
</script>

<style>
.supplierOrder{
	background: #f3f4f6;
}

	.supplierOrder .listbox{
		width: 100%;
		margin-bottom: 10px;
		padding: 15px;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center
		
	}
	.supplierOrder .box_t{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		justify-content: space-between;
		
	}
	.supplierOrder .box_c{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		overflow: hidden;
		margin-top: 15px;
	}
	.supplierOrder .box_tname{
		width: 480rpx;
		margin-left: 5px;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.supplierOrder .box_c_name{
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 13px;
		color: #111111;
	}
	.supplierOrder .box_r_b{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 3px;
	}
	.supplierOrder .OrderNoStyle{
		width: 100%;
		height: 35px;
		background: #F8F6F5;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 12px;
		color: #888888;
		margin-top: 15px;
		padding: 0 15px;
		
	}
	.supplierOrder .popupbox{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		
	}
	.supplierOrder .popupbox_text{
		font-size: 12px;
		color: #111111;
		margin-left: 5%;
	}
	.supplierOrder .popup_item{
		width: 90%;
		height: 40px;
		margin-left: 5%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 5px;
		margin-top: 10px;
		background: #F8F6F5;
	}
	.supplierOrder .inputM{
		width: 100%;
	}
	.supplierOrder .popup_b{
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #FFFFFF;
		
	}
	 .supplierOrder .popup_b_item{
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		font-size: 14px;
		padding-top: 15px;
	}
	.supplierOrder .popup_item_t{
		width: 44%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 5px;
		margin-top: 10px;
		background: #F8F6F5;
	}
</style>
