<!--实时雨情-->
<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: 'RealTimeRainModel',
    props: {
        currentPoint: {
            type: Object,
            default: () => {
                return {}
            },
        },
		times: {
		    type: Array,
		    default: () => {
		        return {}
		    },
		},
		frameTime: {
		    type: String,
		    default: () => {
		        return {}
		    },
		},
    },
    data() {
        return {
            params:{
                stcd:null,
				tmOrderAsc:true
            },
            timeList:[],
            rainChart: null, //雨情
            rainList:[],
			waterHistoryLists:[]
        }
    },
    inject: ['mapData'],
    created() {
        let mapData = this.mapData()
        this.districtData = this.originData
        this.T = mapData.T
        this.map = mapData.map
    },
    watch: {
	    currentPoint: {
	        handler(newVal) {
				this.getFindResList()
	        },
	    }
	},
    mounted() {
        this.$nextTick(() => {
            // this.initCharts()
            
        })
    },
    updated() {
        // this.rainChart.resize()
    },
    beforeDestroy() {},
    methods: {
        getFindResList(){
			if(this.times.length>0){
				this.params.startTime=this.times[0]
				this.params.endTime=this.times[1]
			}else{
				this.params.startTime=""
				this.params.endTime=""
			}
			this.params.stcd=this.currentPoint.stcd
			this.params.tm=this.currentPoint.tm
			gisMap.pptnLatestList(this.params,res=>{
				if(res.state){
					this.waterHistoryLists=res.value
                   this.$nextTick(()=>{
					   this.initRainChart()
				   })
					
				}
			})
		},
        initCharts() {
            this.initRainChart()
        },
        initRainChart() {
			let rainList = []
			let timeList = []
			let alertList=[]//警戒
			let dangerList=[]//危险
			 this.waterHistoryLists.forEach(e=>{
                let alter = {}, danger={}
                e.thresholdData.forEach(item=>{
                    if(item.gradeCode == 1){ //警戒
                        alter = item
                    }else if(item.gradeCode == 2){ //危险
                        danger = item
                    }
                })
			    timeList.push(e.tm)
				switch (this.frameTime){
					case 'drp':
					rainList.push(e.drp)
					break;
					case 'pn10':
					rainList.push(e.pn10)
					break;
					case 'pn30':
					rainList.push(e.pn30)
					break;
					case 'p1':
					rainList.push(e.p1)
					dangerList.push(danger.yjz)
                    alertList.push(alter.yjz)
					break;
					case 'p3':
					rainList.push(e.p3)
					dangerList.push(danger.shhjz)
                    alertList.push(alter.shhjz)
					break;
					case 'p6':
					rainList.push(e.p6)
					dangerList.push(danger.lhjz)
                    alertList.push(alter.lhjz)
					break;
					case 'p12':
					rainList.push(e.p12)
					dangerList.push(danger.sejz)
                    alertList.push(alter.sejz)
					break;
					case 'p24':
					rainList.push(e.p24)
                    dangerList.push(danger.esjz)
					alertList.push(alter.esjz)
					
					break;
					case 'dyp':
					rainList.push(e.dyp)
					break;
				}
			
			})
			console.log(alertList);
			console.log(dangerList);
            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: ['雨量(mm)','危险阈值','警戒阈值'],
                    textStyle: {
                        color: '#adb9ba',
                        fontSize: 10,
                    },
                },
                grid: {
                    top: '4%',
                    left: '4%',
                    right: '4%',
                    bottom: '16%',
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: timeList,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
						 scale:true
                    },
                ],
                series: [
                    {
                        name: '雨量(mm)',
                        type: 'line',
                        // smooth: true,
                        // areaStyle: {},
                        // emphasis: {
                        //     focus: 'series',
                        // },
                        data:rainList,
                        itemStyle: {
                            color: '#6767ff',
                        },
                    },
					{
					    name: '危险阈值',
					    type: 'line',
					    data: dangerList,
					    itemStyle: {
					        color: 'red',
					    },
					},
					{
					    name: '警戒阈值',
					    type: 'line',
					    data: alertList,
					    itemStyle: {
					        color: 'yellow',
					    },
					},
                ],
            }
            option && this.rainChart.setOption(option)
        },
    },
}
</script>

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


</style>