<template>
  <div @click="opnenDialg">
    <div id="bottomLeftChart" style="width:11.25rem;height:5.9rem;"></div>
    <el-dialog  :close-on-click-modal="false" class="my-info-dialog" :visible.sync="openChart" title="蒸汽消耗" @open="open" width="1600px" destroy-on-close append-to-body>
      <span style="padding-left:65px;color:#ffffff;">Unit:(t/h)</span>
      <div id="bottomLeftChart2" style="width:100%;height:600px;"></div>
    </el-dialog>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
export default {
  props:['monthData', 'latest30DayData'],
  data() {
    return {
      chart: null,
      openChart: false

    };
  },
  mixins: [echartMixins],
  mounted() {
    this.draw();
  },
  methods: {
    opnenDialg(){
      this.openChart = true
    },
    open(){
      this.$nextTick(() => {
        this.drawDialog()
      })
    },
    draw() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById("bottomLeftChart"));
      let category =[];
      let HHPData=[];
      let HPData=[];
      let LPData=[];
      let MPData=[];
      for(let i=0;i<this.latest30DayData.length;i++){
        category[i]=this.latest30DayData[i].pullDate.toString().substr(5, 5);
        HHPData[i]=this.latest30DayData[i].steamHhp;
        HPData[i]=this.latest30DayData[i].steamHp;
        LPData[i]=this.latest30DayData[i].steamLp;
        MPData[i]=this.latest30DayData[i].steamMp;
      }
      // let lineData = [
      //   18092,
      //   20728,
      //   24045,
      //   28348,
      //   32808,
      //   36097,
      //   39867,
      //   44715,
      //   48444,
      //   50415,
      //   56061,
      //   62677,
      //   59521,
      //   67560,
      //   18092,
      //   20728,
      //   24045,
      //   28348,
      //   32808,
      //   36097,
      //   39867,
      //   44715,
      //   48444,
      //   50415,
      //   36097,
      //   39867,
      //   44715,
      //   48444,
      //   50415,
      //   50061,
      //   32677,
      //   49521,
      //   32808
      // ];
      // let barData = [
      //   4600,
      //   5000,
      //   5500,
      //   6500,
      //   7500,
      //   8500,
      //   9900,
      //   12500,
      //   14000,
      //   21500,
      //   23200,
      //   24450,
      //   25250,
      //   33300,
      //   4600,
      //   5000,
      //   5500,
      //   6500,
      //   7500,
      //   8500,
      //   9900,
      //   22500,
      //   14000,
      //   21500,
      //   8500,
      //   9900,
      //   12500,
      //   14000,
      //   21500,
      //   23200,
      //   24450,
      //   25250,
      //   7500
      // ];
      // let rateData = [];
      // for (let i = 0; i < 33; i++) {
      //   let rate = barData[i] / lineData[i];
      //   rateData[i] = rate.toFixed(2);
      // }
      let rateData = [];
      for (let i = 0; i < category.length; i++) {
        rateData.push(
          Number(HHPData[i]) +
          Number(HPData[i]) +
          Number(LPData[i]) +
          Number(MPData[i])
        );
      }

      let option = {
        title: {
          text: "",
          x: "center",
          y: 0,
          textStyle: {
            color: "#B4B4B4",
            fontSize: 16,
            fontWeight: "normal"
          }
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255,255,255,0.1)",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
              backgroundColor: "#7B7DDC"
            }
          }
        },
        legend: {
          data: ['HHP','HP','MP','LP','总消耗'],
          // data: ['Discharged','Planned emission','Emission rate'],
          textStyle: {
            color: "#B4B4B4"
          },
          top: "0%"
        },
        grid: {
          x: "8%",
          width: "88%",
          y: "4%"
        },
        xAxis: {
          data: category,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#ffffff'
          }
        },
        yAxis: [
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },
            axisLabel: {
              formatter: "{value} ",
              color: '#ffffff'
            }
          },
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },
            axisLabel: {
              formatter: "{value} "
            }
          }
        ],
        series: [
          {
            name: '总消耗',
            type: "line",
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 8,
            // yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "#F02FC2"
              }
            },
            data: rateData
          },

          {
            name: 'HHP',
            type: "bar",
            stack: 'Ad',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(95,198,299,0.8)" },
                  { offset: 0.2, color: "rgba(95,198,299,0.5)" },
                  { offset: 1, color: "rgba(95,198,299,0.2)" }
                ])
              }
            },
            data: HHPData
          },

          {
            name: 'HP',
            type: "bar",
            barGap: "-100%",
            stack: 'Ad',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(222,188,22,0.8)" },
                  { offset: 0.2, color: "rgba(222,188,22,0.5)" },
                  { offset: 1, color: "rgba(222,188,22,0.2)" }
                ])
              }
            },
            z: -12,

            data: HPData
          },

            {
            name: 'MP',
            type: "bar",
            barGap: "-100%",
            stack: 'Ad',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(7,222,164,0.8)" },
                  { offset: 0.2, color: "rgba(7,222,164,0.5)" },
                  { offset: 1, color: "rgba(7,222,164,0.2)" }
                ])
              }
            },
            z: -12,

            data: MPData
          },

          {
            name: 'LP',
            type: "bar",
            barGap: "-100%",
            stack: 'Ad',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(156,107,211,0.8)" },
                  { offset: 0.2, color: "rgba(156,107,211,0.5)" },
                  { offset: 1, color: "rgba(156,107,211,0.2)" }
                ])
              }
            },
            z: -12,

            data: LPData
          },


        ]
      };
      this.chart.setOption(option);
      this.chart.on('click' , function (params) {
        console.log(params + '==================')
      })
    },
    drawDialog() {
      // 基于准备好的dom，初始化echarts实例
      this.chart2 = this.echarts.init(document.getElementById("bottomLeftChart2"));
      let category =[];
      let HHPData=[];
      let HPData=[];
      let LPData=[];
      let MPData=[];
      for(let i=0;i<this.latest30DayData.length;i++){
        category[i]=this.latest30DayData[i].pullDate.toString().substr(5, 5);
        HHPData[i]=this.latest30DayData[i].steamHhp;
        HPData[i]=this.latest30DayData[i].steamHp;
        LPData[i]=this.latest30DayData[i].steamLp;
        MPData[i]=this.latest30DayData[i].steamMp;
      }
      // let lineData = [
      //   18092,
      //   20728,
      //   24045,
      //   28348,
      //   32808,
      //   36097,
      //   39867,
      //   44715,
      //   48444,
      //   50415,
      //   56061,
      //   62677,
      //   59521,
      //   67560,
      //   18092,
      //   20728,
      //   24045,
      //   28348,
      //   32808,
      //   36097,
      //   39867,
      //   44715,
      //   48444,
      //   50415,
      //   36097,
      //   39867,
      //   44715,
      //   48444,
      //   50415,
      //   50061,
      //   32677,
      //   49521,
      //   32808
      // ];
      // let barData = [
      //   4600,
      //   5000,
      //   5500,
      //   6500,
      //   7500,
      //   8500,
      //   9900,
      //   12500,
      //   14000,
      //   21500,
      //   23200,
      //   24450,
      //   25250,
      //   33300,
      //   4600,
      //   5000,
      //   5500,
      //   6500,
      //   7500,
      //   8500,
      //   9900,
      //   22500,
      //   14000,
      //   21500,
      //   8500,
      //   9900,
      //   12500,
      //   14000,
      //   21500,
      //   23200,
      //   24450,
      //   25250,
      //   7500
      // ];
      // let rateData = [];
      // for (let i = 0; i < 33; i++) {
      //   let rate = barData[i] / lineData[i];
      //   rateData[i] = rate.toFixed(2);
      // }
      let rateData = [];
      for (let i = 0; i < category.length; i++) {
        rateData.push(
          Number(HHPData[i]) +
          Number(HPData[i]) +
          Number(LPData[i]) +
          Number(MPData[i])
        );
      }

      let option = {
        title: {
          text: "",
          x: "center",
          y: 0,
          textStyle: {
            color: "#B4B4B4",
            fontSize: 16,
            fontWeight: "normal"
          }
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255,255,255,0.1)",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
              backgroundColor: "#7B7DDC"
            }
          }
        },
        legend: {
          data: ['HHP','HP','MP','LP','总消耗'],
          // data: ['Discharged','Planned emission','Emission rate'],
          top: "0%"
        },
        grid: {
          x: "8%",
          width: "88%",
          y: "4%"
        },
        xAxis: {
          data: category,
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            splitLine: { show: false },
            axisLabel: {
              formatter: "{value} "
            }
          },
          {
            splitLine: { show: false },
            axisLabel: {
              formatter: "{value} "
            }
          }
        ],
        series: [
          {
            name: '总消耗',
            type: "line",
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 8,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "#F02FC2"
              }
            },
            data: rateData
          },

          {
            name: 'HHP',
            type: "bar",
            stack: 'Ad',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(95,198,299,0.8)" },
                  { offset: 0.2, color: "rgba(95,198,299,0.5)" },
                  { offset: 1, color: "rgba(95,198,299,0.2)" }
                ])
              }
            },
            data: HHPData
          },

          {
            name: 'HP',
            type: "bar",
            barGap: "-100%",
            stack: 'Ad',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(222,188,22,0.8)" },
                  { offset: 0.2, color: "rgba(222,188,22,0.5)" },
                  { offset: 1, color: "rgba(222,188,22,0.2)" }
                ])
              }
            },
            z: -12,

            data: HPData
          },

            {
            name: 'MP',
            type: "bar",
            barGap: "-100%",
            stack: 'Ad',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(7,222,164,0.8)" },
                  { offset: 0.2, color: "rgba(7,222,164,0.5)" },
                  { offset: 1, color: "rgba(7,222,164,0.2)" }
                ])
              }
            },
            z: -12,

            data: MPData
          },

          {
            name: 'LP',
            type: "bar",
            barGap: "-100%",
            stack: 'Ad',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(156,107,211,0.8)" },
                  { offset: 0.2, color: "rgba(156,107,211,0.5)" },
                  { offset: 1, color: "rgba(156,107,211,0.2)" }
                ])
              }
            },
            z: -12,

            data: LPData
          },


        ]
      };
      this.chart2.setOption(option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
</style>
