<template>
	<view>
		<u-navbar title="账单管理" title-color="#101010"></u-navbar>
		
		<u-picker v-model="tabsFrom.show1" mode="selector"
		 :default-selector="[tabsFrom.show1Index]"
		 :range="tabsFrom.selector1" range-key="label"
			@confirm="selector1confirm"></u-picker>
			
			
		<view class="head-head" style=" padding: 12px 0;" >
			<view class="tabs-box" v-if="!popShow" >
				<view class="tabs1" v-show="tenantList.length>1" :style="{width: tenantList.length>4 ? '' : '100%'}" >
					<u-tabs :list="tenantList1"   inactive-color="#777777" active-color="#333333	" 
					 bg-color="#fff" :is-scroll="false" :current="current" @change="change"></u-tabs>
				</view>
				<view class="icon"  @click="popShow=true" v-if="tenantList.length >= 4" >
					<u-icon name="arrow-down" color="#777777" size="28"></u-icon>
				</view>
			</view>
			<view style="
				text-align: center;
				display: flex;
				align-items: center;
				" >
				<view style="width: 40%;" @click="tabsFrom.show1=true">
						{{statusName?statusName:'支付状态'}} <u-icon name="arrow-down" color="#999999"></u-icon>
				</view>
				<view style="width: 60%;" >
					<u-search placeholder="请输入收费项目"  style="padding: 0 12px;" :show-action="false"	@change="merchantChangeApi(1)"	 v-model="keyword2"></u-search>
				</view>
			</view>
			
		</view>
		<view class="head-head-placeholder2 ">
			
		</view>
		<!-- 标签弹出层 -->
		<u-popup v-model="popShow"  @close="keyword=''"   length="80%" duration="10" mode="top" :negative-top="188" border-radius="32">
			<u-navbar title="账单管理"  title-color="#101010" >
				
			</u-navbar>
			<view class="head-head">
				<u-search placeholder="请输入租户名称" :show-action="false"		 v-model="keyword"></u-search>
				
			</view>
			<view class="head-head-placeholder ">
				
			</view>
			
			<view class="popup-tabs" v-if="false">
				<view class="tabs1">
					<!-- <u-tabs :list="tenantList1"   inactive-color="#777777" active-color="#333333	"
					 bg-color="#fff" :is-scroll="false" :current="current" @change="change"></u-tabs> -->
					<u-tabs :list="tenantList1" :is-scroll="false" :current="current" @change="change"></u-tabs >
				</view>
				<view class="more">
					<u-icon name="arrow-up" color="#777777" size="40" @click="popShow=false"></u-icon>
				</view>
			</view>
			<view class="tabs-options">
				<view class="item" v-for="(item, index) in tenantList"
				v-show="keyword==''||(item.name&&item.name.indexOf(keyword)!=-1)"
				
				 :class="{
				 	'item-index' : item.id==formData.tenantId
				 }"
				 :key="index"
					@click="merchantChange(item,index)">
					{{item.name}}
				</view>
				<u-divider   nonetext="没有找到相关内容"
					border-color="#CFD2D5">已经到底了</u-divider>
			</view>
		</u-popup>
		<view class="background">
			
			
				
			<view class="rules" v-if="queryList.length">
				
			
				<view class="content" v-for="(item,i) in queryList" 
				
			 
				@click="gotoUrl('/pages/tenantList/billPush?site=1&id='+item.id)"
				:key="i">
					
					<view class="name">
						缴费单位：{{item.tenantName}}
			
					</view>
					<view class="name">
						收费项目：{{item.name}}
								
					</view>
					<view class="name">
						账单总额：<span style="color: red;">￥{{item.billAmount}}</span>
								
					</view>
					
					<view class="value">
						<view class="time">推送时间：{{item.pushTime?item.pushTime:item.pushStatusName}}</view>
						<view class="state" :class="{
							'state1':item.payTime
						}" >{{item.payTime?'已支付':'未支付'}}</view>
					</view>
					
			
			
				</view>
				
				
			</view>
			
			<u-divider :isnone="queryList.length==0"  nonetext="没有找到相关内容"
				border-color="#CFD2D5">已经到底了</u-divider>
			
		</view>
	


	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/tenantList.js'
	import {
			parseUnixTime,newDate
		
		} from '@/apis/utils'

	export default {
		data() {
			return {
				tenantList:[],
				tenantList1:[],
				popShow:false,
				current:0,
				current1:0,
				current2: 0,
				formData:{
					pageIndex: 1,
					pageSize: 20,
				},
				recordsTotal:0,
				queryList: [],
				companyInfo:{},
				tenantInfo:{},
				queryBl:false,
				queryBl2:false,
				keyword:'',
				keyword2:"",
				statusName:"",
				tabsFrom: {
					show1: false,
					show1Index: 0,
					show2Index: '',
					show2: false,
					show1Text: "全部类型",
					show2Text: "全部时间",
					selector1: [
						{label: "全部",
						value: '',},
						{label: "已支付",
						value: '1',},
						{label: "未支付",
						value: '0',}
					]
					
				},
				
			}
		},
		onLoad(op) {
			if(op.id){
				
			}
		
		},
		onReady() {
			this.getTenantList()
			
		},
		methods: {
			selector1confirm(e) {
			
				var index = e[0]
				this.tabsFrom.show1Index = index
				this.tabsFrom.show1Text = this.tabsFrom.selector1[index].label
				this.formData.payStatus = this.tabsFrom.selector1[index].value
				this.getContractList(true)
			},
			merchantChangeApi(bl){
				this.getContractList(bl)
			},
			thisparseUnixTime(time){
				return parseUnixTime(newDate(time),'{y}年{m}月{d}日')
			},
			change(index) {
				
				this.current = index;
				this.formData.tenantId = this.tenantList1[index].id;
				 this.popShow = false;
				this.merchantChangeApi(true)
			},
			merchantChange(item, index) {
				if(this.current==0){
					this.current=1;
				}
				this.formData.tenantId= item.id;
				
				
				 //this.$forceUpdate()
				
				this.getTenantListSort()
				this.merchantChangeApi(true)
				this.popShow = false;
			},
			getTenantListSort( ){
				var list=this.tenantList
				for(var i  in list){
					var obj=list[i]
					if(this.formData.tenantId==obj.id){
						var obj1=list[this.current-1];
						list[this.current-1]=obj;
						list[i]=obj1;
					}
				}
				
				var mList1=[]
				mList1.push({
					id: '',
					name: '全部'
				});
				for (var i = 0; i < list.length; i++) {
					if (i >= 3) {
					
					} else {
						mList1.push(list[i]);
					}
				}
				this.tenantList1 = mList1;
			},
			getTenantList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.tenantList().then((response) => {
					uni.hideLoading();
					
					var list=response.data.tenantInfoList;
					this.tenantList=list
					if(list.length==1){
						this.queryBl2=true
					}else{
						//this.formData.tenantId=list[0].id
						this.merchantChangeApi()
						this.getTenantListSort()
					}
				
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			onReachBottom() {
				if (this.queryList.length < this.recordsTotal) {
					this.myLoadmore();
				}
			},
			myLoadmore() {
				this.formData.pageIndex += 1;
				this.getContractList();
			},
			getContractList(bl){
				uni.showLoading({
					mask:true,title:'加载中...'
				})
				if (bl) {
					this.queryList = [];
					this.formData.pageIndex = 1;
				}
				this.formData.name=this.keyword2
				API.billAdminList(this.formData).then((response) => {
					uni.hideLoading();
					//this.list=response.data.data;
					
					this.queryList = [
						...this.queryList,
						...response.data.data
					];
					this.recordsTotal = response.data.recordsTotal;
					
					this.queryBl=true
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			change1(index) {
				this.current1 = index;
			},
			change2(index) {
				this.current2 = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 标签
	.tabs-box{
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		 // padding: 16rpx 32rpx 16rpx 0;
		  .tabs{
			  width: 96%;
		  }
	}
	.background {
		// background: linear-gradient(180deg, rgba(22,119,255,1) 0%,rgba(22,119,255,0) 100%);
		// padding: 32rpx 0;
		// height: 720rpx;
	
		.unit {
			background-color: #fff;
			margin: 0 32rpx;
			border-radius: 8px;
			padding: 32rpx;
	
			.title {
				color: rgba(153, 153, 153, 1);
			}
	
			.value {
				color: rgba(51, 51, 51, 1);
				font-size: 40rpx;
				margin-top: 16rpx;
			}
		}
	}
	
	// 规则
	.rules {
		
		
	
		::v-deep.u-tabs {
			border-radius: 8px;
	
		}
	
		.content {
			background-color: #fff;
			padding-bottom: 24rpx;
			border-radius: 8px;
			padding: 24rpx;
			margin: 24rpx 32rpx;
			.name-title {
			    color: #999999;
			}
			.name {
				margin: 16rpx 0;
				color: rgba(16, 16, 16, 1);
				font-size: 28rpx;
				
			}
	
			.value{
				    display: flex;
				    align-items: center;
				    justify-content: space-between;
					
				.time{
					color: #9E9E9E;
					font-size: 24rpx;
				}
				.state{
					font-size: 24rpx;
					border-radius: 3px;
					border: 1px solid #FF8800;
					color: #FF8800;
					padding:2px 3px;

				}
				.state1{
					border: 1px solid #389E0D;
					color: #389E0D;
				}
			}
	
	
		}
	
		// 备注
		.remark {
			padding: 40rpx 32rpx;
			margin-top:  24rpx;
			border-radius: 8px;
			background-color: rgba(242, 244, 246, 1);
			color: rgba(16, 16, 16, 1);
			font-size: 24rpx;
			line-height: 34rpx;
	
			.value {
				margin-top: 16rpx;
			}
	
			.item {
				margin-bottom: 8rpx;
			}
		}
	}
	.tabs-box{
		background-color: #fff;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  padding: 16rpx 0 16rpx 0;
		  .tabs1{
			  width: 96%;
		  }
	}
	
	
	.popup-tabs {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 32rpx;
		padding-right: 32rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
	
		.tabs1 {
			width: 88%;
	
		}
	}
	
	::v-deep.u-tab-item {
		width: 25% !important;
		flex: none !important;
	}
	
	.tabs-options {
		//display: flex;
		padding: 24rpx 32rpx ;
		flex-wrap: wrap;
	
		.item {
			//width: 25%;
			color:rgb(119, 119, 119);
			margin-bottom: 24rpx;
			font-size: 32rpx;
		}
		.item-index{
			    color: rgb(51, 51, 51);
				font-weight: bold;
		}
	}
	.head-head{
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
		background: #fff;
		padding:24rpx;
		position: fixed;
		    left: 0;
		    right: 0;
		    top: 80rpx;
		    z-index: 991;
	}
	.head-head-placeholder{
		height: 112rpx;
		
	}
	.head-head-placeholder2{
		height: 222rpx;
		
	}
</style>