<template>
  <div class="chartProfile">
    <div class="odh" :style='{"display": isData ? "" : "none"}'>
      <div class="inbk lf" :id='chartId' :style='{"width":width + "px", "height":height + "px"}'></div>
      <div class="prof inbk bg" :style='{"height":bgH + "px"}'>
        <div class="sw" :style='{"height":bgH + "px"}'>
          <img v-if='tip !== " "' class="tip" :src='"~public/lwt-vue-components/default/assets/profiles/" + tip + ".png"'/>
          <img v-if='tip === " " && isRRF' class="flowRR" src="~public/lwt-vue-components/default/assets/profiles/flow.gif"  :style='{"height":flowH + "px"}'/>
          <img v-if='!isRRF' class="flowZZ" src="~public/lwt-vue-components/default/assets/profiles/flow.gif"  :style='{"height":flowH + "px"}'/>
          <div v-if='tip === " " && isRRF' class="ssw" :style='{"height":sswH + "px"}'></div>
          <img v-if='tip === " " && isRRF' class="proRR" src="~public/lwt-vue-components/default/assets/profiles/RR.png" :style='{"height":proH + "px"}'/>
          <img v-if='!isRRF' class="proZZ" src="~public/lwt-vue-components/default/assets/profiles/ZZ.png" :style='{"height":proH + "px"}'/>
          <div class="profileTitle">
            <span v-for='(ite,i) in endData' :key='i + "spn"' >{{ite.name}}:{{ite.val}}{{ite.unit}} </span>
          </div>
          <canvas :id='canvId' class="canv" :width='canW' :height='canH'></canvas>
        </div>
      </div>
    </div>
    <div v-if='!isData' class="conted">
      <img src="~public/lwt-vue-components/default/assets/profiles/noData.png" />
    </div>
  </div>
</template>
<script>
/**
 * module:绘制折线图+剖面图（水库/河道）
 * author:lwt
 */
