<template>
	<view class="container">
		<uni-nav-bar :fixed="true" left-icon="left" background-color="#0F6EFF" @clickLeft="back()" status-bar
			:title="details.name" />
		<view class="contant">
			<view class="list_item">
				<view class="list_item_top">
					<view class="list_item_left">
						<image :src="details.icon" mode=""></image>
						<view class="item_right">
							<view class="right_top" v-if="details.name">
								监测指标-{{details.name}}
							</view>
							<view class="right_bot" v-if="stationName">
								<image src="../../static/wz.png" mode=""></image>
								<view class="">{{stationName}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="qsttitle">
					总磷趋势图
				</view>
				<view class="qstcontent">
					<uni-ec-canvas :ec="ec" canvas-id="multi-charts-pie"></uni-ec-canvas>
				</view>
			</view>
			<view class="qst">
				<view class="list_item_bot">
					<view class="scrolltop" v-if="list.length != 0">
						<view class="tabitem" v-for="(item,index) in tabList" :key="index">
							{{item}}
						</view>
					</view>
					<scroll-view style="height: 550rpx;" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
						<block v-if="list.length != 0">
							<view class="lists_item" v-for="(item,index) in list" :key="index">
								<view class="jczbs" v-if="item.codelist[0].name">
									{{item.codelist[0].name}}
								</view>
								<view class="zbz" v-if="item.codelist[0].value">
									{{item.codelist[0].value}}{{item.codelist[0].unit}}
								</view>
								<!--<view class="szqs">
									<image v-if="item.type == 1" src="../../../static/home_shuju_shang.png" mode=""></image>
									<image v-if="item.type == 0" src="../../../static/home_shuju_xia.png" mode=""></image>
									<view class="szqss" v-if="item.type == 2"></view>
								</view> -->
								<view class="sbsj" v-if="item.codelist[0].dataDateTime">
									{{item.codelist[0].dataDateTime}}
								</view>
							</view>
						</block>
						<view class="load">
							<uni-load-more :status="loadStatus"></uni-load-more>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniEcCanvas from '../../components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '../../components/uni-ec-canvas/echarts.js'
	export default {
		components: {
			uniEcCanvas,
		},
		data() {
			return {
				items: {},
				details: {},
				list: [],
				stationCode: '',
				stationName: '',
				tabList: ['监测指标', '指标值', '上报时间'],
				wrwlist: uni.getStorageSync('wrwlist'),
				// 这里初始化一个null，待会儿用来充当echarts实例
				myChart: null,
				ec: {
					option: {}
				},
				allNum: '',
				isLastpage: '',
				intervalId: null,
				loadStatus:'more',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore:false,  //是否加载中
				show:false,
				show1:false,
				top:0,
				List:[],
				pageNo:1,
				pageSize:10,
				isRefresher: false, //下拉刷新状态
			}
		},
		onLoad(options) {
			this.details = JSON.parse(decodeURIComponent(options.item));
			this.details.code = this.details.survItem
			this.stationCode = options.stationCode
			this.stationName = options.stationName
		},
		onShow() {
			this.getsssj()
			this.gettjt()
		},
		methods: {
			getsssj() {
				let params = {}
				params.pollutionCode = this.details.code
				params.stationCode = this.stationCode
				params.pageNo = this.pageNo
				params.pageSize = this.pageSize
				// params.dataCounts = 100
				this.$http.get('/applet/wxclient/getRealTimeSignle', {
					params: params
				}).then(res => {
					var data = res.data.data.records
					for (var i = 0; i < data.length; i++) {
						data[i].codelist = []
						for (var j = 0; j < this.wrwlist.length; j++) {
							for (var k = 0; k < Object.keys(data[i]).length; k++) {
								if (this.wrwlist[j].code == Object.keys(data[i])[k]) {
									if (this.details.code == Object.keys(data[i])[k]) {
										data[i].codelist.push({
											name: this.wrwlist[j].description,
											unit: this.wrwlist[j].unit,
											value: (Math.floor(Object.values(data[i])[k] * 100) / 100).toFixed(2),
											dataDateTime:data[i].dataDateTime
										})
										console.log(data[i].codelist, '数据')
										console.log(data, '数据全部')
									}
								}
							}
						}
					}
					// this.list = data
					this.list = this.list.concat(data)
					// console.log(this.list, '数据all')
					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.loadStatus = 'more'
							console.log(this.isLastpage,'false')
						}
					}else{
						this.isLastpage = true;
						this.loadStatus='nomore'
					}
				})
			},
			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.pollutionCode = this.details.code
				params.stationCode = this.stationCode
				params.pageNo = this.pageNo
				params.pageSize = this.pageSize
				this.$http.get('/applet/wxclient/getRealTimeSignle',{params:params}).then(res =>{
					if(res.data.code == 0){
						var data = res.data.data.records
						for (var i = 0; i < data.length; i++) {
							data[i].codelist = []
							for (var j = 0; j < this.wrwlist.length; j++) {
								for (var k = 0; k < Object.keys(data[i]).length; k++) {
									if (this.wrwlist[j].code == Object.keys(data[i])[k]) {
										if (this.details.code == Object.keys(data[i])[k]) {
											data[i].codelist.push({
												name: this.wrwlist[j].description,
												unit: this.wrwlist[j].unit,
												value: (Math.floor(Object.values(data[i])[k] * 100) / 100).toFixed(2),
												dataDateTime:data[i].dataDateTime
											})
											console.log(data[i].codelist, '数据')
											console.log(data, '数据全部')
										}
									}
								}
							}
						}
						// this.list = data
						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'
						}
					}
				})
			},
			gettjt() {
				this.$http.post('/applet/wxclient/getSinglePollutionSummry?pollutionCode=' + this.details.code +
					'&stationCode=' + this.stationCode).then(res => {
					var datas = res.data.data
						this.ec.option = {
							title: {
								subtext: '(单位：mg/l)'
							},
							grid: {
								top: "46",
								left: "5",
								bottom: "5",
								right: "20",
								containLabel: true,
							},
							tooltip: {
								trigger: 'axis',
								position: [60, 60],
								axisPointer: {
									type: 'cross',
									label: {
										backgroundColor: '#6a7985'
									}
								}
							},
							color: '#19D58A',
							xAxis: {
								type: 'category',
								boundaryGap: false,
								axisLabel: {
									//x轴文字的配置
									show: true,
									interval: 0, //使x轴文字显示全
									color: '#999999',
								},
								data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
							},
							dataZoom: [{
								type: "inside", //内置型数据区域缩放组件
								// start: 0,
								// end: 10,
								endValue: 6,
								zoomOnMouseWheel: false, // 关闭鼠标滚轮缩放
								moveOnMouseWheel: true, // 开启鼠标滚轮窗口平移
								moveOnMouseMove: true // 开启鼠标移动窗口平移
							}],
							yAxis: {
								type: 'value'
							},
							series: [{
								data: datas,
								type: 'line',
								areaStyle: { //区域填充渐变颜色
									color: {
										type: 'linear',
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0,
											color: 'rgba(25, 213, 138, 1)' // 0% 处的颜色
										}, {
											offset: 1,
											color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
										}],
										global: false // 缺省为 false
									}
								}
							}]
						}
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		},
	}
