<template>
  <div id="centreRight1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-line"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">BYC用电情况</span>
        </div>
      </div>
      <div class="d-flex jc-center body-box" @click="openBYCdialog">
        <span style="padding-left:10px;">Unit:(MW)</span>
        <div id="BYCChart" style="width:100%;height:1.6rem;"></div>
      </div>
      <div class="d-flex pt-2 pl-2" style="margin-top: 0.3rem">
        <span style="color:#5cd9e8">
          <icon name="chart-line"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">BYC购电情况</span>
        </div>
      </div>
      <div class="d-flex jc-center body-box" @click="openBOCdialog">
        <span style="padding-left:10px;">Unit:(MW)</span>
        <div id="BOCChart" style="width:100%;height:1.6rem;"></div>
      </div>
    </div>
    <el-dialog  :close-on-click-modal="false" class="my-info-dialog" :visible.sync="openChartBYCChart" title="BYC用电情况" @open="openBYC" width="1600px" destroy-on-close append-to-body>
      <div id="BYCChart1" style="width:100%;height:600px;"></div>
    </el-dialog>
    <el-dialog  :close-on-click-modal="false" class="my-info-dialog" :visible.sync="openChartBOCChart" title="BYC购电情况" @open="openBOC" width="1600px" destroy-on-close append-to-body>
      <div id="BOCChart1" style="width:100%;height:600px;"></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props:['fiftydayData','latest30DayData'],
  data() {
    return {
      openChartBYCChart: false,
      openChartBOCChart: false
    };
  },
  components: {},
  mounted() {
    this.initBycChart();
    this.initBocChart();
  },
  methods: {
    openBYC(){
      this.$nextTick(() => {
        this.initBycChartDialog()
      })
    },
    openBOC(){
      this.$nextTick(() => {
        this.initBocChartDialog()
      })
    },
    openBYCdialog(){
      this.openChartBYCChart = true
    },
    openBOCdialog(){
      this.openChartBOCChart = true
    },
    initBycChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById('BYCChart'));
      const dateNum = [];
      const dateDay=[];
      for (let i = 0; i < this.latest30DayData.length; i++) {
        dateDay[i]=  this.latest30DayData[i].pullDate.toString().substr(5, 5);
        dateNum[i] = this.latest30DayData[i].elecBycUsed;
      }
      dateDay.reverse();
      dateNum.reverse();
      this.chart.setOption({
        /* 周围边距 */
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          top: '7%',
          containLabel: true
        },
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 400
          },
        ],
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            data: dateDay,
            axisLabel: {
              color: '#ffffff'
            }
          },
        ],
        yAxis: {
          name: 'Unit:(MW)',
          axisLabel: {
            color: '#ffffff'
          }
        },
        series: [
          {
            type: 'line',
            showSymbol: false,
            data: dateNum,
            areaStyle: {
              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255,255,0)'
                },
                {
                  offset: 1,
                  color: 'rgb(255,128,0)'
                }
              ])
            }
          },
        ]
      })
    },
    initBycChartDialog() {
      // 基于准备好的dom，初始化echarts实例
      this.chart1 = this.echarts.init(document.getElementById('BYCChart1'));

      const dateNum = [];
      const dateDay=[];
      for (let i = 0; i < this.latest30DayData.length; i++) {
        dateDay[i]=  this.latest30DayData[i].pullDate.toString().substr(5, 5);
        dateNum[i] = this.latest30DayData[i].elecBycUsed;
      }
      dateDay.reverse();
      dateNum.reverse();
      this.chart1.setOption({
        /* 周围边距 */
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          top: '7%',
          containLabel: true
        },
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 400
          },
        ],
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            data: dateDay
          },
        ],
        yAxis: {
          name: 'Unit:(MW)'
        },
        series: [
          {
            label: {
              show: true,
              position: 'top'
            },
            type: 'line',
            data: dateNum,
            areaStyle: {
              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255,255,0)'
                },
                {
                  offset: 1,
                  color: 'rgb(255,128,0)'
                }
              ])
            }
          },
        ]
      })
    },
    initBocChart() {
      // const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
      // const dateList = data.map(function (item) {
      //   return item[0];
      // });
      // const valueList = data.map(function (item) {
      //   return item[1];
      // });

      const dateNum = [];
      const dateDay=[];
      for (let i = 0; i < this.latest30DayData.length; i++) {
        dateDay[i]=  this.latest30DayData[i].pullDate.toString().substr(5, 5);
        dateNum[i] = this.latest30DayData[i].elecBocUsed;
      }
      dateDay.reverse();
      dateNum.reverse();
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById('BOCChart'))

      this.chart.setOption({
        /* 周围边距 */
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          top: '7%',
          containLabel: true
        },
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 400
          },
        ],
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            data: dateDay,
            axisLabel: {
              color: '#ffffff'
            }
          },
        ],
        yAxis: {
          name: 'Unit:(MW)',
          axisLabel: {
            color: '#ffffff'
          }
        },
        series: [
          {
            type: 'line',
            showSymbol: false,
            data: dateNum,
            areaStyle: {
              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255,255,0)'
                },
                {
                  offset: 1,
                  color: 'rgb(255,128,0)'
                }
              ])
            }
          },
        ]
      })
    },
    initBocChartDialog() {
      const dateNum = [];
      const dateDay=[];
      for (let i = 0; i < this.latest30DayData.length; i++) {
        dateDay[i]=  this.latest30DayData[i].pullDate.toString().substr(5, 5);
        dateNum[i] = this.latest30DayData[i].elecBocUsed;
      }
      dateDay.reverse();
      dateNum.reverse();
      // 基于准备好的dom，初始化echarts实例
      this.chart2 = this.echarts.init(document.getElementById('BOCChart1'))
      this.chart2.setOption({
        /* 周围边距 */
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          top: '7%',
          containLabel: true
        },
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 400
          },
        ],
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            data: dateDay
          },
        ],
        yAxis: {
          name: 'Unit:(MW)'
        },
        series: [
          {
            label: {
              show: true,
              position: 'top'
            },
            type: 'line',
            data: dateNum,
            areaStyle: {
              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255,255,0)'
                },
                {
                  offset: 1,
                  color: 'rgb(255,128,0)'
                }
              ])
            }
          },
        ]
      })
    },
  }
};
</script>

<style lang="scss">
#centreRight1 {
  padding: 0.2rem;
  height: 5.125rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
  .bg-color-black {
    height: 4.8125rem;
    border-radius: 0.125rem;
  }
  .text {
    color: #ffffff;
  }
  .body-box {
    border-radius: 0.125rem;
    overflow: hidden;
  }
}
</style>