import quick from '../../utils/quick'
export default {
  name: 'aTemplate',
  components: {
  },
  props: {
    optionConfig: Object,
    lineData: Array,
    othDefault: Object
  },
  data () {
    return {
      max: 450,
      min: 70,
      canW: 0,
      canH: 0,
      width: 500,
      height: 420,
      proH: 0,
      bgH: 0,
      sswH: 0,
      flowH: 0,
      tmVal: '',
      swVal: 0,
      krVal: 0,
      tip: ' ',
      isRRF: '',
      endData: [],
      isData: true,
      canvId: '',
      chartId: '',
      chatData: []
    }
  },
  created: function () {
    // this.getInit()
    this.canvId = 'canv' + Math.random() * 10
    this.chartId = 'chart' + Math.random() * 10
    // console.log('实例初始化完成调用')
  },
  activated: function () {
    // console.log('keep-alive组件激活时调用')
    // this.getInit()
  },
  methods: {
    getInit: function () { // 初始化数据
      let { othDefault } = this.$props
      this.width = othDefault.width
      this.height = othDefault.height
      this.isRRF = othDefault.isRR
      this.endData = othDefault.endData
      this.chatData = othDefault.chatData
      this.isData = othDefault.isData
      this.proH = this.height - 95
      this.bgH = this.height - 45
      this.sswH = 45
      this.flowH = 0
    },
    drawSw: function (cxt, da, text, x1, x2, x3, color1, color2) { // 绘制线和文字的方法
      var durH = this.max - this.min
      var yH = 0
      cxt.beginPath()
      cxt.font = '13px Arial'
      cxt.strokeStyle = color1
      cxt.fillStyle = color2
      yH = this.bgH - (this.proH / durH) * (da - this.min)
      cxt.moveTo(x1, yH)
      cxt.lineTo(x2, yH)
      cxt.fillText(text + da + ' m', x3, yH - 8)
      cxt.stroke()
    },
    drawCanvas: function (val) { // 绘制剖面图上的所有水位
      this.sswH = 0
      this.flowH = 0
      var swD = this.$props.lineData
      // var swD = this.$props.swData
      this.tip = ' '
      var canvas = document.getElementById(this.canvId)
      var cxt = canvas.getContext('2d')
      // cxt.clearRect(0, 0, canvas.width, canvas.height)
      canvas.width = this.width
      canvas.height = this.bgH
      var durH = this.max - this.min
      let isSw = false
      let isbdgc = false
      for (let key in swD) {
        if (swD.hasOwnProperty(key)) {
          if (swD[key].text === '水位') {
            if (swD[key].val === undefined) {
              isSw = false
            } else {
              isSw = true
            }
          }
          if (swD[key].text === '坝顶高程') {
            if (swD[key].val === undefined) {
              isbdgc = false
            } else {
              isbdgc = true
            }
          }
          if (swD[key].text === '死水位') {
            this.sswH = (this.proH / durH) * (swD[key].val - this.min)
          }
        }
      }
      if (this.isRRF) {
        if (isSw && isbdgc) {
          for (let key in swD) {
            if (swD.hasOwnProperty(key)) {
              if (swD[key].text === '水位') {
                var da = swD[key].val
                if (val !== undefined) {
                  da = val
                }
                if (da === '-') {
                  this.flowH = (this.proH / durH) * 0
                } else {
                  this.drawSw(cxt, da, swD[key].text, swD[key].xStart, swD[key].xEnd, swD[key].txtX, swD[key].lineColor, swD[key].txtColor)
                  this.flowH = (this.proH / durH) * (da - this.min)
                }
              } else {
                if (swD[key].val !== '') {
                  this.drawSw(cxt, swD[key].val, swD[key].text, swD[key].xStart, swD[key].xEnd, swD[key].txtX, swD[key].lineColor, swD[key].txtColor)
                }
              }
            }
          }
        } else {
          if (!isSw && isbdgc) {
            this.tip = 'no-ssw'
          } else if (isSw && !isbdgc) {
            this.tip = 'no-bdgc'
          } else {
            this.tip = 'no-data'
          }
        }
        // if (swD['ssw'] !== undefined && swD['bdgc'] !== undefined) {
        //   // 绘制水位线#2D6DC7
        //   if (swD['sw'] !== undefined) {
        //     var da = swD['sw'].val
        //     if (val !== undefined) {
        //       da = val
        //     }
        //     if (da === '-') {
        //       this.flowH = (this.proH / durH) * 0
        //     } else {
        //       this.drawSw(cxt, da, swD['sw'].text, 0, 185, 100, swD['sw'].lineColor, swD['sw'].txtColor)
        //       this.flowH = (this.proH / durH) * da
        //     }
        //   }
        //   // 绘制汛限水位#E481EC
        //   if (swD['xxsw'] !== undefined) {
        //     this.drawSw(cxt, swD['xxsw'].val, swD['xxsw'].text, 0, 185, 90, swD['xxsw'].lineColor, swD['xxsw'].txtColor)
        //   }
        //   // 绘制死水位#112DE2
        //   if (swD['ssw'] !== undefined) {
        //     this.drawSw(cxt, swD['ssw'].val, swD['ssw'].text, 50, 185, 100, swD['ssw'].lineColor, swD['ssw'].txtColor)
        //     this.sswH = (this.proH / durH) * swD['ssw'].val
        //   }
        //   // 绘坝顶高程#00000
        //   if (swD['bdgc'] !== undefined) {
        //     this.drawSw(cxt, swD['bdgc'].val, swD['bdgc'].text, 50, 185, 80, swD['bdgc'].lineColor, swD['bdgc'].txtColor)
        //   }
        //   // 绘制设计水位#000000
        //   if (swD['sjsw'] !== undefined) {
        //     this.drawSw(cxt, swD['sjsw'].val, swD['sjsw'].text, 186, 280, 190, swD['sjsw'].lineColor, swD['sjsw'].txtColor)
        //   }
        //   // 绘制放水涵管
        //   if (swD['fshg'] !== undefined) {
        //     this.drawSw(cxt, swD['fshg'].val, swD['fshg'].text, 186, 280, 190, swD['fshg'].lineColor, swD['fshg'].txtColor)
        //   }
        // } else {
        //   if (swD['ssw'] === undefined && swD['bdgc'] !== undefined) {
        //     this.tip = 'no-ssw'
        //   } else if (swD['ssw'] !== undefined && swD['bdgc'] === undefined) {
        //     this.tip = 'no-bdgc'
        //   } else {
        //     this.tip = 'no-data'
        //   }
        // }
      } else {
        for (let key in swD) {
          if (swD.hasOwnProperty(key)) {
            if (swD[key].text === '水位') {
              let da = swD[key].val
              if (val !== undefined) {
                da = val
              }
              if (da === '-') {
                this.flowH = (this.proH / durH) * 0
              } else {
                this.drawSw(cxt, da, swD[key].text, swD[key].xStart, swD[key].xEnd, swD[key].txtX, swD[key].lineColor, swD[key].txtColor)
                this.flowH = (this.proH / durH) * (da - this.min)
              }
            } else {
              if (swD[key].val !== '') {
                this.drawSw(cxt, swD[key].val, swD[key].text, swD[key].xStart, swD[key].xEnd, swD[key].txtX, swD[key].lineColor, swD[key].txtColor)
              }
            }
          }
        }
        // 绘制水位线#2D6DC7
        // if (swD['sw'] !== undefined) {
        //   var daZZ = swD['sw'].val
        //   if (val !== undefined) {
        //     daZZ = val
        //   }
        //   if (daZZ === '-') {
        //     this.flowH = (this.proH / durH) * 0
        //   } else {
        //     this.drawSw(cxt, daZZ, swD['sw'].text, 150, 270, 200, swD['sw'].lineColor, swD['sw'].txtColor)
        //     this.flowH = (this.proH / durH) * daZZ
        //   }
        // }
        // if (swD['jjsw'] !== undefined) {
        //   this.drawSw(cxt, swD['jjsw'].val, swD['jjsw'].text, 0, 185, 90, swD['jjsw'].lineColor, swD['jjsw'].txtColor)
        // }
        // if (swD['bzsw'] !== undefined) {
        //   this.drawSw(cxt, swD['bzsw'].val, swD['bzsw'].text, 0, 185, 90, swD['bzsw'].lineColor, swD['bzsw'].txtColor)
        // }
      }
    },
    drawLine: function () { // 加载报图
      let { xAxis } = this.$props.optionConfig
      var ser = this.$props.optionConfig.series || []
      if (xAxis.data.length !== 0) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById(this.chartId))
        // console.log(this.$echarts)
        var max = ser[0].data[0]
        var min = max
        ser.forEach(ite => {
          ite.data.forEach(kte => {
            max = kte > max ? kte : max
            min = kte < min ? kte : min
          })
        })
        var swD = this.$props.lineData
        swD.map(v => {
          if (v.val !== undefined) {
            max = v.val > max ? v.val : max
            min = v.val < min ? v.val : min
          }
        })
        // for (var s in swD) {
        //   if (swD[s].val !== undefined) {
        //     max = swD[s].val > max ? swD[s].val : max
        //     min = swD[s].val < min ? swD[s].val : min
        //   }
        // }
        var limite = (max - min) / 6
        limite = limite < 0.1 ? 0.1 : limite
        // min = (min - limite) < 0 ? 0 : (min - limite).toFixed(1)
        min = (min - limite).toFixed(1)
        max = (max + limite).toFixed(1)
        this.max = max
        this.min = min
        var that = this
        var option = {
          title: { text: '' },
          tooltip: {
            trigger: 'axis',
            textStyle: {
              align: 'left'
            },
            formatter: function (params) {
              var str
              var newd = JSON.parse(JSON.stringify(that.endData))
              for (var i = 0, len = params.length, item; i < len; i++) {
                item = params[i]
                if (item.seriesName === '水位') {
                  let source = that.chatData[item.dataIndex]
                  // console.log(that.chatData)
                  that.drawCanvas(item.value === undefined ? '-' : item.value)
                  // that.swVal = item.value === undefined ? '-' : item.value
                  for (let key in newd) {
                    if (newd.hasOwnProperty(key)) {
                      if (newd[key].name === item.seriesName) {
                        newd[key].val = item.value
                      } else if (newd[key].name === '时间') {
                        newd[key].val = item.name
                      } else {
                        newd[key].val = quick.templateValue(newd[key].key, source) || ''
                      }
                    }
                  }
                }
                if (i === 0) {
                  // that.tmVal = item.name
                  str = '时间：' + item.name
                }
                if (item.value === undefined) {
                  str += `<br/>${item.seriesName}：-m`
                } else {
                  str += `<br/>${item.seriesName}：${item.value}m`
                }
              }
              that.endData = newd
              return str
            }
          },
          legend: {
            data: [],
            top: '5'
          },
          grid: {
            left: '10%',
            right: '0',
            top: '50',
            bottom: '45'
          },
          xAxis: {
            data: [],
            splitLine: {
              show: true
            }
          },
          yAxis: {
            min: min,
            max: max,
            splitLine: {
              show: true
            }
          },
          series: []
        }
        option = quick.deepMerge(option, this.$props.optionConfig.option)
        option.legend = quick.deepMerge(option.legend, this.$props.optionConfig.legend)
        option.xAxis = quick.deepMerge(option.xAxis, this.$props.optionConfig.xAxis)
        option.yAxis = quick.deepMerge(option.yAxis, this.$props.optionConfig.yAxis)
        option.series = quick.deepMerge(option.series, this.$props.optionConfig.series)
        myChart.setOption(option)
        myChart.resize({ width: that.width, height: that.height })
      } else {
      }
    }
  },
  computed: {
  },
  directives: {
  },
  filters: {
  },
  watch: {
    optionConfig: function (val, oldVal) {
      this.drawLine()
    },
    lineData: function (val, oldVal) {
      this.drawCanvas()
    },
    othDefault: function (val, oldVal) {
      this.getInit()
      this.drawCanvas()
      this.drawLine()
    }
  },
  beforeCreate: function () {
    // console.log('实例初始化前调用')
  },
  beforeMount: function () {
    // console.log('挂载到页面前调用')
  },
  mounted: function () {
    // console.log('挂载到页面完成调用')
    this.getInit()
    // console.log(this)
  },
  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 './chartProfile.css';
</style>
