<template>
  <a-spin :spinning="loading">
    <div class="demand-analysis">
      <commonSearch ref="commonSearch" type="daterange" @search="handleSearch"></commonSearch>
      <div class="item-echarts" ref="echarts" :style="{ height: echartsHeight + 'px' }"></div>
    </div>
  </a-spin>
</template>

<script>
import * as echarts from 'echarts'
import commonSearch from '../components/commonSearch.vue'
import { httpAction, getAction } from '@/api/manage'
export default {
  name: 'demandAnalysis',
  components: {
    commonSearch,
  },
  data() {
    return {
      description: '需量分析',
      loading: true,
      echartsHeight: window.innerHeight - 84 - 60 - 30,
      myChart: null,
      url: {
        list: '/emsStatistics/demandanalysis',
      },
      monthsplit: [],
      mubiao: [153, 160, 145, 145, 125],
      shiji: [],
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.getDemandanalysis()
    })
  },
  methods: {
    getDemandanalysis() {
      this.loading = true
      var data = this.$refs.commonSearch.queryParams
      getAction(this.url.list, data).then((response) => {
        if(response.success){
          this.monthsplit = response.result.monthsplit
          this.mubiao = response.result.mubiao
          this.shiji = response.result.shiji
          // this.$message.success(response.message);
        }else{
          this.$message.warning(response.message);
        }
      }).finally(() => {
        this.initEcharts()
        this.loading = false
      })
    },
    /**
     * @param span series 中最大值与最小值的差值
     * @param splitNumber 坐标轴分割段数
     * @param round 折线图中需要传 true
     * @returns {number} 处理后 max 的最后结果
     */
    nice(span, splitNumber, round) {
      let val = span / splitNumber
      var exponent = Math.floor(Math.log(val) / Math.LN10)
      var exp10 = Math.pow(10, exponent)
      var f = val / exp10 // 1 <= f < 10

      var nf

      if (round) {
        if (f < 1.5) {
          nf = 1
        } else if (f < 2.5) {
          nf = 2
        } else if (f < 4) {
          nf = 3
        } else if (f < 7) {
          nf = 5
        } else {
          nf = 10
        }
      } else {
        if (f < 1) {
          nf = 1
        } else if (f < 2) {
          nf = 2
        } else if (f < 3) {
          nf = 3
        } else if (f < 5) {
          nf = 5
        } else {
          nf = 10
        }
      }

      val = nf * exp10 // Fix 3 * 0.1 === 0.30000000000000004 issue (see IEEE 754).
      // 20 is the uppper bound of toFixed.

      const step = exponent >= -20 ? +val.toFixed(exponent < 0 ? -exponent : 0) : val

      let result
      for (let i = splitNumber - 3; i < splitNumber + 3; i++) {
        result = step * i
        if (result > span) break
      }

      return result
    },
    initEcharts() {
      var _this = this
      var chartDom = _this.$refs.echarts
      _this.myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: '需量分析',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['实际需量', '目标需量'],
        },
        toolbox: {
          show: true,
          feature: {
            // magicType: { type: ['line', 'bar'] },
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.monthsplit,
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}kVA',
          },
        },
        series: [
          {
            name: '实际需量',
            type: 'line',
            // smooth: true, //平滑曲线显示
            barWidth: '55%',
            itemStyle: {
              normal: {
                color: function (params) {
                  console.log(params)
                  if (params.data > _this.mubiao[params.dataIndex]) {
                    return '#F5B544'
                  } else {
                    return '#0C75FF'
                  }
                },
                // barBorderRadius: 11,
              },
            },
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' },
              ],
            },
            // markLine: {
            //   data: [{ type: 'average', name: 'Avg' }]
            // }
            data: this.shiji,
          },
          {
            name: '目标需量',
            type: 'line',
            // smooth: true, //平滑曲线显示
            step: 'middle',
            symbol: 'none',
            // showAllSymbol: true, //显示所有图形。
            // symbol: "circle", //标记的图形为实心圆
            // symbolSize: 1, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: 'rgba(5,140,255, 0.2)',
            },
            lineStyle: {
              color: 'rgba(5,140,255, 0.2)',
            },
            areaStyle: {
              color: 'rgba(5,140,255, 0.2)',
            },
            //   areaStyle: {
            //     normal: {
            //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //                 offset: 0,
            //                 color: 'rgba(0,202,149,0.3)'
            //             },
            //             {
            //                 offset: 1,
            //                 color: 'rgba(0,202,149,0)'
            //             }
            //         ], false),
            //         shadowColor: 'rgba(0,202,149, 0.9)',
            //         shadowBlur: 20
            //     }
            // },
            data: this.mubiao,

            // markPoint: {
            //   data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
            // },
            // markLine: {
            //   data: [
            //     { type: 'average', name: 'Avg' },
            //     [
            //       {
            //         symbol: 'none',
            //         x: '90%',
            //         yAxis: 'max'
            //       },
            //       {
            //         symbol: 'circle',
            //         label: {
            //           position: 'start',
            //           formatter: 'Max'
            //         },
            //         type: 'max',
            //         name: '最高点'
            //       }
            //     ]
            //   ]
            // }
          },
        ],
      }

      option && _this.myChart.setOption(option)
      window.addEventListener('resize', function () {
        _this.myChart.resize()
      })
    },
    /** 搜索按钮操作 */
    handleSearch(param) {
      this.getDemandanalysis()
    },
  },
}
</script>

<style lang="less" scoped>
  @import '~@/assets/less/uStyle.less';
</style>
<style lang="less" scoped>
.demand-analysis {
  min-height: calc(100vh - 84px);
  padding: 0 10px;
  .search-container {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding-top: 12px;
    margin-bottom: 10px;
    .el-form-item--small.el-form-item {
      margin-bottom: 14px;
    }
  }
  .item-echarts {
    // min-height: calc(100vh - 174px);
    padding: 10px;
    box-shadow: 0 2px 10px rgba(153, 153, 153, 0.1);
    background-color: #fff;
  }
}
</style>
