<template>
	<view class="pages">
		<u-navbar title="订单管理" :border-bottom="false" :background="bgc" back-icon-color="#3D3D3D" title-color='#3D3D3D'
			title-size='36' height='44'></u-navbar>
         
		 <view class="top">
			     <view class="inp">
			     	<view class="time">
			     		时间范围
			     	</view>
			     	<view class="date">
			     		<text @click="btnks(1)">{{firsTime}}</text> - <text @click="btnks(2)">{{lasTime}}</text>
			     	</view>
			     </view>
				<view class="serch">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uBY0VGovU7BZrSdUi7cn" mode=""></image> <input @blur="blurs" v-model="keyword" type="text" placeholder="请输入内容"/>
				</view>
				
				<view class="tab_list">
					<view :class="activeindex == 1 ? 'active' : ''" @click="btntab(1)">全部</view>
					<view :class="activeindex == 2 ? 'active' : ''" @click="btntab(2)">进行中</view>
					<view :class="activeindex == 3 ? 'active' : ''" @click="btntab(3)">已完成</view>
				</view>
		 </view>
		  <scroll-view scroll-y="true" @scrolltolower="onScrollToLower" style="height: 1360rpx;" class="order_list">
		  	  <view class="order_item" v-for="(item,index) in wateringList" :key="index" @click="btndetail(item.billId)">
		  	  	  <view class="tops">
		  	  	  	 <view>订单编号：{{item.billNo}}</view> 
					 <view style="color: #8883F0;" v-if="item.isUsing == true"> <text></text> 进行中 </view>
					 <view style="color: springgreen;" v-if="item.isFinished == true"> <text style="background-color: springgreen;"></text> 已完成 </view>
					 <view class="" v-if="item.isUsing == false && item.isFinished == false">
                            <view v-if="item.status == 1"><text style="background-color: #333;"></text> 未支付</view>		
							<view v-if="item.status == 2"><text style="background-color: #333;"></text> 支付成功</view>	
							<view v-if="item.status == 3"><text style="background-color: #333;"></text> 已退款</view>	
							<view v-if="item.status == 4"><text style="background-color: #333;"></text> 用户取消</view>	
							<view v-if="item.status == 5"><text style="background-color: #333;"></text> 系统超时取消</view>	
							<view v-if="item.status == 6"><text style="background-color: #333;"></text> 支付中</view>	
							<view v-if="item.status == 7"><text style="background-color: #333;"></text> 退款中</view>	
							<view v-if="item.status == 8"><text style="background-color: #333;"></text> 押金未支付</view>	
							<view v-if="item.status == 9"><text style="background-color: #333;"></text> 押金已支付</view>	
					 </view> 
		  	  	  </view>
				  <view class="xiao">
				  	 <view>租赁用户</view>
					 <view>{{item.userName}}</view>
				  </view>
				  <view class="xiao">  
				  	 <view>设备编号</view>
				  	 <view>{{item.deviceNo}}</view>
				  </view>
				  <view class="xiao">
				  	 <view>经营场所</view>
				  	 <view style="color: #8883F0;">{{item.storeName}}</view>
				  </view>
				  <view class="xiao">
				  	 <view>购买套餐</view>
				  	 <view>{{item.suitName}}</view>
				  </view>
				  <view class="xiao">
				  	 <view>套餐时长</view>
				  	 <view>{{item.suitTime}}小时</view>
				  </view>
				  <view class="xiao">
				  	 <view>合作伙伴信息</view>
				  	 <view>{{item.agentName}}（{{item.agentMobile}}）</view>
				  </view>
				  <view class="bot">
				  	 <view>套餐金额：<text>￥{{item.money}}</text> </view> 
				  	 <view>{{item.createTime}}</view>
				  </view>
		  	  </view>
			  <view class="" style="width: 100%;text-align: center;color: #ccc;margin-top: 50rpx;">
			  	 -已经到底了-
			  </view>
		  </scroll-view>
		 
		 
		 <!-- 选择时间 -->
		 <u-picker mode="time" v-model="show" :params="params" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				}, 
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				show: false,
				num: '',
				firsTime:'',
				lasTime:'',
				activeindex:1,
				pagenum: 1,
				wateringList: [],
				pagesize: 10, // 一页多少数据
				total: 0,
				type:2,
				keyword:'',
				isUsing:'',
				isFinished:''
			}
		},
		onLoad() {
            let today = new Date()
            this.firsTime = this.formatDates(today)
            this.lasTime = this.formatDate(today)
			this.getlist()
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创亿康',
				path: '/pages/index/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {	
			return {
				title: '创亿康',
				query: '',
				path: '/pages/index/index'
			}
		},
		methods: {
			// 跳转到详情
			btndetail(billId){
				uni.navigateTo({
					url:'/page_user/orderdetail?billId=' + billId
				})
			},
			// tab切换
			btntab(num){
				this.activeindex = num
				if(num == 1){
					this.isUsing = ''
					this.isFinished = ''
					this.wateringList = []
					this.pagenum = 1
					this.getlist()
				}else if(num == 2){
					this.isUsing = true
					this.isFinished = false
					this.wateringList = []
					this.pagenum = 1
					this.getlist()
				}else{
					this.isUsing = false
					this.isFinished = true
					this.wateringList = []
					this.pagenum = 1
					this.getlist()
				}
			},
			// 选择时间
              btnks(num) {
              	this.show = true
              	if (num == 1) {
              		this.num = 1
					this.wateringList = []
					this.pagenum = 1
					this.getlist()
              	} else {
              		this.num = 2
					this.wateringList = []
					this.pagenum = 1
					this.getlist()
              	}
              },
			  // 确定时间
			  confirm(e) {
			  	if (this.num == 1) {
			  		this.firsTime = e.year + '-' + e.month + '-' + e.day
					this.wateringList = []
					this.pagenum = 1
			  		this.getlist()
			  	} else {
			  		this.lasTime = e.year + '-' + e.month + '-' + e.day
					this.wateringList = []
					this.pagenum = 1
			  		this.getlist()
			  	}
			  },
			  formatDate(date) {
			  	let year = date.getFullYear()
			  	let month = String(date.getMonth() + 1).padStart(2, '0')
			  	let day = String(date.getDate()).padStart(2, '0')
			  	return `${year}-${month}-${day}`
			  },
			  formatDates(date) {
			  	let year = date.getFullYear()
			  	let month = String(date.getMonth()).padStart(2, '0')
			  	let day = String(date.getDate()).padStart(2, '0')
			  	return `${year}-${month}-${day}`
			  },
			  
			  // 查询订单
			  getlist(){
			  	this.$u.get(`/app/bill/incomeList?pageNum=${this.pagenum}&pageSize=${this.pagesize}&keyword=${this.keyword}&createDateRange=${this.firsTime + ',' + this.lasTime}&isUsing=${this.isUsing}&isFinished=${this.isFinished}`).then(res => {
			  		if(res.code == 200){
			  			this.total = res.total
			  			if (res.rows.length > 0) {
			  				// 有数据，追加到列表  
			  				this.wateringList = this.wateringList.concat(res.rows)
			  				this.pagenum++
			  			}
			  		}
			  	})
			  },
			  // 滚动到底部
			  onScrollToLower() {
			  	if (this.total > this.wateringList.length) {
			  		this.getlist() // 上拉加载更多  
			  	} else {
			          
			  	}
			  },
			  // 失焦搜索
			  blurs(){
				  this.wateringList = []
				  this.pagenum = 1
				  this.getlist()
			  }
			  

		}
	}
