<template>
	<view class="container">
		<view class="liebiaos" v-if="List.length != 0">
			<scroll-view :style="{height:scorllheight + 'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="lower" @refresherrefresh="refresherrefreshFun" @refresherpulling="refresherpullingFun" :refresher-triggered="isRefresher" refresher-enabled="true">
				<view class="topnum">
					监测站数量 <span class="number">{{cutMoneyFiter(List.length) || 0}}</span>个
				</view>
				<view class="list_item" v-for="(item,index) in List" :key="index" @click="todetail(item,index)">
					<view class="list_item_top">
						<view class="list_item_left">
							<image v-if="item.stationType == 'livestock'" src="../../static/zhandian_icon_xuqin.png" mode=""></image>
							<image v-else src="../../static/zd.png" mode=""></image>
							<view class="item_right" v-if="item.stationName">
								<view class="right_top">
									{{item.stationName}}
								</view>
								<view class="right_bot" v-if="item.stationLocation">
									<image src="../../static/wz.png" mode=""></image>
									<view class="">{{item.stationLocation}}</view>
								</view>
							</view>
						</view>
						<image src="../../../static/me_icon_in.png" mode="" class="jt"></image>
					</view>
					<view class="list_item_bot">
						<view class="bot_box">
							<view class="sbnum">
								{{item.deviceCount || 0}}
							</view>
							<view class="sbtext">
								设备数量
							</view>
						</view>
						<view class="bot_box">
							<view class="sbnum">
								{{item.survObj.length || 0}}
							</view>
							<view class="sbtext">
								监测指标
							</view>
						</view>
						<view class="bot_box">
							<view class="sbnum">
								{{item.survDataCount || 0}}
							</view>
							<view class="sbtext">
								上报数据
							</view>
						</view>
					</view>
				</view>
				<view class="load">
					<uni-load-more :status="loadStatus"></uni-load-more>
				</view>
			</scroll-view>
		</view>
		<view class="zwsj" v-else>
			<view class="inzwsj">
				<image src="../../static/zwsj.png" mode="" class="zwsjimg"></image>
				<view class="zwsjtext">
					暂无数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/api/api"
	import configService from '@/common/service/config.service.js';
	export default{
		data(){
			return{
				baseUrl:configService.apiUrl,
				height:0,
				scorllheight:0,
				allNum: '',
				isLastpage: '',
				intervalId: null,
				loadStatus:'more',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore:false,  //是否加载中
				show:false,
				show1:false,
				top:0,
				List:[],
				pageNo:1,
				pageSize:4,
				isRefresher: false, //下拉刷新状态
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					var pxToRpxScale  = 750 / res.windowWidth
					var ktxStatusHeight = res.statusBarHeight * pxToRpxScale
					var navigationHeight = 44 * pxToRpxScale
					this.height = res.windowHeight  * pxToRpxScale//将px 转换rpx		
					console.log(this.height,ktxStatusHeight,navigationHeight)
					this.scorllheight = this.height
				}
			});
			this.getList()
		},
		methods:{
			// 下拉刷新被触发
			refresherrefreshFun() {
				this.pageNo = 1
				this.getList()
			},
			// 下拉刷新触发
			refresherpullingFun() {
				this.isRefresher= true
			},
			getList(){
				let params = {}
				params.pageNo = this.pageNo
				params.pageSize = this.pageSize
				uni.showLoading({
					title: '加载中'
				});
				this.List = []
				this.$http.get('/applet/survStationInfo/page',{params:params}).then(res =>{
					if(res.data.code == 0){
						var data = res.data.data.records
						this.List = this.List.concat(data)
						for(var i=0;i<this.List.length;i++){
							if(this.List[i].deviceCount >= 10000 && this.List[i].deviceCount < 100000000){
								this.List[i].deviceCount = (this.List[i].deviceCount /10000).toFixed(1) + '万'
							}
							if(this.List[i].deviceCount >= 100000000){
								this.List[i].deviceCount = (this.List[i].deviceCount /100000000).toFixed(1) + '亿'
							}
							if(this.List[i].survObj.length >= 10000 && this.List[i].survObj.length < 100000000){
								this.List[i].survObj.length = (this.List[i].survObj.length /10000).toFixed(1) + '万'
							}
							if(this.List[i].survObj.length >= 100000000){
								this.List[i].survObj.length = (this.List[i].survObj.length /100000000).toFixed(1) + '亿'
							}
							if(this.List[i].survDataCount >= 10000 && this.List[i].survDataCount < 100000000){
								this.List[i].survDataCount = (this.List[i].survDataCount /10000).toFixed(1) + '万'
							}
							if(this.List[i].survDataCount >= 100000000){
								this.List[i].survDataCount = (this.List[i].survDataCount /100000000).toFixed(1) + '亿'
							}
						}
						console.log(this.List,'35415')
						if(res.data.data.total != 0){
							this.allNum = Number(res.data.data.total)/Number(this.pageSize)+'';
							console.log(this.allNum,'总页数')
							if(this.allNum.indexOf('.') == -1) {
								this.allNum = this.allNum;
								console.log(this.allNum,'if')
							} else {
								this.allNum = parseInt(Number(this.allNum)+1);
								console.log(this.allNum,'else')
							}
							console.log(this.pageNo,this.allNum,'156156')
							if(this.pageNo == this.allNum) {
								this.isLastpage = true;
								 this.loadStatus='nomore'
								console.log(this.isLastpage,'true','nomore')
							} else {
								this.isLastpage = false;
								// this.isLoadMore=true
								this.loadStatus = 'more'
								console.log(this.isLastpage,'false')
							}
						}else{
							this.isLastpage = true;
							this.loadStatus='nomore'
						}
					}
					uni.hideLoading();
					this.isRefresher= false
				})
			},
			lower() {
				console.log("最后一页了，取消下拉功能");
				// 最后一页了，取消下拉功能
				if (this.isLastpage) {
					return
				}
				clearInterval(this.intervalId);
				var num = 1;
				this.intervalId = setInterval(() => {
					num = num+1;
				},1000)
					console.log(this.intervalId,num)
				this.pageNo = this.pageNo + 1;
				let params = {}
				params.pageNo = this.pageNo
				params.pageSize = this.pageSize
				this.$http.get('/applet/survStationInfo/page',{params:params}).then(res =>{
					if(res.data.code == 0){
						var data = res.data.data.records
						this.List = this.List.concat(data)
						if(res.data.data.total != 0){
							if(this.pageNo == this.allNum) {
								this.isLastpage = true;
								 this.loadStatus='nomore'
								console.log(this.isLastpage,'true')
							} else {
								this.isLastpage = false;
								// this.isLoadMore=true
								this.loadStatus = 'more'
								console.log(this.isLastpage,'false')
							}
						}else{
							this.isLastpage = true;
							this.loadStatus='nomore'
						}
					}
				})
			},
			todetail(item,index){
				uni.navigateTo({
					url:'/packDetail/pages/Site/detail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.container{
		height: 100%;
		// overflow-y: scroll;
		// overflow-x: hidden;
	}
	.bgimg{
		width: 100%;
		height: 1365rpx;
	}
	.liebiaos{
		padding: 0rpx 32rpx 0;
	}
	.topnum{
		margin-bottom: 25rpx;
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #B3C1D1;
		margin-top: 14rpx;
	}
	.number{
		font-size: 34rpx;
		font-family: DIN Next LT Pro;
		font-weight: 500;
		color: #2AC166;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}
	.list_item{
		width: 100%;
		padding: 37rpx 34rpx 28rpx;
		background: #FFFFFF;
		border-radius: 34rpx;
		margin-bottom: 25rpx;
	}
	.list_item:last-child{
		margin-bottom: 0;
	}
	.list_item_top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-bottom: 25rpx;
	}
	.list_item_left{
		display: flex;
		align-items: center;
	}
	.list_item_left image{
		width: 73rpx;
		height: 73rpx;
		margin-right: 18rpx;
	}
	.item_right{
		height: 76rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.right_top{
		font-size: 32rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #2F3841;
	}
	.right_bot{
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #9CA9BE;
	}
	.right_bot image{
		height: 26rpx;
		width: 24rpx;
		margin-right: 11rpx;
	}
	.jt{
		width: 40rpx;
		height: 48rpx;
	}
	.list_item_bot{
		width: 100%;
		background: #F6F6F6;
		border-radius: 16rpx;
		padding: 28rpx 0;
		display: flex;
		justify-content: space-between;
	}
	.bot_box{
		width: 30%;
		padding: 0 20rpx;
		box-sizing: border-box;
		border-right: 2rpx solid #e6e9ef;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.bot_box:last-child{
		border: none;
		flex: 1;
	}
	.sbnum{
		width: 100%;
		font-size: 42rpx;
		font-family: DIN Next LT Pro;
		font-weight: 500;
		color: #142E55;
		margin-bottom: 15rpx;
		text-align: center;
	}
	.sbtext{
		width:100%;
		text-align: center;
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #9CA9BE;
	}
	.load{
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #c6c6c6;
	}
	.zwsj{
		width: 100%;
		height: 100%;
		display: flex;
		padding: 60% 170rpx 0;
	}
	.inzwsj{
		width: 100%;
	}
	.zwsjimg{
		width: 100%;
		height: 224rpx;
		margin-bottom: 37rpx;
	}
	.zwsjtext{
		width: 100%;
		font-size: 26rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #999999;
		line-height: 31rpx;
		text-align: center;
	}
</style>