<template>
    <div @click="openSteamUsed">
      <div id="bottomRightChart1" style="width:100%;height:2.6rem;">
      </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>
        <div id="bottomRightChart1Dialog" style="width:100%;height:600px;"></div>
      </el-dialog>
    </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
export default {
  props:['latest30DayData'],
  data() {
    return {
      chart:null,
      openChart: false,
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.draw();
  },
  methods: {
    openSteamUsed(){
      this.openChart = true
    },
    open(){
      this.$nextTick(() => {
        this.drawDialog()
      })
    },
    draw() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById('bottomRightChart1'))
      const dateArray = [];
      const planArray=[];
      const actualArray=[];
      for (let i = 0; i < this.latest30DayData.length; i++) {
        dateArray[i]=  this.latest30DayData[i].pullDate.toString().substr(5, 5);
        planArray[i] = this.latest30DayData[i].gasPlan;
        actualArray[i] = this.latest30DayData[i].gasUsed;
      }
      dateArray.reverse();
      planArray.reverse();
      actualArray.reverse();
      let Option={
        color: ['#00DDFF', '#37A2FF'],
        tooltip: {
          trigger: 'axis',
          type: 'category',
        },
        /* 标识 */
        legend: {
          data: ['实际', '计划'],
          textStyle:{
            color: '#ffffff'//字体颜色
          }
        },
        /* 周围边距 */
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          top: '13%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: dateArray,
            axisLabel: {//x轴文字的配置
              show: true,
              textStyle: {
                color: '#ffffff',
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'Units:(Nm³)',
            axisLabel: {
              textStyle: {
                fontSize: 10,
                color: '#ffffff',
                margin: 15
              },
            },
            axisLine: {
              lineStyle: {
                // 设置x轴颜色
                color: '#ffffff'
              }
            },
          }
        ],
        series: [
          {
            name: this.$t('实际'),
            type: 'bar',
            symbol: "none",
            data: actualArray
          },
          {
            name: this.$t('计划'),
            type: 'bar',
            symbol: "none",
            data: planArray
          },
        ]
      };
      this.chart.setOption(Option);
    },
    drawDialog() {
      // 基于准备好的dom，初始化echarts实例
      this.chart1 = this.echarts.init(document.getElementById('bottomRightChart1Dialog'))
      const dateArray = [];
      const planArray=[];
      const actualArray=[];
      for (let i = 0; i < this.latest30DayData.length; i++) {
        dateArray[i]=  this.latest30DayData[i].pullDate.toString().substr(5, 5);
        planArray[i] = this.latest30DayData[i].gasPlan;
        actualArray[i] = this.latest30DayData[i].gasUsed;
      }
      dateArray.reverse();
      planArray.reverse();
      actualArray.reverse();
      let Option={
        color: ['#00DDFF', '#37A2FF'],
        tooltip: {
          trigger: 'axis',
          type: 'category',
        },
        /* 标识 */
        legend: {
          data: ['实际', '计划'],
        },
        /* 周围边距 */
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          top: '13%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: dateArray,
            axisLabel: {//x轴文字的配置
              show: true,
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'Units:(Nm³)',
            axisLabel: {
              textStyle: {
                fontSize: 10,
                margin: 15
              },
            }
          }
        ],
        series: [
          {
            name: this.$t('实际'),
            type: 'bar',
            symbol: "none",
            data: actualArray,
          },
          {
            name: this.$t('计划'),
            type: 'bar',
            symbol: "none",
            data: planArray,
          },
        ]
      };
      this.chart1.setOption(Option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};


</script>

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