<template>
	<div class="full-body">
		<!-- <div id="seepageChart" ref="seepageChart" class="full full-body" ></div> -->
		<div id="pressureChart" class="full"></div>
	</div>
</template>

<script>
import * as echarts from 'echarts'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import gisMap from '@/api/frontScreen/gisMap.js'
	export default{
		props: {
		    rscd: {
		        type: String,
		    },
			stcd: {
			    type: String,
			},
			name: {
			    type: String,
			},
		},
		data(){
			return{
				damspprLists:[]
			}
		},
		mounted() {
			this.$nextTick(()=>{
					this.getDamspprList()
			})
		},
		watch: {
			stcd: {
				handler(newVal) {
					this.getDamspprList()
				},
			}
		},
		methods:{
			//渗压监测
			getDamspprList() {
				let param = {
					startTime: "",
					endTime: "",
					mpcd: this.stcd,
					rscd: this.rscd,
					mptp: "4"
				}
				gisMap.getDamspprList(param, res => {
					if (res.state) {
						this.damspprLists=res.value
						this.$nextTick(()=>{
							this.initPressureChart()
						})
					}
				})
			},
			initPressureChart() {
				let times = []
				let pztbwls = []
				let jpztbwls = []
				let dpztbwls = []
				this.damspprLists.forEach(e => {
					pztbwls.push(e.pztbwl)
					jpztbwls.push(e.jpztbwl)
					dpztbwls.push(e.dpztbwl)
					times.push(e.mstm)
					// spprwlList.push(e.spprwl)
				})
				
				const pressureChartDom = document.getElementById('pressureChart')
				this.pressureChart = echarts.init(pressureChartDom)
				let option = {
					tooltip: {
						appendToBody: true,
						trigger: 'axis',
						backgroundColor: 'rgba(0,0,0,0.7)',
						textStyle: {
							color: '#dddee0',
						},
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985',
							},
						},
					},
					legend: {
						bottom: 0,
						right: 0,
						data: ['测压管危险水位', '测压管警戒水位', '测压管水位'],
						textStyle: {
							color: '#adb9ba',
							fontSize: 10,
						},
					},
					grid: {
						top: '4%',
						left: '4%',
						right: '4%',
						bottom: '16%',
						containLabel: true,
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: times,
					}, ],
					yAxis: [{
						type: 'value',
					}, ],
					series: [{
								name: '测压管危险水位',
								type: 'line',
								smooth: true,
								emphasis: {
									focus: 'series',
								},
								data: dpztbwls,
								itemStyle: {
									normal: {
										color: '#b22222',
										lineStyle: {
											color: '#b22222'
										}
									}
								},
							},
							{
								name: '测压管警戒水位',
								type: 'line',
								smooth: true,
								emphasis: {
									focus: 'series',
								},
								data: jpztbwls,
								itemStyle: {
							 	normal: {
										color: '#ff6347',
										lineStyle: {
											color: '#ff6347'
										}
									}
								},
							},
							{
								name: '测压管水位',
								type: 'line',
								smooth: true,
								emphasis: {
									focus: 'series',
								},
								data: pztbwls,
								itemStyle: {
									color: '#6767ff',
								},
							},
						],
					}
				option && this.pressureChart.setOption(option)
			},
		}
	}
</script>

<style scoped>
	.full-body{
	    height: calc(100% - 40PX);
	}
</style>