<!--实时工情-->
<template>
  <div class="infoWindow-model">
    <div class="model-title">{{ stationType==1?currentPoint.stnm:stationType==4?currentPoint.mpnm:'' }}</div>
   <div class="section-container">
      <div id="chart"
           class="full"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import gisMap from '@/api/frontScreen/gisMap.js'
export default {
  name: 'RealTimeEngineerModel',
  props: {
    currentPoint: {
      type: Object,
      default: () => {
        return {}
      },
    },
    stationType: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      chart: null, //
      seepageOption: null, //渗流监测
      shiftOption: null, //位移监测
      pressureOption1: null, //渗流压力监测
      pressureOption2: null, //渗压管压力监测
      dammvLists: [], //位移测报数据
      xrds: [], //x向值
      yrds: [], //y向值
      zrds: [], //垂直向值	
      damspgLists: [], //渗流测报数据
      spqns: [], //流量
      damspprLists: [], //渗压测报数据
      spprwls: [], //渗流压力水位（m）
      damspprListes: [], //渗压管监测数据
      dpztbwls: [], //测压管危险水位
      jpztbwls: [], //测压管警戒水位
      pztbwls: [], //测压管水位
      times1: [],
      times2: [],
      times3: [],
      times4: [],
      params: {
        appTypeList: [],
        endTime: "",
        id: "",
        mpcd: "",
        periodTime: "",
        rscd: "",
        startTime: "",
        stcd: "",
        stlc: "",
        stnm: "",
        sttp: "",
        sttpList: [],
        usfl: "",
        warnGrade: ""
      },

    }
  },
  inject: ['mapData'],
  created () {
    let mapData = this.mapData()
    this.T = mapData.T
    this.map = mapData.map
    this.params.stcd = this.currentPoint.stcd
  },
  mounted () {
    // this.$nextTick(() => {
    //   this.initOption()
    //   this.initChart()
    // })
	this.$root.$on('resize', () => {
	  this.resize(500)
	})
  },
  updated () {
    // let option
    // if (this.stationType == 1) {
    // 	option = this.shiftOption
    // } else if (this.stationType == 2) {
    // 	option = this.seepageOption
    // } else if (this.stationType == 3) {
    // 	option = this.pressureOption1
    // } else if (this.stationType == 4) {
    // 	option = this.pressureOption2
    // }
    // if (this.chart) this.chart.clear()
    // option && this.chart.setOption(option)
    // if (this.chart) this.chart.resize()
  },
  watch: {
    stationType: {
      handler: function (newVal) {
        console.log(this.stationType);
        // let option
        // if (newVal == 1) {
        // 	option = this.shiftOption
        // } else if (newVal == 2) {
        // 	option = this.seepageOption
        // } else if (newVal == 3) {
        // 	option = this.pressureOption1
        // } else if (newVal == 4) {
        // 	option = this.pressureOption2
        // }
        // if (this.chart) this.chart.clear()
        // option && this.chart.setOption(option)
        // if (this.chart) this.chart.resize()
      },
    },
    currentPoint: {
      handler (newVal) {
        let option
        if (this.stationType == 1) {
          this.getDammvData()
          // option = this.shiftOption
          // this.initChart()
        } else if (this.stationType == 2) {
          this.getDamspgData()
          option = this.seepageOption
          // this.initChart()
        } else if (this.stationType == 3) {
          this.getDamspprData()
          option = this.pressureOption1
          // this.initChart()
        } else if (this.stationType == 4) {
          this.getDamspprList()
        }
      },
    }
  },
  beforeDestroy () {
    console.log('xiaohui')
  },
  methods: {
	  resize (delay) {
	    // 动态计算表格的高度，自适应当前容器
	    setTimeout(() => {
	      this.chart.resize()
	    }, delay || 0)
	  },
    getDamspprList () {
      this.pztbwls = []
      this.jpztbwls = []
      this.dpztbwls = []
      this.times4 = []
      let param = {
        startTime: "",
        endTime: "",
        mpcd: this.currentPoint.mpcd,
        rscd: this.currentPoint.rscd,
        mptp: "4",
        tmOrderAsc: true
      }
      gisMap.getDamspprList(param, res => {
        if (res.state) {
          this.damspprListes = res.value
          this.damspprListes.forEach(e => {
            this.pztbwls.push(e.pztbwl)
            this.jpztbwls.push(e.jpztbwl)
            this.dpztbwls.push(e.dpztbwl)
            this.times4.push(e.mstm)
          })
          this.$nextTick(() => {
            this.initOption()
          })
        }
        console.log(this.times4);
      })
    },
    getDammvData () {
		this.params.rscd=this.currentPoint.rscd
		this.params.stcd=this.currentPoint.stcd
		this.xrds=[]
		this.yrds=[]
		this.zrds=[]
		this.times1=[]
		this.params.tmOrderAsc=true
      gisMap.dammvData(this.params, res => {
        if (res.state) {
          this.dammvLists = res.value
          this.dammvLists.forEach(e => {
            this.xrds.push(e.dx)
            this.yrds.push(e.dy)
            this.zrds.push(e.dz)
            this.times1.push(e.tm)
          })
		  this.$nextTick(() => {
		    this.initOption()
		  })
        }
      })
    },
    getDamspgData () {
		this.spqns=[]
		this.times2=[]
      gisMap.damspgData(this.params, res => {
        if (res.state) {
          this.damspgLists = res.value
          this.damspgLists.forEach(e => {
            this.spqns.push(e.spqn)
            this.times2.push(e.tm.split(" ")[1])
          })
        }
      })
    },
    getDamspprData () {
		this.spprwls=[]
		this.times3	=[]
      gisMap.damspprData(this.params, res => {
        if (res.state) {
          this.damspprLists = res.value
          this.damspprLists.forEach(e => {
            this.spprwls.push(e.spprwl)
            this.times3.push(e.tm.split(" ")[1])
          })
        }
      })
    },
    //渗流监测
    initChart () {
      const dom = document.getElementById('chart')
      this.chart = echarts.init(dom)
      let option = this.seepageOption
	  console.log(option);
      this.chart.setOption(option)
    },
    initOption () {
      const dom = document.getElementById('chart')
      this.chart = echarts.init(dom)
      //位移
      this.shiftOption = {
        title: {
          text: '今日位移',
          left: 'center',
          top: 'top',
          textStyle: {
            color: '#ddd',
            fontSize: '14',
            fontWeight: 700,
          },
        },
        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: ['x方向位移(mm)', 'y方向位移(mm)', 'z方向位移(mm)'],
          textStyle: {
            color: '#adb9ba',
            fontSize: 10,
          },
        },
        grid: {
          top: '20%',
          left: '4%',
          right: '4%',
          bottom: '16%',
          containLabel: true,
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: this.times1,
        },],
        yAxis: [{
          type: 'value',
		   scale:true
        },],
        series: [{
          name: 'x方向位移(mm)',
          type: 'line',
          smooth: true,
          emphasis: {
            focus: 'series',
          },
          data: this.xrds,
          itemStyle: {
            color: '#ff9a00',
          },
        },
        {
          name: 'y方向位移(mm)',
          type: 'line',
          smooth: true,
          emphasis: {
            focus: 'series',
          },
          data: this.yrds,
          itemStyle: {
            color: '#6767ff',
          },
        },
        {
          name: 'z方向位移(mm)',
          type: 'line',
          smooth: true,
          emphasis: {
            focus: 'series',
          },
          data: this.zrds,
          itemStyle: {
            color: '#91cc75',
          },
        },
        ],
      }

      //渗流
      this.seepageOption = {
        title: {
          text: '今日渗流',
          left: 'center',
          top: 'top',
          textStyle: {
            color: '#ddd',
            fontSize: '14',
            fontWeight: 700,
          },
        },
        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: '20%',
          left: '4%',
          right: '4%',
          bottom: '12%',
          containLabel: true,
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: this.times2,
        },],
        yAxis: [{
          name: '瞬时流量(m³/s)',
          type: 'value',
		   scale:true
        },],
        series: [{
          name: '瞬时流量(m³/s)',
          type: 'line',
          smooth: true,
          areaStyle: {},
          emphasis: {
            focus: 'series',
          },
          data: this.spqns,
          itemStyle: {
            color: '#0091ff',
          },
        },

        ],
      }

      // 渗流压力
      this.pressureOption1 = {
        title: {
          text: '今日渗流压力',
          left: 'center',
          top: 'top',
          textStyle: {
            color: '#ddd',
            fontSize: '14',
            fontWeight: 700,
          },
        },
        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: '20%',
          left: '4%',
          right: '4%',
          bottom: '16%',
          containLabel: true,
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: this.times3,
        },],
        yAxis: [{
          name: '渗流压力',
          type: 'value',
		   scale:true
        },
        {
          name: '温度(℃)',
          nameLocation: 'start',
          alignTicks: true,
          type: 'value',
          inverse: true,
        },
        ],
        series: [{
          name: '渗流压力',
          type: 'line',
          smooth: true,
          emphasis: {
            focus: 'series',
          },
          areaStyle: {},
          data: this.spprwls,
          itemStyle: {
            color: '#6767ff',
          },
        },
          // {
          // 	name: '温度(℃)',
          // 	type: 'line',
          // 	smooth: true,
          // 	yAxisIndex: 1,
          // 	emphasis: {
          // 		focus: 'series',
          // 	},
          // 	data: [23, 23.2, 23.8, 23.4, 22.28, 24.2, 23.6, 23.4],
          // 	itemStyle: {
          // 		color: '#ff9a00',
          // 	},
          // },
        ],
      }

      // 渗压管压力
      this.pressureOption2 = {
        title: {
          text: '渗压管压力',
          left: 'center',
          top: 'top',
          textStyle: {
            color: '#ddd',
            fontSize: '14',
            fontWeight: 700,
          },
        },
        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: '20%',
          left: '4%',
          right: '4%',
          bottom: '16%',
          containLabel: true,
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: this.times4,
        },],
        yAxis: [{
          type: 'value',
		   scale:true
        },],
        series: [{
          name: '测压管警戒水位',
          type: 'line',
          smooth: true,
          emphasis: {
            focus: 'series',
          },
          data: this.jpztbwls,
          itemStyle: {
            normal: {
              color: 'yellow',
              lineStyle: {
                color: 'yellow'
              }
            }
          },
        },
        {
          name: '测压管危险水位',
          type: 'line',
          smooth: true,
          emphasis: {
            focus: 'series',
          },
          data: this.dpztbwls,
          itemStyle: {
            normal: {
              color: '#b22222',
              lineStyle: {
                color: '#b22222'
              }
            }
          },
        },
        {
          name: '测压管水位',
          type: 'line',
          smooth: true,
          emphasis: {
            focus: 'series',
          },
          data: this.pztbwls,
          itemStyle: {
            color: '#6767ff',
          },
        },
        ],
      }
      let option;
      if (this.stationType == 1) {
        option = this.shiftOption
      } else if (this.stationType == 2) {
        option = this.seepageOption
      } else if (this.stationType == 3) {
        option = this.pressureOption1
      } else if (this.stationType == 4) {
        option = this.pressureOption2
      }
      option && this.chart.setOption(option)
    },
  },
}
</script>

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

.section-container {
  width: 100%;
}
</style>
