<!--取水监测-->
<template>
    <div class="infoWindow-model">
        <div class="model-title">{{ currentPoint.stnm }}</div>
        <div class="section-container">
            <div id="rainChart" class="full"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import gisMap from '@/api/frontScreen/gisMap.js'
export default {
    name: 'WaterIntakeModel',
    props: {
        currentPoint: {
            type: Object,
            default: () => {
                return {}
            },
        },
    },
    data() {
        return {
            rainChart: null, //雨情
			sflows:[],
			times:[],
			params:{
					id: "",
					monitorLevelList: [],
					stcd: "",
					stnm: "",
					waterCode: "",
					waterName: "",
					waterPurposeList: [],
					waterSourceList: [],
					waterTypeList: []
			}
        }
    },
    inject: ['mapData'],
    created() {
        let mapData = this.mapData()
        this.T = mapData.T
        this.map = mapData.map
    },
    mounted() {
    },
	watch: {
	  currentPoint: {
	    handler() {
	      this.$nextTick(() => {
			this.params.stcd=this.currentPoint.stcd
	        this.getWaterPaperList()
	      })
	    }
	  }
	},
    updated() {
        this.rainChart.resize()
    },
    beforeDestroy() {},
    methods: {
		getWaterPaperList(){
			this.times=[]
			this.sflows=[]
			gisMap.waterDataList(this.params,res=>{
				if(res.state){
					res.value.forEach(e=>{
						this.times.push(e.tm.split(' ')[1])
						this.sflows.push(e.sflow)
					})
					this.$nextTick(()=>{
						this.initCharts()
					})
				}
			})
		},
        initCharts() {
            this.initRainChart()
        },
        initRainChart() {
            const rainChartDom = document.getElementById('rainChart')
            this.rainChart = echarts.init(rainChartDom)
            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³)'],
                    textStyle: {
                        color: '#adb9ba',
                        fontSize: 10,
                    },
                },
                grid: {
                    top: '4%',
                    left: '4%',
                    right: '4%',
                    bottom: '16%',
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: this.times,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
						 scale:true
                    },
                ],
                series: [
                    {
                        name: '实际取水量(万m³)',
                        type: 'line',
                        smooth: true,
                        areaStyle: {},
                        emphasis: {
                            focus: 'series',
                        },
                        data: this.sflows,
                        itemStyle: {
                            color: '#6767ff',
                        },
                    },
                ],
            }
            option && this.rainChart.setOption(option)
        },
    },
}
</script>

<style lang="scss" scoped>
@import './../../../css/model.scss';


</style>