<template>
	<view class="szPageBox">
		<u-navbar
			:title="name"
			titleColor="#ffffff"
			:titleStyle="{ color: '#FFF' }"
			height='70px'
			:autoBack="true"
			bgColor="#007afd"
			leftIconColor="#ffffff"
			:safeAreaInsetTop="false"
		>
		</u-navbar>
		<div style="height: 70px;visibility: hidden;">占位</div>
		<div class="countCard">
			<div class="datetimePicker">
				<span @click="showStm = true">{{this.stmStr}}</span>
				<span style="color: #7f7f7f;font-size: 14px;">至</span>
				<span @click="showEtm = true">{{this.etmStr}}</span>
				<u-icon name="calendar"></u-icon>
			</div>
			<u-button text="搜索" size="normal" class="searchBtn" @click="getData"></u-button>
		</div>
		<u-datetime-picker
				:show="showStm"
				v-model="stm"
				mode="datetime"
				@cancel="showStm = false"
				@confirm="stmConfirm"
		></u-datetime-picker>
		<u-datetime-picker
				:show="showEtm"
				v-model="etm"
				mode="datetime"
				@cancel="showEtm = false"
				@confirm="etmConfirm"
		></u-datetime-picker>
		<div class="countCard2">
			<u-subsection 
			mode="subsection"
			fontSize='12px'
			:list="['数据表', '数据图']" 
			:current="current" 
			@change="index=>current = index"
			class="tabBox"
			></u-subsection>
			<div>
				<view class="container" v-if="current===0">
					<view class="table-header">
						<view class="cell">序号</view>
						<view class="cell" style="flex: 1.8;">时间</view>
						<view class="cell">pH</view>
						<view class="cell">总磷(mg/L)</view>
						<view class="cell">CODcr(mg/L)</view>
						<view class="cell">氨氮(mg/L)</view>
					</view>
					<view class="table-body">
						<view class="row" v-for="(item, index) in tableData" :key="index">
							<view class="cell">{{ index+1 }}</view>
							<view class="cell" style="flex: 1.8;">{{ item.tm2 }}</view>
							<view class="cell">{{ item.ph }}</view>
							<view class="cell">{{ item.p }}</view>
							<view class="cell">{{ item.cod }}</view>
							<view class="cell">{{ item.ad }}</view>
						</view>
					</view>
				</view>
				<div v-if="current===1" style="padding: 10px;">
					<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				id:'水质站',
				name:'水质站',
				current: 0,
				tableData: [],
				chartData:{},
				stm: Number(moment().add(-7,'days')),
				showStm:false,
				etm: Number(moment()),
				showEtm:false,
				opts:{
					dataLabel: false,
					dataPointShape: false,
					enableScroll: false,
					padding: [10,15,20,5],
					xAxis: {
					  fontSize:12,
					  labelCount: 5,
					  // itemCount: 10,
					  boundaryGap:'justify',
					  marginTop:5,
					},
				},
				opt:{
					categories: [],
					series: [
					  {
						name: "pH",
						data: []
					  },
					  {
						name: "总磷",
						data: []
					  },
					  {
						name: "COD",
						data: []
					  },
					  {
						name: "氨氮",
						data: []
					  }
					]
				}
			}
		},
		computed: {
			stmStr() {
				return moment(this.stm).format('YYYY-MM-DD HH:mm')
			},
			etmStr() {
				return moment(this.etm).format('YYYY-MM-DD HH:mm')
			},
		},
		onLoad(options) {
		    // options 中包含传递过来的参数
		    this.id = options.id;
		    this.name = options.name;
			this.getData()
		},
		mounted() { 
		},
		methods: {
			stmConfirm(value){
				this.showStm = false
				this.stm = value
			},
			etmConfirm(value){
				this.showEtm = false
				this.etm = value
			},
			sectionChange(index){
			},
			getData(){
				const params = {
					startTime:moment(this.stm).format('YYYY-MM-DD HH:mm:00'),
					endTime:moment(this.etm).format('YYYY-MM-DD HH:mm:00'),
					mn:this.id
				}
				console.log(1111111100000000)
				console.log(params)
				uni.request(
				{
				  url: 'http://ywxj.cloudowr.cn/yjt/wq/list',
				  method: 'POST',
				  data: {
						...params
				  },
				  success: (res) => {
					if(res.data.code!==200){
						this.chartData = this.opt
						this.tableData = []
						return
					}					
					  const list = res?.data?.data?.map((item,index)=>{
						  return {
							  ...item,
							  tm2:item.tm?.slice(5,16)
						  }
					  })
					  const sorted = (res?.data?.data || []).slice().sort((a,b)=>moment(a.tm).valueOf()-moment(b.tm).valueOf())
					  const tmArr = sorted.map(item=>item.tm?.slice(5,10))
					  const phs = sorted.map(item=>item.ph)
					  const ps = sorted.map(item=>item.p)
					  const cods = sorted.map(item=>item.cod)
					  const ads = sorted.map(item=>item.ad)
					  let options = {
					  	    categories: tmArr,
					  	    series: [
					  	      {
					  	        name: "pH",
					  	        data: phs
					  	      },
					  	      {
					  	        name: "总磷",
					  	        data: ps
					  	      },
					  		  {
					  		    name: "CODcr",
					  		    data: cods
					  		  },
					  		  {
					  		    name: "氨氮",
					  		    data: ads
					  		  }
					  	    ]
					  };
					  this.chartData = JSON.parse(JSON.stringify(options));
					  this.tableData = list
				  },
				  fail: (err) => {
					  this.chartData = this.opt
					  this.tableData = []
				    console.log('失败:', err);
				  }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.szPageBox{
	width: 100%;
	height: 100vh;
	background: #f6f6f6;
}
.countCard{
	padding: 10px 0;
	background: #ffffff;
	border-bottom: 1px solid #eee;
	display: flex;
	justify-content: space-around;
	align-items:center
}
.countCard2{
	padding: 10px 0;
	height: calc( 100vh - 151px );
	overflow: hidden;
	background: #ffffff;
}
.datetimePicker{
	width: 80%;
	margin-left: 10px;
	height: 30px;
	border: 1px solid #eee;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.searchBtn{
	width: 20%;
	border: 0;
	margin: 0 5px;
	color: #208fee;
}
.tabBox{
	width: 120px;
	height: 26px;
	margin-left: 10px;
	margin-bottom: 10px;
}
.container {
	margin: 0 5px;
	border: 1px solid #eee;
}
.table-header, .row {
	display: flex;
	border-bottom: 1px solid #eee;
}
.table-header .cell {
	font-weight: 400;
	background-color: #e5f3fe;
	color: #208fee;
	display: flex;
	align-items: center;
	justify-content: center;
}
.row:nth-child(even) {
	background-color: #fafafa;
}
.cell {
	flex: 1;
	padding: 24rpx 10rpx;
	text-align: center;
	font-size: 10px;
	font-weight: 400;
	word-break: break-all;
	box-sizing: border-box;
	border-right: 1px solid #eee;
}
.cell:last-child {
	border-right: none;
}
.table-body{
	height: calc( 100vh - 237px);
	overflow-y: scroll;
}
</style>
