<template>
	<view class="pages">
		<u-navbar title="订单管理" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff"
			title-size='36' height='50'></u-navbar>
		<view class="time">
			<view class="timetit">
				时间范围
			</view>
			<view class="timert">
				<view class="xztime" @click="btnks(1)">{{endtime}}</view> - <view class="xztime" @click="btnks(2)">{{lasttime}}</view>
				<view class="qinc" @click="btnqc">×</view>
			</view>
		</view>

		<view class="serch">
			<input type="text" v-model="type" placeholder="请输入SN码或手机号" />
			<view class="" @click="btnsear">搜索</view>
		</view>

		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#8883F0"></u-tabs>
         <view class="orderlist" @scrolltolower="onReachBottom">
         	<view class="otderlist_item" v-for="(item,index) in wateringList" :key="index" @click="btnxq(item.billId)">
         		<view class="order_top">
         			<view class="">
         				订单编号：{{item.billNo == null ? '--' : item.billNo}}
         			</view>
					<view class="">
						<text style="color: #ccc;" v-if="item.status == 1"><text style="width: 10rpx;height: 10rpx;background-color: #ccc;border-radius: 50%;display: inline-block;vertical-align: middle;margin-right: 5rpx;"></text> 未支付</text>
						<text style="color: #27da77;" v-if="item.status == 2"><text style="width: 10rpx;height: 10rpx;background-color: #27da77;border-radius: 50%;display: inline-block;vertical-align: middle;margin-right: 5rpx;"></text> 支付成功</text>
						<text style="color: #ccc;" v-if="item.status == 3"><text style="width: 10rpx;height: 10rpx;background-color: #ccc;border-radius: 50%;display: inline-block;vertical-align: middle;margin-right: 5rpx;"></text> 已退款</text>
						<text style="color: red;" v-if="item.status == 4"><text style="width: 10rpx;height: 10rpx;background-color: red;border-radius: 50%;display: inline-block;vertical-align: middle;margin-right: 5rpx;"></text> 用户取消</text>
						<text style="color: red;" v-if="item.status == 5"><text style="width: 10rpx;height: 10rpx;background-color: red;border-radius: 50%;display: inline-block;vertical-align: middle;margin-right: 5rpx;"></text> 系统超时取消</text>
						<text style="color: #8892F1;" v-if="item.status == 6"><text style="width: 10rpx;height: 10rpx;background-color: #8892F1;border-radius: 50%;display: inline-block;vertical-align: middle;margin-right: 5rpx;"></text> 未支付</text>
						<text style="color: #ccc;" v-if="item.status == 7"><text style="width: 10rpx;height: 10rpx;background-color: #000;border-radius: 50%;display: inline-block;vertical-align: middle;margin-right: 5rpx;"></text> 退款中</text>
					</view>
         		</view>
				<view class="order_bd">
					<view class="order_fu">
						<view class="name">
							用户手机：{{item.userName == null ? '--' : item.userName}}
						</view>
						<view class="">
							订单费用：{{item.money == null ? '--' : item.money}}元
						</view>
					</view>
					<view class="order_fu">
						<view class="name">
							设备编码：{{item.deviceNo == null ? '--' : item.deviceNo}}
						</view>
						<view class="">
							设备名称：{{item.deviceName == null ? '--' : item.deviceName}}
						</view>
					</view>
					<view class="order_fu">
						<view class="name">
							开始时间：{{item.suitStartTime == null ? '--' : item.suitStartTime}}
						</view>
						<view class="">
							有无售后	：{{item.status == 3 || item.status == 7 ? '有' : '无'}}
						</view>
					</view>
				</view>
         	</view>
			<view v-if="jlflag" class="" style="font-size: 28rpx;color: #ccc;margin-top: 30rpx;width: 100%;text-align: center;">-没有更多订单记录-</view>
         </view>
          
		  <u-picker mode="time" v-model="show" :params="params" @confirm="confirm"></u-picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#8883F0",
				},
				list: [{
					name: '全部'
				}, {
					name: '未支付'
				}, {
					name: '已支付',
				}, {
					name: '已完成',
				}, {
					name: '有售后',
				}],
				current: 0,
				pagenum: 1,
				wateringList: [],
				pagesize: 10, // 一页多少数据
				isLoading: false, // 是否正在加载数据  
				noMoreData: false, // 是否没有更多数据  
				total: 0,
				showflag: false,
				jlflag:false,
				statusList:'',
				type:'',
				endtime:'',
				lasttime:'',
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				show: false,
				num:''
			}
		},
		onLoad() {
            
		},
		onShow() {
			this.wateringList = []
			this.pagenum = 1
			this.getList()
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创想物联',
				path: '/pages/shouye/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创想物联',
				query: '',
				path: '/pages/shouye/index'
			}
		},
		methods: {
			btnks(num) {
				this.show = true
				if (num == 1) {
					this.num = 1
				} else {
					this.num = 2
				}
			},
			btnqc(){
				this.endtime = ''
				this.lasttime = ''
				this.wateringList = []
				this.pagenum = 1
				this.statusList = ''
				this.getList()
			},
			confirm(e) {
				if (this.num == 1) {
					this.endtime = e.year + '-' + e.month + '-' + e.day
					if(this.lasttime != ''){
						this.wateringList = []
						this.pagenum = 1
						this.statusList = ''
						this.getList()
					}
				} else {
					this.lasttime = e.year + '-' + e.month + '-' + e.day
					if(this.endtime != ''){
						this.wateringList = []
						this.pagenum = 1
						this.statusList = ''
						this.getList()
					}
				}
			},
			btnxq(billId){
				uni.navigateTo({
					url:'/page_user/mapditu/orderxq?billId=' + billId
				})
			},
			
			change(index) {
				 this.jlflag = false
				this.current = index;
				if(index == 0){
					this.wateringList = []
					this.pagenum = 1
					this.statusList = ''
					this.getList()
				}else if(index == 1){
					this.wateringList = []
					this.pagenum = 1
					this.statusList = 1
					this.getList()
				}else if(index == 2){
					this.wateringList = []
					this.pagenum = 1
					this.statusList = 2
					this.getList()
				}else if(index == 3){
					this.wateringList = []
					this.pagenum = 1
					this.statusList = '2,3,7'
					this.getList()
				}else if(index == 4){
					this.wateringList = []
					this.pagenum = 1
					this.statusList = '3,7'
					this.getList()
				}
			},
			btnsear(){
				this.wateringList = []
				this.pagenum = 1
				this.statusList = ''
				this.getList()
			},
			
			getList(){
				this.$u.get(`/app/bill/incomeList?pageNum=${this.pagenum}&pageSize=${this.pagesize}&statusList=${this.statusList}&keyword=${this.type}&startDate=${this.endtime}&endDate=${this.lasttime}`).then((res) => {
					if (res.code == 200) {
					   this.total = res.total
					   if (res.rows.length > 0) {
					   	// 有数据，追加到列表  
					   	 this.wateringList =  this.wateringList.concat(res.rows)
					   	 this.pagenum++
					   } else {
					   	// 没有更多数据  
					   	this.noMoreData = true
                         setTimeout(()=>{
							 this.jlflag = true
						 })
						}
					   this.isLoading = false
					}
				});
			},
			
			onReachBottom() {
				let sum = this.total / this.pagesize
				if (this.pagenum-1 < sum) {
					this.getList() // 上拉加载更多  
				} else {
					this.jlflag = true
					// uni.showToast({
					// 	title: '没有更多记录了',
					// 	icon: 'none',
					// 	duration: 1000
					// })
				}
			},
			// 点击查询详情
			btndetail(id){
				uni.navigateTo({
					url:'/page_user/order_detail?id=' + id
				})
			}
			
		},
		// 分享到好友（会话）
		  onShareAppMessage: function () {  
		    return {  
		      title: '创想物联',  
		      path: '/pages/shouye/index'  
		    }  
		  },  
		  
		  // 分享到朋友圈  
		  onShareTimeline: function () {  
		    return {  
		      title: '创想物联',  
		      query: '',  
		      path: '/pages/shouye/index'  
		    }  
		  },
	}
