<template>
	<view class="container">
		<uni-nav-bar :fixed="true" left-icon="left" background-color="#0F6EFF" @clickLeft="back()" status-bar :title="details.stationName"/>
		<block v-if="details.stationName">
		<view class="content" >
			<view class="list_item">
				<view class="list_item_top">
					<view class="list_item_left">
						<image v-if="details.stationType == 'livestock'" src="../../static/zhandian_icon_xuqin.png" mode=""></image>
						<image v-else src="../../static/zd.png" mode=""></image>
						<view class="item_right">
							<view class="right_top" v-if="details.stationName">
								{{details.stationName}}
							</view>
							<view class="right_bot" v-if="details.stationLocation">
								<image src="../../static/wz.png" mode=""></image>
								<view class="">{{details.stationLocation}}</view>
							</view>
						</view>
					</view>
					<view class="state">
						<view class="">
							在线
						</view>
						<image src="../../static/zhandian_icon_zaixian .png" mode="" class="zt"></image>
					</view>
				</view>
				<view class="list_item_bot">
					<view class="bot_box">
						<view class="sbnum">
							{{details.deviceCount || 0}}
						</view>
						<view class="sbtext">
							设备数量
						</view>
					</view>
					<view class="bot_box">
						<view class="sbnum">
							{{details.survItemCount || 0}}
						</view>
						<view class="sbtext">
							监测项
						</view>
					</view>
					<view class="bot_box">
						<view class="sbnum">
							{{details.survDataCount || 0}}
						</view>
						<view class="sbtext">
							上报数据
						</view>
					</view>
				</view>
				<view class="jstime">
					<view class="border"></view>
					<view class="jstime_right" v-if="details.buildTime">
						<view class="jstimerig_top">
							站点建设时间:
						</view>
						<view class="jstimerig_bot">
							{{details.buildTime}}
						</view>
					</view>
				</view>
				<view class="jstime">
					<view class="border1"></view>
					<view class="jstime_right" v-if="survItemList.length != 0">
						<view class="jstimerig_top">
							监测指标:
						</view>
						<view class="jstimerig_bot">
							<view class="tag-view" v-for="(item,index) in survItemList" :key="index">
								<view :style="{background:item.color}" class="tag">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="zdjk" v-if="survCamera.length != 0">
				<view class="zdjk_top">
					<view class="zdjktop_left">
						站点监控
					</view>
					<view class="zdjktop_right">
						监控数量<span class="number">{{survCamera.length}}</span>个
					</view>
				</view>
				<view class="zdjk_bot">
					<view class="zdjkbot_left" v-for="(item,index) in survCamera" :key="index" @click="tojk(item,index)">
						<image src="../../static/mrt.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="jczb">
				<view class="zdjk_top">
					<view class="zdjktop_left">
						监测数据
					</view>
					<view class="zdjktop_right">
						监测项目<span class="number">{{details.survItemCount || 0}}</span>项
					</view>
				</view>
				<view class="jczb_bot">
					<view>
						<view class="jccontent" v-if="orientlist && orientlist.length != 0">
							<view class="titles">
								重要污染物监测
							</view>
							<view class="botcontent">
								<view class="botcontent_left" v-for="(item,index) in orientlist" :key="index" @click="tosjdetail(item,index)">
									<view class="botleft_left">
										<view class="botleftleft_top">
											{{item.name}}
										</view>
										<view class="botleftleft_bot">
											{{item.value || 0}}{{item.unit}}
										</view>
									</view>
									<image :src="baseUrl+ '/' +item.icon" mode=""></image>
								</view>
							</view>
						</view>
						<view class="jccontent" v-if="livelist && livelist.length != 0">
							<view class="titles">
								重要污染物监测
							</view>
							<view class="botcontent">
								<view class="botcontent_left" v-for="(item,index) in livelist" :key="index" @click="tosjdetail(item,index)">
									<view class="botleft_left">
										<view class="botleftleft_top">
											{{item.name}}
										</view>
										<view class="botleftleft_bot">
											{{item.value || 0}}{{item.unit}}
										</view>
									</view>
									<image :src="baseUrl+ '/' +item.icon" mode=""></image>
								</view>
							</view>
						</view>
						<view class="jccontent" v-if="airlist.length != 0">
							<view class="titles">
								空气监测
							</view>
							<view class="botcontent">
								<view class="botcontent_left" v-for="(item,index) in airlist" :key="index" @click="tosjdetail(item,index)">
									<view class="botleft_left">
										<view class="botleftleft_top">
											{{item.name}}
										</view>
										<view class="botleftleft_bot">
											{{item.value || 0}}{{item.unit}}
										</view>
									</view>
									<image :src="baseUrl+ '/' +item.icon" mode=""></image>
								</view>
							</view>
						</view>
						<view class="jccontent" v-if="soillist.length != 0">
							<view class="titles">
								土壤监测
							</view>
							<view class="botcontent">
								<view class="botcontent_left" v-for="(item,index) in soillist" :key="index" @click="tosjdetail(item,index)">
									<view class="botleft_left">
										<view class="botleftleft_top">
											{{item.name}}
										</view>
										<view class="botleftleft_bot">
											{{item.value || 0}}{{item.unit}}
										</view>
									</view>
									<image :src="baseUrl+ '/' +item.icon" mode=""></image>
								</view>
							</view>
						</view>
						<view class="jccontent" v-if="waterlist.length != 0">
							<view class="titles">
								常规五参数
							</view>
							<view class="botcontent">
								<view class="botcontent_left" v-for="(item,index) in waterlist" :key="index" @click="tosjdetail(item,index)">
									<view class="botleft_left">
										<view class="botleftleft_top">
											{{item.name}}
										</view>
										<view class="botleftleft_bot">
											{{item.value || 0}}{{item.unit}}
										</view>
									</view>
									<image :src="baseUrl+ '/' +item.icon" mode=""></image>
								</view>
							</view>
						</view>
						<view class="jccontent" v-if="stinklist.length != 0">
							<view class="titles">
								恶臭监测
							</view>
							<view class="botcontent">
								<view class="botcontent_left" v-for="(item,index) in stinklist" :key="index" @click="tosjdetail(item,index)">
									<view class="botleft_left">
										<view class="botleftleft_top">
											{{item.name}}
										</view>
										<view class="botleftleft_bot">
											{{item.value || 0}}{{item.unit}}
										</view>
									</view>
									<image :src="baseUrl+ '/' +item.icon" mode=""></image>
								</view>
							</view>
						</view>
						<view class="load" v-if="airlist.length == 0 && soillist.length == 0 && waterlist.length == 0&& orientlist.length == 0 && livelist.length == 0&& stinklist.length == 0">
							暂无数据
						</view>
					</view>
				</view>
			</view>
		</view>
		
		</block>
		<view class="pagebot"></view>
	</view>
