<template>
	<div class="full-body">
		<div id="seepageChart" ref="seepageChart" 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 {
				damspgLists: []
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.getDamspgList()
			})
		},
		methods: {
			//渗流曲线图
			getDamspgList() {
				console.log(123);
				let param = {
					appTypeList: [],
					endTime: "",
					id: "",
					mpcd: "",
					periodTime: "",
					rscd: this.rscd,
					startTime: "",
					stcd: this.stcd,
					stlc: "",
					stnm: "",
					sttp: "",
					sttpList: [],
					usfl: ""
				}
				gisMap.damspgList(param, res => {
					if (res.state) {
						this.damspgLists = res.value
						this.$nextTick(() => {
							this.initSeepageChart()
						})
					}
				})
			},
			//渗流
			initSeepageChart() {
				let times = []
				let spqnList = []

				this.damspgLists.forEach(e => {
					times.push(e.mstm.split(' ')[1])
					spqnList.push(e.spqn)
				})
				const seepageChartDom = this.$refs.seepageChart
				this.seepageChart = echarts.init(seepageChartDom)
				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: ['瞬时流量(m³/s)'],
						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: '瞬时流量(m³/s)',
						type: 'line',
						smooth: true,
						areaStyle: {},
						emphasis: {
							focus: 'series',
						},
						data: spqnList,
						itemStyle: {
							color: '#0091ff',
						},
					}, ],
				}
				option && this.seepageChart.setOption(option)
			},
		}
	}
</script>

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