</script>

<style lang="scss">
	/deep/ .u-title {
		padding-bottom: 22rpx;
	}

	/deep/ .u-icon__icon {
		padding-bottom: 22rpx;
	}
     .orderlist{
		 width: 100%;
		 height: 100%;
		 overflow: scroll;
		 .otderlist_item{
			 margin-top: 30rpx;
			 background-color: #fff;
			 height: 230rpx;
			 .order_top{
				 color: #000;
				 font-size: 28rpx;
				 display: flex;
				 justify-content: space-between;
				 border-bottom: 1px solid #ccc;
				 padding: 0 30rpx;
				 box-sizing: border-box;
				 height: 80rpx;
				 line-height: 80rpx;
			 }
			 .order_fu{
				 display: flex;
				 color: #ccc;
				 font-size: 26rpx;
				 padding: 20rpx 30rpx;
				 box-sizing: border-box;
				 height: 40rpx;
				 line-height: 40rpx;
				 .name{
					 width: 440rpx;
				 }
			 }
		 }
	 }
	.serch {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// margin-top: 30rpx;
        padding: 0 40rpx;
        box-sizing: border-box;
		// margin-bottom: 30rpx;
		height: 120rpx;
		background-color: #fff;
		input {
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			padding-left: 30rpx;
			border: 1px solid #ccc;
			border-radius: 10rpx;
		}

		view {
			width: 170rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			color: #fff;
			background-color: #8883F0;
			border-radius: 10rpx;
			margin-left: 30rpx;
		}
	}

	.time {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// margin-top: 50rpx;
		height: 110rpx;
		padding-top: 40rpx !important;
        padding: 0 40rpx;
        box-sizing: border-box;
		background-color: #fff;
		.timetit {
			font-weight: 600;
			font-size: 30rpx;
		}

		.timert {
			display: flex;
			line-height: 60rpx;
			justify-content: space-between;

			.xztime {
				width: 200rpx;
				height: 60rpx;
				border: 1px solid #ccc;
				border-radius: 10rpx;
				text-align: center;
				margin-left: 10rpx;
				margin-right: 10rpx;
			}

			.qinc {
				font-size: 50rpx;
				color: #ccc;
				width: 80rpx;
				height: 60rpx;
				text-align: center;
			}
		}
	}

	page {
		background-color: #F7FAFE !important;
		// position: fixed;
		// top: 0;
		// left: 0;
	}

	.pages {
		// padding: 0 40rpx;
		// box-sizing: border-box;
	}
</style>