</template>

<script>
	import api from "@/api/api"
	import configService from '@/common/service/config.service.js';
	export default{
		data(){
			return{
				height:0,
				baseUrl:configService.staticDomainURL,
				scorllheight:0,
				details:{},
				item:{},
				survItemList:[],
				survCamera:[],
				tab:['实时数据','历史数据'],
				tabList:['监测指标','指标值','上报时间'],
				isActive:0,
				wrwlist:uni.getStorageSync('wrwlist'),
				wrwcode:[],
				colorList1:['#22BB8A','#EE701C','#52AC2A','#2BADB9','#D75A28','#AD8F49','#26A3CC','#6C48C7','#22BB8A'],
				colorList:['#22BB8A','#EE701C','#52AC2A','#2BADB9','#D75A28','#AD8F49','#26A3CC','#6C48C7','#22BB8A','#415FBE','#52AC2A','#EE701C'],
				codelist:[],
				list:[],
				token:'',
				dataOu:'',
				dataNh3:'',
				dataH2s:'',
				dataTvoc:'',
				airlist:[],
				soillist:[],
				waterlist:[],
				orientlist:[],
				livelist:[],
				stinklist:[],
			}
		},
		onLoad(options) {
			this.item = JSON.parse(decodeURIComponent(options.item));
			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
				}
			});
		},
		onShow() {
			this.getdetails()
			this.getToken()
		},
		methods:{
			getdetails(){
				let params = {}
				params.stationCode = this.item.stationCode
				uni.showLoading({
					title: '加载中'
				});
				this.$http.get('/applet/survStationInfo/getStationInfo',{params:params}).then(res =>{
					if(res.data.code == 0){
						this.details = res.data.data.stationInfo
						this.airlist = res.data.data.airSurvData
						this.soillist = res.data.data.soilSurvData
						this.waterlist = res.data.data.waterSurvData
						this.orientlist = res.data.data.orientSurvData
						this.livelist = res.data.data.liveSurvData
						this.stinklist = res.data.data.stinkSurvData
						this.survCamera = res.data.data.survCamera
					}
					uni.hideLoading();
				})
			},
			getToken(){
				this.$http.post('/applet/ysyun/getYsToken').then(res =>{
					this.token = res.data.data.ysToken
				})
			},
			tojk(item,index){
				let items = item.deployCode.split('-')
				var obj = {
					url: "https://m.ilhzn.cn/#/pages/cameraView/ysyCamera",
					// url: "https://m.ilhzn.cn/#/pages/cameraView/cameraView",
					deployDes: item.deployDes + '-' + '',
					ysToken: this.token,
					deviceIotUrl: item.deviceUrl
				};
				const queryString = Object.keys(obj).map((key) =>
					`${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join("&");
				const webviewUrl = `/packDetail1/pages/device/index4?${queryString}`;
				uni.navigateTo({
					url: webviewUrl
				});
			},
			changetab(index){
				this.isActive = index
				this.getdetails()
			},
			back(){
				 uni.navigateBack({
					 delta:1
				 })
			},
			tosjdetail(item,index){
				uni.navigateTo({
					url:'/packDetail/pages/Site/sjdetail?item=' + encodeURIComponent(JSON.stringify(item)) + '&stationCode='+this.details.stationCode + '&stationName=' + this.details.stationName
				})
			}
		}
	}
</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%;
	}
	.bgimg{
		width: 100%;
		height: 3550rpx;
	}
	.content{
		padding: 34rpx 32rpx 0;
		box-sizing: border-box;
	}
	.list_item{
		width: 100%;
		padding: 37rpx 34rpx 28rpx;
		background: #FFFFFF;
		border-radius: 34rpx;
		margin-bottom: 25rpx;
		position: relative;
	}
	.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;
		margin-bottom: 31rpx;
	}
	.bot_box{
		width: 30%;
		padding: 0 20rpx;
		box-sizing: border-box;
		border-right: 2rpx solid #e6e9ef;
	}
	.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;
	}
	.state{
		background: #F6F6F6;
		border-top-left-radius: 26rpx;
		border-bottom-left-radius: 26rpx;
		width: 171rpx;
		height: 52rpx;
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #5F7088;
		display: flex;
		align-items: center;
		padding-left: 24rpx;
		box-sizing: border-box;
		position: absolute;
		top: 31rpx;
		right: -32rpx;
	}
	.zt{
		width: 24rpx;
		height: 24rpx;
		margin-left: 18rpx;
	}
	.jstime{
		display: flex;
		margin-bottom: 41rpx;
	}
	.border{
		width: 8rpx;
		background: #0F6EFF;
		border-radius: 4rpx;
		margin-right: 19rpx;
	}
	.border1{
		min-width: 8rpx;
		width: 8rpx;
		background: #0F6EFF;
		border-radius: 4rpx;
		margin-right: 19rpx;
	}
	.jstime_right{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.jstimerig_top{
		font-size: 26rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #142E55;
		margin-bottom: 18rpx;
	}
	.jstimerig_bot{
		font-size: 26rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #566070;
		display: flex;
		flex-wrap: wrap;
	}
	.tag{
		padding: 6rpx 12rpx 6rpx 12rpx;
		box-sizing: border-box;
		border-radius: 6rpx;
		margin-right: 12rpx;
		margin-top: 15rpx;
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	.zdjk{
		width: 100%;
		background: #FFFFFF;
		border-radius: 34rpx;
		padding: 33rpx 0rpx 41rpx 0rpx;
		box-sizing: border-box;
		margin-bottom: 26rpx;
	}
	.zdjk_top{
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #F6F8FB;
		padding: 0 31rpx 31rpx 34rpx;
		box-sizing: border-box;
	}
	.zdjktop_left{
		font-size: 32rpx;
		font-family: Source Han Sans SC;
		font-weight: bold;
		color: #2F3841;
	}
	.zdjktop_right{
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #B3C1D1;
	}
	.number{
		font-size: 34rpx;
		font-family: DIN Next LT Pro;
		font-weight: 500;
		color: #2AC166;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}
	.zdjk_bot{
		padding: 26rpx 33rpx 0 35rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.zdjkbot_left{
		width: 48%;
		border-radius: 16rpx;
	}
	.zdjkbot_left image{
		width: 100%;
		height: 165rpx;
		background: #F4F5F9;
		border-radius: 16rpx;
	}
	.zdjkbot_left1{
		width: 100%;
		height: 349rpx;
		background: #FFFFFF;
		border-radius: 34rpx;
	}
	.zdjkbot_left1 image{
		width: 100%;
		height: 100%;
		background: #F4F5F9;
		border-radius: 34rpx;
	}
	.jczb{
		background: #FFFFFF;
		border-radius: 34rpx;
		padding: 33rpx 32rpx 31rpx 34rpx;
		box-sizing: border-box;
	}
	.jczb_bot{
		padding: 32rpx 0;
		box-sizing: border-box;
	}
	.tab{
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}
	.tab_left{
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 32rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #B0B9C6;
	}
	.tabchaecked{
		color: #0F6EFF;
	}
	.botbordre{
		width: 47rpx;
		height: 6rpx;
		background: #0F6EFF;
		border-radius: 3rpx;
		margin-top: 13rpx;
	}
	.titles{
		width: 100%;
		display: flex;
		justify-content: center;
		font-size: 28rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #77889B;
		margin-bottom: 29rpx;
		margin-top: 20rpx;
	}
	.botcontent{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.botcontent_left{
		width: 48%;
		background: #F8F8F8;
		border-radius: 24rpx;
		padding: 37rpx 20rpx 41rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	.botcontent_left image{
		width: 61rpx;
		height: 61rpx;
	}
	.botleftleft_top{
		font-size: 28rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #333333;
		margin-bottom: 31rpx;
		display: flex;
		align-items: center;
	}
	.botleftleft_top image{
		width: 29rpx;
		height: 26rpx;
		margin-left: 12rpx;
	}
	.botleftleft_bot{
		font-size: 32rpx;
		font-family: DIN Next LT Pro;
		font-weight: 500;
		color: #1FBE5B;
	}
	.botleftleft_botzb{
		color: #FF4242;
	}
	.scroll-Y{
		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: 80rpx;
		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{
		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
	}
	.pagebot{
		height: 36rpx;
	}
	.lssj{
		margin-top: 37rpx;
	}
	.load {
		height: 100%;
		line-height: 737rpx;
		text-align: center;
		color: #c6c6c6;
		font-size: 32rpx;
	}
</style>