<template>
	<view class="container">
		<scroll-view scroll-y="true" :style="{height:height + 'rpx'}" @refresherrefresh="refresherrefreshFun" @refresherpulling="refresherpullingFun" :refresher-triggered="isRefresher" refresher-enabled="true">
		<view class="topcheck">
			<view class="left">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input" v-if="!stationName">选择站点 <image src="../../static/xia.png"></image></view>
					<view class="uni-input" v-else>{{stationName}} <image src="../../static/xia.png"></image></view>
				</picker>
			</view>
			<view class="right">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input" v-if="!sampTime">选择日期 <image src="../../static/xia.png"></image></view>
					<view class="uni-input" v-else>{{sampTime}} <image src="../../static/xia.png"></image></view>
				</picker>
			</view>
		</view>
		<view class="searchbox">
			<image src="../../static/meishi_icon_sousuo.png" mode=""></image>
			<input class="search_input" v-model="cropName" placeholder="请输入要搜索的覆膜作物">
			<view class="searchbutton" @click="changenr()">
				搜索
			</view>
		</view>
		<view class="liebiaos" v-if="List.length != 0">
			<scroll-view :style="{height:scorllheight + 'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<view class="itembox" v-for="(item,index) in List" :key="index">
					<view class="itembox_top">
						<view class="itembox_lef" @click="todetails(item,index)">
							<image src="../../static/fz.png" mode=""></image>
							<view class="title">
								{{item.stationName}}
							</view>
						</view>
						<view class="caozuo" @click="caozuo(item)">
							<image src="../../static/dian.png" mode=""></image>
						</view>
					</view>
					<view class="itembox_bot" @click="todetails(item,index)">
						<view class="bot_item">
							<span class="nrbt">覆膜作物:</span>
							{{item.cropName}}
						</view>
						<view class="bot_item">
							<span class="nrbt">秸秆残留量:</span>
							{{item.strawRemain?item.strawRemain:0}}
						</view>
						<view class="bot_item">
							<span class="nrbt">地膜残留量:</span>
							<span class="number">{{item.mulchRemain}}kg/hm²</span>
						</view>
						<view class="bot_item">
							<span class="nrbt">采样时间:</span>
							{{item.sampTime}}
						</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>
		<image @click="toadd()" class="add" src="../../static/add.png" mode=""></image>
		</scroll-view>
	</view>
</template>