</script>

<style lang="scss">
	.uni-nav-bar {
		height: 44px;
	}

	.uni-nav-bar-text {
		font-size: 32rpx !important;
		font-family: Source Han Sans SC;
		color: #FFFFFF !important;
	}

	.uni-nav-bar__left,
	.uni-nav-bar__right {
		color: #FFFFFF !important;
	}

	.uni-navbar__content {
		border: 0 none !important;
	}

	.uni-navbar__header-container-inner {
		padding: 0 40rpx;
		box-sizing: border-box;
		/* 文本不折行 */
		white-space: nowrap;
		/* 溢出隐藏 */
		overflow: hidden;
	}

	.uni-icons {
		color: #FFFFFF !important;
	}

	page {
		height: 100%;
	}

	.container {
		height: 100%;
		padding: 0rpx 32rpx;
		box-sizing: border-box;
	}

	.bgimg {
		width: 100%;
		height: 3550rpx;
	}

	.content {
		padding: 28rpx 0 58rpx;
		box-sizing: border-box;
	}

	.list_item {
		width: 100%;
		padding: 37rpx 0rpx 28rpx;
		background: #FFFFFF;
		border-radius: 34rpx;
		margin-bottom: 25rpx;
		margin-top: 28rpx;
	}

	.list_item:last-child {
		margin-bottom: 0;
	}

	.list_item_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-bottom: 25rpx;
		padding: 0 34rpx 36rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #F6F8FB;
	}

	.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;
	}

	.scroll-Y {
		padding: 0 32rpx 0 32rpx;
		box-sizing: border-box;
	}

	.lists_item {
		padding-top: 35rpx;
		box-sizing: border-box;
		display: flex;
	}

	.jczbs {
		width: 30%;
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #667482;
		// text-align: center
	}

	.zbz {
		width: 30%;
		font-size: 24rpx;
		font-family: DIN Next LT Pro;
		font-weight: 400;
		color: #2FCD81;
		// text-align: center
	}

	.zbzs {
		color: #2FCD81;
	}

	.szqs {
		width: 53rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.szqs image {
		width: 24rpx;
		height: 31rpx;
	}

	.sbsj {
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #667482;
		flex: 1;
		// text-align: center
		// text-align: right;
	}

	.szqss {
		width: 24rpx;
	}

	.scrolltop {
		padding: 0rpx 32rpx 16rpx 32rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #F6F8FB;
		width: 100%;
	}

	.tabitem {
		font-size: 26rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #2F3841;
		display: inline-block;
		padding-bottom: 26rpx;
	}

	.tabitem:first-child{
		width: 30%;
		// text-align: center
	}
	.tabitem:nth-child(2){
		width: 30%;
		// text-align: center
	}
	.tabitem:nth-child(3){
		flex: 1;
		// text-align: center
	}

	.qst {
		background: #FFFFFF;
		border-radius: 34rpx;
		padding-top: 43rpx;
		padding-bottom: 34rpx;
	}

	.qsttitle {
		font-size: 32rpx;
		font-family: Source Han Sans SC;
		font-weight: bold;
		color: #2F3841;
		padding-left: 33rpx;
	}

	.qstcontent {
		height: 400rpx;
		width: 100%;
		padding-left: 20rpx;
		overflow-x: scroll;
		overflow-y: hidden;
	}

	.uni-ec-canvas {
		width: 100%;
		height: 400rpx;
	}
	.load{
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #c6c6c6;
	}

</style>