<template>
  <div class="relationDiagram">
    <div id='relationChart' :style='{"width":wid + "px", "height":heig + "px"}'></div>
  </div>
</template>
<script>
/**
 * module:关系图（echarts折线图）
 * author:lwt
 */
export default {
  name: 'relationDiagram',
  components: {
  },
  props: {
    txt: Object
  },
  data () {
    return {
      wid: 600,
      heig: 400
    }
  },
  created: function () {
    // console.log('实例初始化完成调用')
  },
  activated: function () {
    // console.log('keep-alive组件激活时调用')
    this.drawLine()
  },
  methods: {
    drawLine: function () { // 加载报图
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('relationChart'))
      var option = {
        title: { text: '' },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            align: 'left'
          },
          axisPointer: {
            type: 'cross',
            animation: false,
            label: {
              backgroundColor: '#505765'
            }
          }
          // formatter: function (params) {
          //   var str
          //   for (var i = 0, len = params.length, item; i < len; i++) {
          //     item = params[i]
          //     str = '库容:' + (item.data)[0] + '万m³;<br/>水位：' + (item.data)[1] + 'm'
          //   }
          //   return str
          // }
        },
        legend: {
          data: ['上水位', '下水位'],
          x: 'left'
        },
        grid: {
          left: '3%',
          bottom: '3%',
          right: '140',
          top: '40',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          name: '',
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {onZero: false},
          splitLine: {
            show: true
          },
          data: ['2009/6/12 2:00', '2009/6/12 3:00', '2009/6/12 4:00', '2009/6/12 5:00', '2009/6/12 6:00', '2009/6/12 7:00'].map(function (str) {
            return str.replace(' ', '\n')
          })
        },
        color: ['#0066cc'],
        yAxis: [
          {
            name: '上水位(m)',
            type: 'value',
            max: 2
          },
          {
              name: '下水位(m)',
              nameLocation: 'start',
              max: 5,
              type: 'value',
              inverse: true
          }
        ],
        series: [{
            name:'上水位',
            type:'line',
            animation: false,
            areaStyle: {
            },
            lineStyle: {
                width: 1
            },
            data:[0.97, 0.96, 0.96, 0.95, 0.95, 0.94]
        },
        {
            name:'下水位',
            type:'line',
            yAxisIndex:1,
            animation: false,
            areaStyle: {
            },
            lineStyle: {
                width: 1
            },
            data: [1, 2, 3, 4, 2, 3]
        }]
      }
      myChart.setOption(option)
    },
    getMarkLine: function () {
      var data = []
      if (this.$props.txt.ddz !== undefined) {
        data.push({
          name: '死水位',
          yAxis: this.$props.txt.ddz,
          label: {
            normal: {
              position: 'end',
              formatter: '死水位：' + this.$props.txt.ddz + 'm'
            }
          }
        })
      }
      if (this.$props.txt.flood_val !== undefined) {
        data.push({
          name: '汛限水位',
          yAxis: this.$props.txt.flood_val,
          label: {
            normal: {
              position: 'end',
              formatter: '汛限水位：' + this.$props.txt.flood_val + 'm'
            }
          }
          // lineStyle: { color: '#E800E8' }
        })
      }
      if (this.$props.txt.normz !== undefined) {
        data.push({
          name: '正常高水位',
          yAxis: this.$props.txt.normz,
          label: {
            normal: {
              position: 'end',
              formatter: '正常高水位：' + this.$props.txt.normz + 'm'
            }
          }
          // lineStyle: { color: '#FF0000' }
        })
      }
      if (this.$props.txt.dsflz !== undefined) {
        data.push({
          name: '设计洪水位',
          yAxis: this.$props.txt.dsflz,
          label: {
            normal: {
              position: 'end',
              formatter: '设计洪水位：' + this.$props.txt.dsflz + 'm'
            }
          }
        })
      }
      if (data.length < 1) {
        return {}
      } else {
        return { data: data }
      }
    },
    getMarkPoint: function () {
      var data = []
      // if (this.baseData.capacity != undefined && this.baseData.val != undefined) {
      data.push({
        name: '当前水位',
        xAxis: this.$props.txt.kr,
        yAxis: this.$props.txt.sw,
        symbolSize: [20, 20]
      })
      // }
      var that = this
      return {
        data: data,
        symbol: 'triangle',
        symbolOffset: [0, 10],
        itemStyle: {
          normal: {
            color: '#ff0000',
            label: {
              // position:'insideTop',
              position: [-40, -30],
              show: true,
              formatter: function (param) {
                return '当前水位' + that.$props.txt.sw + 'm'
              }
            }
          }
        }
      }
    }
  },
  computed: {
  },
  directives: {
  },
  filters: {
  },
  watch: {
    txt: function (val, oldVal) {
    }
  },
  beforeCreate: function () {
    // console.log('实例初始化前调用')
  },
  beforeMount: function () {
    // console.log('挂载到页面前调用')
  },
  mounted: function () {
    // console.log('挂载到页面完成调用')
  },
  beforeUpdate: function () {
    // console.log('更新前调用')
  },
  updated: function () {
    // console.log('更新完成调用')
  },
  deactivated: function () {
    // console.log('keep-alive组件停用时调用')
  },
  beforeDestroy: function () {
    // console.log('销毁之间调用')
  },
  destroyed: function () {
    // console.log('实例销毁后调用')
  },
  errorCaptured: function () {
    // console.log('异常发生处理')
  }
}
</script>
<style>
@import './relationDiagram.css';
</style>
