<!--实时水情-->
<template>
  <div class="infoWindow-model">
    <div class="model-title">{{ currentPoint.stnm }}-水位图</div>
    <div class="section-container">
      <div id="waterChart"
           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 {}
      }
    }
  },
  data () {
    return {
      timeList: [],
      jzList: [],
      bzList: [],
      fhList: [],
      zgList: [],
      zzList: [],
      dsfllvList: [],
      chfllvList: [],
      nrstlvList: [],
      qList: [],
      sttp: null,
      params: {
        stcd: null
      },
      waterChart: null, //雨情
      option2: {},
      option3: {}
    }
  },
  inject: ['mapData'],
  created () {
    let mapData = this.mapData()
    this.districtData = this.originData
    this.T = mapData.T
    this.map = mapData.map
  },

  mounted () {
  },
  watch: {
    currentPoint: {
      handler () {
        this.$nextTick(() => {
          this.getFindResList()
        })
        // this.initwaterChart()
      }
    }
  },
  updated () {

  },
  beforeDestroy () { },
  methods: {
    getFindResList () {
      this.params.stcd = this.currentPoint.stcd
      this.sttp = this.currentPoint.sttp
      if (this.sttp == 'ZZ'||this.sttp == 'ZQ') {
        gisMap.waterRegimehd(this.params, res => {
          if (res.state) {
            this.timeList = []
            this.jzList = []
            this.bzList = []
            this.fhList = []
            this.zgList = []
            this.zzList = []
            res.value.forEach(e => {
              this.timeList.push(e.tm)
              this.jzList.push(e.jz)
              this.bzList.push(e.bz)
              this.fhList.push(e.fh)
              this.zgList.push(e.zg)
              this.zzList.push(e.zz)
            })
            this.$nextTick(() => {
              this.initwaterChart()
            });

          }
        })
      }
      if (this.sttp == 'SS') {
        gisMap.waterRegimehd(this.params, res => {
          if (res.state) {
            this.timeList = []
            this.zzList = []
            this.qList = []
            res.value.forEach(e => {
              this.timeList.push(e.tm)
              this.zzList.push(e.zz)
              this.qList.push(e.q)
            })
            this.$nextTick(() => {
              this.initwaterChart()
            });

          }
        })
      }
      if (this.sttp == "RR") {
        this.params.rscd = this.currentPoint.rscd
        gisMap.waterRegimesk(this.params, res => {
          if (res.state) {
            this.timeList = []
            this.zzList = []
            this.nrstlvList = []
            this.dsfllvList = []
            this.chfllvList = []
            res.value.forEach(e => {
              this.timeList.push(e.tm)
              this.zzList.push(e.zz)
              this.nrstlvList.push(e.nrstlv)
              this.dsfllvList.push(e.dsfllv)
              this.chfllvList.push(e.chfllv)
            })
            this.$nextTick(() => {
              this.initwaterChart()
            });
          }
        })
      }

    },
    initwaterChart () {
      if (this.waterChart) {
        this.waterChart.dispose();
      }
      const waterChartDom = document.getElementById('waterChart')
      this.waterChart = echarts.init(waterChartDom)
      this.option2 = {
        tooltip: {
          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: '15%',
          left: '6%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.timeList
          }
        ],
        yAxis: [
          {
            name: '单位:m',
            type: 'value',
			 scale:true
          }
        ],
        series: [
          {
            name: '警戒线',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: this.jzList
          },
          {
            name: '保证线',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: this.bzList
          },
          {
            name: '防洪线',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: this.fhList
          },
          {
            name: '最高洪水线',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: this.zgList
          },
          {
            name: this.sttp == 'SS' ? '流量' : '实时水位线',
            type: 'line',
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.zzList,
            itemStyle: {
              color: '#0091ff'
            }
          }
        ]
      }
      this.option4 = {
        tooltip: {
          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: '15%',
          left: '6%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.timeList
          }
        ],
        yAxis: [
          {
            name: '单位:m',
            type: 'value',
			 scale:true
          }
        ],
        series: [
          {
            name: '警戒水位',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: this.nrstlvList,
            itemStyle: {
              normal: {
                color: 'yellow',
                lineStyle: {
                  color: 'yellow'
                }
              }
            },
          },
          {
            name: '设计洪水位',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: this.dsfllvList,
            itemStyle: {
              normal: {
                color: '#ff6347',
                lineStyle: {
                  color: '#ff6347'
                }
              }
            },
          },
          {
            name: '校核洪水位',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: this.chfllvList,
            itemStyle: {
              normal: {
                color: '#b22222',
                lineStyle: {
                  color: '#b22222'
                }
              }
            },
          },
          {
            name: '当前水位',
            type: 'line',
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.zzList,
            itemStyle: {
              color: '#0091ff'
            }
          }
        ]
      }
      this.option3 = {
        tooltip: {
          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: '15%',
          left: '2%',
          right: '4%',
          bottom: '16%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['', '']
          }
        ],
        yAxis: [
          {
            name: '单位:m',
            type: 'value',
			 scale:true
          }
        ],
        series: [
          {
            name: '汛限水位',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: [96, 96],
            itemStyle: {
              color: '#fb5430'
            }
          },
          {
            name: '实时水位线',
            type: 'line',
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [20, 20],
            itemStyle: {
              color: '#0091ff'
            }
          }
        ]
      }
      this.option5 = {
        tooltip: {
          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: '15%',
          left: '6%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.timeList
          }
        ],
        yAxis: [
          {
            name: '单位:m',
            type: 'value',
			 scale:true
          }
        ],
        series: [
          {
            name: '保证水位',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: this.bzList,
            itemStyle: {
              normal: {
                color: 'yellow',
                lineStyle: {
                  color: 'yellow'
                }
              }
            },
          },
          {
            name: '警戒水位',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: this.jzList,
            itemStyle: {
              normal: {
                color: '#b22222',
                lineStyle: {
                  color: '#b22222'
                }
              }
            },
          },

          {
            name: '当前水位',
            type: 'line',
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.zzList,
            itemStyle: {
              color: '#0091ff'
            }
          }
        ]
      }
      this.option6 = {
        tooltip: {
          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: '15%',
          // left: '4%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.timeList
          }
        ],
        yAxis: [
          {
            name: '单位:m',
            type: 'value',
			 scale:true
          }
        ],
        series: [
          {
            name: '流量',
            type: 'line',
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.qList,
            itemStyle: {
              color: 'green'
            }
          },
          {
            name: '当前水位',
            type: 'line',
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.zzList,
            itemStyle: {
              color: '#0091ff'
            }
          }
        ]
      }
      let option
      console.log(this.currentPoint.sttp);
      if (this.currentPoint.sttp == 2) {
        option = this.option3
      } else if (this.currentPoint.sttp == 'RR') {
        option = this.option4
      } else if (this.currentPoint.sttp == 'ZZ'||this.currentPoint.sttp == 'ZQ') {
        option = this.option5
      } else if (this.currentPoint.sttp == 'SS') {
        option = this.option6
      } else {
        option = this.option2
      }
      option && this.waterChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
@import './../../../css/model.scss';
.section-container {
  width: 450px;
}
</style>