<script>
	import api from "@/api/api"
	import configService from '@/common/service/config.service.js';
	export default {
		data() {
			return {
				List:[],
				baseUrl:configService.apiUrl,
				array:[],
				index:'',
				sampTime:'',
				cropName:'',
				allNum: '',
				isLastpage: '',
				intervalId: null,
				loadStatus:'more',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore:false,  //是否加载中
				height:0,
				scorllheight:0,
				show:false,
				show1:false,
				top:0,
				pageNo:1,
				pageSize:4,
				deleteUrl:'/applet/survMulchRecord/delete',
				stationName:'',
				stationCode:'',
				sampTime:'',
				arrays:[],
				isRefresher: false, //下拉刷新状态
				reload:''
			}
		},
		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		
					this.scorllheight = this.height - 182
				}
			});
			this.getList()
		},
		onShow() {
			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		
					this.scorllheight = this.height - 182
				}
			});
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1]; //当前页面
			this.reload = currPage.data.reload
			if(this.reload){
				this.cropName = ''
				this.sampTime = ''
				this.stationCode = ''
				this.stationName = ''
				this.pageNo = 1
				this.getList()
				this.reload = ''
			}
			this.getazsurvMulchRecord()
		},
		methods:{
			getazsurvMulchRecord(){
				this.array = []
				this.arrays = []
				this.$http.get('/applet/survStationInfo/list').then(res=>{
					for(var i=0;i<res.data.data.length;i++){
						this.arrays.push({
							label:res.data.data[i].stationName,
							value:res.data.data[i].stationCode
						})
						this.array.push(res.data.data[i].stationName)
					}
				})
			},
			// 下拉刷新被触发
			refresherrefreshFun() {
				this.cropName = ''
				this.sampTime = ''
				this.stationCode = ''
				this.stationName = ''
				this.pageNo = 1
				this.getList()
			},
			// 下拉刷新触发
			refresherpullingFun() {
				this.isRefresher= true
			},
			getList(){
				let params = {}
				params.pageNo = this.pageNo
				params.pageSize = this.pageSize
				params.cropName = this.cropName
				params.sampTime = this.sampTime
				params.stationCode = this.stationCode
				params.stationName = this.stationName
				uni.showLoading({
					title: '加载中'
				});
				this.List = []
				this.$http.get('/applet/survMulchRecord/list',{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){
							this.allNum = Number(res.data.data.total)/Number(this.pageSize)+'';
							if(this.allNum.indexOf('.') == -1) {
								this.allNum = this.allNum;
							} else {
								this.allNum = parseInt(Number(this.allNum)+1);
							}
							if(this.pageNo == this.allNum) {
								this.isLastpage = true;
								 this.loadStatus='nomore'
							} else {
								this.isLastpage = false;
								// this.isLoadMore=true
								this.loadStatus = 'more'
							}
						}else{
							this.isLastpage = true;
							this.loadStatus='nomore'
						}
					}
					uni.hideLoading();
					this.isRefresher= false
				})
			},
			lower() {
				// 最后一页了，取消下拉功能
				if (this.isLastpage) {
					return
				}
				clearInterval(this.intervalId);
				var num = 1;
				this.intervalId = setInterval(() => {
					num = num+1;
				},1000)
				this.pageNo = this.pageNo + 1;
				let params = {}
				params.pageNo = this.pageNo
				params.pageSize = this.pageSize
				params.cropName = this.cropName
				params.sampTime = this.sampTime
				params.stationCode = this.stationCode
				params.stationName = this.stationName
				this.$http.get('/applet/survMulchRecord/list',{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'
							} else {
								this.isLastpage = false;
								// this.isLoadMore=true
								this.loadStatus = 'more'
							}
						}else{
							this.isLastpage = true;
							this.loadStatus='nomore'
						}
					}
				})
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value
				this.stationName = this.array[this.index]
				for(var i=0;i<this.arrays.length;i++){
					if(this.stationName == this.arrays[i].label){
						this.stationCode = this.arrays[i].value
					}
				}
				this.pageNo = 1
				this.getList()
			},
			bindDateChange: function(e) {
				this.sampTime = e.detail.value
				this.pageNo = 1
				this.getList()
			},
			changenr(){
				this.pageNo = 1
				this.getList()
			},
			todetails(item,index){
				uni.navigateTo({
					url:'/packDetail/pages/waste/detail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			toadd(){
				uni.navigateTo({
					url:'/packDetail/pages/waste/add'
				})
			},
			caozuo(item){
				var that = this
				uni.showActionSheet({
					itemList: ['编辑', '删除'],
					success: function (res) {
						if((res.tapIndex + 1) == 1){
							uni.navigateTo({
								url:'/packDetail/pages/waste/edit?item='+ encodeURIComponent(JSON.stringify(item))
							})
						}else{
							uni.showModal({
								title: '提示',
								content: '是否删除数据？',
								success: function (res) {
									if (res.confirm) {
										that.$http.delete(that.deleteUrl+'?id='+item.id).then(res =>{
											if(res.data.code == 0){
												uni.showToast({
													title: '删除成功',
													icon:'success',
													duration: 2000
												});
												that.cropName = ''
												that.sampTime = ''
												that.stationCode = ''
												that.stationName = ''
												that.pageNo = 1
												that.getList()
											}
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.container{
		height: 100%;
	}
	.topcheck{
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #ededed;
		background-color: white;
	}
	.left{
		width: 50%;
		display: flex;
		justify-content: center;
	}
	.right{
		width: 50%;
		border-left: 4rpx solid #ededed;
		display: flex;
		justify-content: center;
	}
	.searchbox{
		padding: 20rpx 30rpx; 
		background-color: white;
		position: relative;
		display: flex;
		justify-content: space-between;
	}
	.search_input{
		border: none;
		height: 60rpx;
		width: 86%;
		font-size: 24rpx;
		border-radius: 30rpx;
		background-color: #F6F6F6;
		padding-left: 50rpx;
	}
	.searchbox image{
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		left: 40rpx;
		top: 35%;
		z-index: 99;
	}
	.searchbutton{
		width: 10%;
		height: 60rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 60rpx;
	}
	.itembox{
		background-color: white;
		padding: 30rpx;
		margin-top: 20rpx;
	}
	.itembox:first-child{
		margin-top: 0;
	}
	.uni-input{
		display: flex;
		align-items: center;
	}
	.uni-input image{
		height: 12rpx;
		width: 24rpx;
		margin-left: 5rpx;
	}
	.itembox_top{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #e4e4e4;
	}
	.itembox_lef image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 14rpx;
	}
	.itembox_lef{
		display: flex;
		align-items: center;
		font-weight: 500;
		width: 70%;
	}
	.caozuo{
		height: 100%;
		display: flex;
		align-items: center;
		flex:1;
		justify-content: flex-end;
	}
	.caozuo image{
		width: 7rpx;
		height: 29rpx;
		z-index: 99;
	}
	.bot_item{
		margin-top: 30rpx;	
	}
	.nrbt{
		color: #898989;
		margin-right: 10rpx;
	}
	.number{
		color: #26bf64;
	}
	// .numbers{
	// 	color:#26bf64;
	// }
	.load{
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #c6c6c6;
	}
	.add{
		height: 150rpx;
		width: 150rpx;
		position: fixed;
		bottom: 100rpx;
		right: 60rpx;
	}
	.popup{
		background-color: white;
		height: 100%;
		width: 100%;
	}
	.title{
		font-weight: bold;
	}
	.zwsj{
		width: 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>