</script>

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

	/deep/ .u-icon__icon {
		padding-bottom: 15rpx;
	}
    .active{
		font-size: 32rpx !important;
		color: #3D3D3D !important;
		font-weight: 600;
		border-bottom: 6rpx solid #8883F0;
		transition-duration: .3s;
	}
	.pages {
		background-color: #F7FAFE !important;
		height: 100vh;
		width: 100%;
		overflow: hidden;
		.order_list{
			padding-bottom: 350rpx;
			box-sizing: border-box;
			height: 1020rpx;
			overflow: scroll;
			.order_item{
				width: 672rpx;
				height: 512rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0,0,0,0.07);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin: auto;
				margin-top: 18rpx;
				padding: 24rpx 28rpx;
				box-sizing: border-box;
				.bot{
					display: flex;
					justify-content: space-between;
					border-top: 1px solid #D8D8D8;
					padding-top: 22rpx;
					box-sizing: border-box;
					margin-top: 22rpx;
					view{
						text{
							color: #8883F0;
						}
					}
				}
				.xiao{
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #3D3D3D;
					margin-top: 20rpx;
				}
				.tops{
					display: flex;
					justify-content: space-between;
					width: 100%;
					border-bottom: 1px solid #D8D8D8;
					padding-bottom: 20rpx;
					box-sizing: border-box;
					view{
						display: flex;
						align-items: center;
						text{
							display: inline-block;
							width: 14rpx;
							height: 14rpx;
							border-radius: 50%;
							background-color: #8883F0;
							margin-right: 6rpx;
						}
					}
				}
			}
		}
		.top{
			width: 750rpx;
			height: 390rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-top: 42rpx;
			box-sizing: border-box;
			.tab_list{
				display: flex;
				justify-content: space-between;
				padding: 0 128rpx;
				box-sizing: border-box;
				margin-top: 48rpx;
				font-size: 32rpx;
				color: #808080;
				view{					
					padding-bottom: 4rpx;
					box-sizing: border-box;
				}
			}
			.inp{
				width: 672rpx;
				height: 100rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0,0,0,0.07);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				margin: auto;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding-left: 28rpx;
				.time{
					margin-right: 34rpx;
					font-size: 32rpx;
					color: #3D3D3D;
				}
				.date{
					font-size: 32rpx;
					color: #979797;
				}
			}
			.serch{
				width: 672rpx;
				height: 100rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0,0,0,0.07);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				margin: auto;
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding-left: 28rpx;
				image{
					width: 44rpx;
					height: 44rpx;
					margin-right: 22rpx;
				}
			}
		}
	}

</style>