<template>
	<view class="container">
		<uni-nav-bar :fixed="true" left-icon="left" background-color="#0F6EFF" @clickLeft="back()" status-bar :title="item.stationName"/>
		<view class="liebiaos">
			<view class="list_item">
				<view class="list_item_top">
					<view class="list_item_left">
						<image v-if="item.deviceInfo.deviceIcon" :src="baseUrl + '/applet/common/static/' + item.deviceInfo.deviceIcon" mode=""></image>
						<view class="item_right">
							<view class="right_top" v-if="item.deviceInfo.deviceName">
								{{item.deviceInfo.deviceName}}
							</view>
							<view class="right_bot">
								<image src="../../static/shebei_icon_zhibiao.png" mode=""></image>
								<view class="">监测指标：{{survItem.length || 0}} 项</view>
							</view>
						</view>
					</view>
					<view class="state">
						<view class="" v-if="item.isOnline == 1">
							在线
						</view>
						<view class="" v-else>
							离线
						</view>
						<image v-if="item.isOnline == 1" src="../../static/zhandian_icon_zaixian .png" mode="" class="zt"></image>
						<image v-else src="../../static/zhandian_icon_lixian.png" mode="" class="zt"></image>
					</view>
				</view>
				<view class="list_item_bot">
					<view class="bots_item" v-if="item.deviceInfo.deviceManufacturer">
						<image src="../../static/shebei_icon_pinpai.png" mode=""></image>
						<view class="pp">
							设备品牌:
						</view>
						<view class="mz">
							{{item.deviceInfo.deviceManufacturer}}
						</view>
					</view>
					<view class="bots_item" style="margin-top: 34rpx;" v-if="item.deviceInfo.deviceModel">
						<image src="../../static/shebei_icon_xinghao.png" mode=""></image>
						<view class="pp">
							设备型号:
						</view>
						<view class="mz">
							{{item.deviceInfo.deviceModel}}
						</view>
					</view>
					<view class="bots_item" style="margin-top: 34rpx;" v-if="survItem.length != 0">
						<!-- <view style="display: flex;align-items: center;height: 34rpx;">
							<image src="../../static/shebei_icon_jiancezhibiao.png" mode=""></image>
							<view class="pp">
								监测指标:
							</view>
						</view> -->
						<view class="jstimerig_bot">
							<view style="display: flex;align-items: center;height: 34rpx;">
								<image src="../../static/shebei_icon_jiancezhibiao.png" mode=""></image>
								<view class="pp">
									监测指标:
								</view>
							</view>
							<view class="tag-view" v-for="(item,index) in survItem" :key="index">
								<view :style="{background:item.color}" class="tag">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="sssjjc">
				<view class="sssjjc_left">
					实时数据监测
				</view>
				<view class="topnum">
					累计 <span class="number">{{list.length}}</span>条
				</view>
			</view>
			<view class="scrolllist">
				<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">
					<block v-if="list.length != 0">
						<view class="lists_item" v-for="(item,index) in list" :key="index">
							<view class="jczbs">
								{{item.name}}
							</view>
							<view class="zbz">
								{{item.value || 0}}{{item.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">
								{{item.dataDateTime}}
							</view>
						</view>
						<view class="zwgd" style="width: 100%;height: 100rpx; line-height: 100rpx;text-align: center;color: #c6c6c6;">
							暂无更多数据
						</view>
					</block>
					<view class="load" v-else>
						暂无数据
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/api/api"
	import configService from '@/common/service/config.service.js';
	export default{
		data(){
			return{
				item:{},
				baseUrl:configService.apiUrl,
				tabList:['监测指标','指标值','上报时间'],
				colorList:['#22BB8A','#EE701C','#52AC2A','#2BADB9','#D75A28','#AD8F49','#26A3CC','#6C48C7','#22BB8A','#415FBE','#52AC2A','#EE701C'],
				list:[],
				deployCode:'',
				survItem:[]
			}
		},
		onLoad(options) {
			console.log(JSON.parse(decodeURIComponent(options.item)))
			this.item = JSON.parse(decodeURIComponent(options.item));
		},
		onShow() {
			this.getsssj()
		},
		methods:{
			getsssj(){
				let params = {}
				params.deployCode = this.item.deployCode
				this.$http.get('/applet/wxclient/getSurvDataByDevice',{params:params}).then(res=>{
					this.list = res.data.data.dataList
					this.survItem = res.data.data.zhibiao
					for(var i=0;i<this.list.length;i++){
						this.list[i].value = (Math.floor(this.list[i].value * 100) / 100).toFixed(2)
					}
				})
			},
			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%;
	}
	.liebiaos{
		padding: 28rpx 32rpx;
	}
	.list_item{
		width: 100%;
		padding: 37rpx 34rpx 28rpx;
		background: #FFFFFF;
		border-radius: 34rpx;
		margin-bottom: 42rpx;
		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: 64rpx;
	}
	.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;
	}
	.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;
	}
	.bots_item{
		display: flex;
		align-items: center;
	}
	.bots_item image{
		width: 24rpx;
		height: 24rpx;
		margin-right: 12rpx;
	}
	.pp{
		font-size: 26rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #142E55;
		margin-right: 38rpx;
		min-width: 112rpx;
	}
	.mz{
		font-size: 26rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #566070;
	}
	.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;
		border-radius: 6rpx;
		margin-right: 12rpx;
		margin-bottom: 15rpx;
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	.tag:nth-child(4n){
		margin-right: 0;
	}
	.sssjjc{
		padding: 0 31rpx 26rpx 34rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.topnum{
		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;
	}
	.sssjjc_left{
		font-size: 32rpx;
		font-family: Source Han Sans SC;
		font-weight: bold;
		color: #2F3841;
	}
	.scrolllist{
		width: 100%;
		// height: 1095rpx;
		background: #FFFFFF;
		border-radius: 34rpx;
		padding: 35rpx 0rpx 37rpx 0rpx;
	}
	.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
	}
	.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;
	}
	.load {
		height: 100%;
		line-height: 550rpx;
		text-align: center;
		color: #c6c6c6;
		font-size: 32rpx;
	}
</style>