<template>
  <div>
    <div ref="complexChart" style="padding: 0px;" :style="{ width: width, height: height }" />
  </div>
</template>

<script>
export default {
  props: {
    titletext: { // 标题名称
      type: String,
      default: ''
    },
    optiondata: { // 数据
      type: Object,
      default: null
    },
    yaxisdata: { // yaxis数据
      type: Array,
      default: null
    },
    isyaxis: { // 是否显示 yaxis数据
      type: String,
      default: ''
    },
    boundarygap: { //
      type: String,
      default: '1'
    },
    earlywarningdata: { // 预警 数据
      type: Object,
      default: function() {
        return { max: 0, min: 0, type: 0 }
      }
    },
    isdynamic: { // 判断是否刷新-刷新依据
      type: String,
      default: '0'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      // xAxisTableA: { name: '', color: '' },
      // xAxisTableB: { name: '', color: '' }
      myChart: [],
      legendData: [],
      seriesData: []
    }
  },
  watch: {
    optiondata: function() {
      var myChart = this.$echarts.init(this.$refs.complexChart)
      myChart.clear()
      this.myChart = myChart
      if (this.optiondata !== null) {
        this.initializationData()
      }
    },
    isdynamic: function() {
      if (this.isdynamic !== '0') {
        if (this.optiondata !== null) {
          this.initializationData()
        }
      }
    }
  },
  mounted() {
    console.log(this.titletext)
    // this.myEcharts()
  },
  methods: {
    myyaxis() {
      if (this.yaxisdata === null) {
        return {
          type: 'value',
          splitLine: {
          // 网格线
            lineStyle: {
              type: 'dashed',
              width: 1
            }
          }
        }
      }
      const yaxisdata = this.yaxisdata
      const data = []
      for (let i = 0; i < yaxisdata.length; i++) {
        const m = {}
        m.type = 'value'
        m.axisLine = {
          lineStyle: {
            color: '#3e72c5',
            width: 1
          }
        }
        m.axisLabel = {
          formatter: '{value}'
        }
        m.splitLine = {
          // 网格线
          lineStyle: {
            type: 'dashed',
            width: 1
          }
        }
        m.name = yaxisdata[i].name
        if (yaxisdata[i].color) {
          m.axisLine.lineStyle.color = yaxisdata[i].color
        }
        data.push(m)
      }
      return data
    },
    myMarkArea() {
      const min = this.earlywarningdata.min
      const max = this.earlywarningdata.max
      return {
        silent: true,
        itemStyle: {
          opacity: 0.2,
          color: '#E22018'
        },
        data: [[
          { yAxis: min },
          { yAxis: max }
        ]]
      }
    },
    myMarkLine(v) {
      const min = this.earlywarningdata.min
      return {
        lineStyle: {
          color: '#E22018',
          opacity: 1
        },
        silent: true,
        symbol: 'none',
        data: [{
          label: {
            show: true,
            position: 'end',
            formatter: '{c}'
          },
          yAxis: min }
        ]

      }
    },
    initializationData() {
      if (this.titletext === '' || this.optiondata === null) {
        return
      }
      // let gridleft = '2%'
      // const gridright = '3%'
      // if (this.optiondata.data[0].seriesData.length === 0) {
      //   gridleft = '3%'
      // }
      const legendData = []
      const seriesData = []
      if (this.optiondata.data) {
        const data = this.optiondata.data
        for (let i = 0; i < data.length; i++) {
          legendData.push(data[i].legendData)
          const series = {}
          series.name = data[i].legendData
          series.data = data[i].seriesData
          series.type = data[i].type === 0 ? 'bar' : 'line'
          if (this.isyaxis === '0') { // 是否显示
            series.yAxisIndex = data[i].type
          }
          if (this.earlywarningdata.type === 1) { // 是否显示
            series.markArea = this.myMarkArea()
            series.markLine = this.myMarkLine()
          }
          seriesData.push(series)
        }
      }
      this.myEcharts(legendData, seriesData)
    },
    myEcharts(legendData, seriesData) {
      this.legendData = legendData
      this.seriesData = seriesData
      // 基于准备好的dom，初始化echarts实例
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: this.titletext,
          textStyle: { fontSize: 14, color: '#000' }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: 'red'
            }
          }
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          containLabel: true
        },
        legend: {
          data: legendData
        },
        xAxis: {
          type: 'category',
          boundaryGap: this.boundarygap === '1',
          data: this.optiondata.xAxisData,
          axisLabel: {
            rotate: this.boundarygap === '1' ? -30 : 30,
            textStyle: {
              fontSize: '10'
            }
          },
          axisPointer: {
            type: 'shadow'
          },
          axisLine: {
            lineStyle: {
              color: '#0087ED',
              width: 1
            }
          }
        },
        yAxis: this.myyaxis(),
        series: seriesData,
        color: ['#3e72c5', '#009688', '#dc3545']
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option)
    }
  }
}
</script>

<style>
</style>
