<template>
  <div
    id='mainColumnBarLine'
    style="width:100%;height:100%"
  ></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {
    params: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      myChart: '',
      data: ''
    }
  },
  watch: {
    params: {
      handler(newValue) {
        this.getData(newValue)
      },
      deep: true
    }
  },
  mounted() {
    this.draw()
    this.getData(this.params)
  },
  methods: {
    getData(params) {
      this.$http
        .post('${cqxy}/biz/statistics/v1/investmentProgress', params)
        .then(res => {
          this.data = res.data.value
          let investmentList = []
          let outputList = []
          let paymentList = []
          let data = {}
          this.data.investmentList.forEach((item, index) => {
            let value = FormMath.tofixed(
              FormMath.toNumber(item[index + 1]) / 10000,
              0
            )
            investmentList.push(value)
          })
          this.data.outputList.forEach((item, index) => {
            let value = FormMath.tofixed(
              FormMath.toNumber(item[index + 1]) / 10000,
              2
            )
            outputList.push(value)
          })
          this.data.paymentList.forEach((item, index) => {
            let value = FormMath.tofixed(
              FormMath.toNumber(item[index + 1]) / 10000,
              2
            )
            paymentList.push(value)
          })
          data = {
            investmentList,
            outputList,
            paymentList
          }
          this.refreshData(data)
        })
    },
    refreshData(data) {
      //刷新数据
      var option = this.myChart.getOption()
      option.series[0].data = data.investmentList //投资数据
      option.series[1].data = data.outputList //产值数据
      option.series[2].data = data.paymentList //支付数据
      this.myChart.setOption(option)
    },
    draw() {
      var chartDom = document.getElementById('mainColumnBarLine')
      this.myChart = echarts.init(chartDom)
      var option

      option = {
        legend: {
          top: 'bottom',
          padding: 30,
          data: ['投资', '产值', '支付']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          // 此处配置鼠标移动对应区域时的黑色弹框
          trigger: 'axis'
          // formatter: a => {
          //   return (
          //     a.seriesName +
          //     '<br/>' +
          //     a.marker +
          //     a.name +
          //     ' ' +
          //     a.data[a.seriesIndex + 1] +
          //     '万元'
          //   )
          // }
        },
        xAxis: {
          type: 'category',
          data: [
            '一月',
            '二月',
            '三月',
            '四月',
            '五月',
            '六月',
            '七月',
            '八月',
            '九月',
            '十月',
            '十一月',
            '十二月'
          ],
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            fontSize: 14
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}',
            fontSize: 16
          }
        },
        // yAxis: [
        //   {
        //     type: 'value',
        //     min: 0,
        //     // max: '10%',
        //     axisLabel: {
        //       formatter: '{value}',
        //       fontSize: 16
        //     }
        //   },
        //   {
        //     type: 'value',
        //     min: 0,
        //     // max: '10%',
        //     axisLabel: {
        //       formatter: '{value}',
        //       fontSize: 16
        //     }
        //   }
        // ],
        series: [
          {
            name: '投资',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value + '万元'
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0,0,0,0.3)'
              }
            },
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 1, color: '#63b2ee'},
                  {offset: 0.5, color: '#76da91'},
                  {offset: 0, color: '#f8cb7f'}
                ])
              }
            },
            data: [
              730.2984,
              256.4447,
              220,
              340,
              429,
              791,
              652,
              452,
              323,
              255,
              671,
              303
            ]
          },
          {
            name: '产值',
            type: 'line',
            // yAxisIndex: 1,
            // smooth: true,
            tooltip: {
              valueFormatter: function(value) {
                return value + '万元'
              }
            },
            itemStyle: {
              normal: {
                color: '#f89588'
              }
            },
            data: [
              830.2984,
              286.4447,
              320,
              340,
              429,
              791,
              652,
              452,
              623,
              255,
              771,
              403
            ]
          },
          {
            name: '支付',
            type: 'line',
            // yAxisIndex: 1,
            // smooth: true,
            tooltip: {
              valueFormatter: function(value) {
                return value + '万元'
              }
            },
            itemStyle: {
              normal: {
                color: '#76da91'
              }
            },
            data: [
              630.2984,
              386.4447,
              420,
              380,
              329,
              711,
              552,
              422,
              632,
              205,
              791,
              433
            ]
          }
        ]
      }

      option && this.myChart.setOption(option)
    }
  }
}
</script>