<template>
  <div id="centreRight2">
    <div class="bg-color-black">

      <div class="d-flex jc-center body-box center-text" style=" margin-top: 0;height: 60px">
        <div class="fontElec"><p class="title-p">发电量</p><p class="title-p2">{{this.dashboarddayelec.elecPowerGen}}</p></div>
      </div>
      <div class="d-flex jc-center body-box center-text" style=" margin-top: 0;height: 60px">
        <div class="fontElec"><p class="title-p">倒电量</p> <p class="title-p2">{{this.dashboarddayelec.elecPowerSwitch}}</p></div>

      </div>
      <div class="d-flex jc-center body-box center-text" style=" margin-top: 0;height: 60px">
        <div class="fontElec"><p class="title-p">用电量</p><p class="title-p2">{{this.dashboarddayelec.elecUsed}}</p></div>

      </div>
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="align-left"></icon>
        </span>
        <span class="fs-xl text mx-2">峰谷电量</span>
      </div>
      <div class="d-flex jc-center body-box" @click="openChartElec" style=" margin-top: 0;">
        <div id="peakToValley" style="width:100%;height:2.5rem;"></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="peakToValleyDialog" style="width:100%;height:600px;"></div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
  import centreRight2Chart1 from "@/components/echart/centreRight2/centreRight2Chart1";
  export default {
    props:['dashboardelecdata', 'latest30DayData'],
    data() {
      return {
        openChart: false,
        config: {
          data: [
            {
              name: "A",
              value: 167
            },
            {
              name: "B",
              value: 67
            },
            {
              name: "C",
              value: 123
            },
            {
              name: "D",
              value: 55
            },
          ],
          showValue: true
        },
        dashboarddayelec:this.dashboardelecdata[0],
        dashboarddayelecmonth:this.dashboardelecdata[1]
      };
    },
    components: { centreRight2Chart1 },
    mounted() {
      this.initChart();
    },
    methods: {
      openChartElec(){
        this.openChart = true
      },
      open(){
        this.$nextTick(() => {
          this.initChartDialog()
        })
      },
      initChart() {
        // 基于准备好的dom，初始化echarts实例
        this.chart = this.echarts.init(document.getElementById('peakToValley'))
        const dateDay = [];
        const dateNum = [];
        for (let i = 0; i < this.latest30DayData.length; i++) {
          dateDay[i] = this.latest30DayData[i].pullDate.toString().substr(5, 5);
          dateNum[i] = this.latest30DayData[i].elecDiff;
        }
        dateDay.reverse();
        dateNum.reverse();
        this.chart.setOption({
          /* 周围边距 */
          grid: {
            left: '3%',
            right: '3%',
            bottom: '1%',
            top: '20%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: [
            {
              type: 'category',
              // data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
              data:dateDay,
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                color: '#ffffff'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: 'Unit:(kW·h)',
              axisLabel: {
                color: '#ffffff'
              },
              nameTextStyle: {
                color: '#ffffff'
              }
            }
          ],
          series: [
            {
              name: 'Direct',
              type: 'bar',
              barWidth: '60%',
              markPoint: {
                data: [
                  { type: 'max', name: 'Max' },
                  { type: 'min', name: 'Min' }
                ]
              },
              // data: [10, 52, 20, 33, 30, 30, -34, 10, 33, 20, 33, 30, 30, -13, 10, 12, 20, 33, 30, 30, -20, 10, 43, 20, 33, 30, 30, -20, 12, 45, -11]
              data:dateNum,
            }
          ]
        })
      },
      initChartDialog() {
        // 基于准备好的dom，初始化echarts实例
        this.chart1 = this.echarts.init(document.getElementById('peakToValleyDialog'))
        const dateDay = [];
        const dateNum = [];
        for (let i = 0; i < this.latest30DayData.length; i++) {
          dateDay[i] = this.latest30DayData[i].pullDate.toString().substr(5, 5);
          dateNum[i] = this.latest30DayData[i].elecDiff;
        }
        dateDay.reverse();
        dateNum.reverse();
        this.chart1.setOption({
          /* 周围边距 */
          grid: {
            left: '3%',
            right: '3%',
            bottom: '1%',
            top: '20%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: [
            {
              type: 'category',
              // data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
              data:dateDay,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: 'Unit:(kW·h)'
            }
          ],
          series: [
            {
              name: 'Direct',
              type: 'bar',
              barWidth: '60%',
              label: {
                show: true,
                position: 'top'
              },
              markPoint: {
                data: [
                  { type: 'max', name: 'Max' },
                  { type: 'min', name: 'Min' }
                ]
              },
              // data: [10, 52, 20, 33, 30, 30, -34, 10, 33, 20, 33, 30, 30, -13, 10, 12, 20, 33, 30, 30, -20, 10, 43, 20, 33, 30, 30, -20, 12, 45, -11]
              data:dateNum,
            }
          ]
        })
      },
    }
  };
</script>

<style lang="scss">
  .center-text{
    margin-left:40px;
  }
  #centreRight2 {
    padding: 0.0625rem;
    height: 5rem;
    min-width: 3.75rem;
    border-radius: 0.0625rem;
    .bg-color-black {
      padding: 0.0625rem;
      height: 5.2rem;
      border-radius: 0.125rem;
    }
    .text {
      color: #ffffff;
    }
    .body-box {
      border-radius: 0.125rem;
      overflow: hidden;
    }
  }
  .title-p{
    font-size: 16px;
    float: left;
  }
  .title-p2{
    margin-left:20px;
    color: #cfe5ea;
    font:30px/15px 'ds-digitalbold';
    float: left;
  }
  .fontElec {
    //width:100px;
    //margin-left: 0.3rem;
    //padding-top: 0.25rem;
    //color: #cfe5ea;
    //font:30px/15px 'ds-digitalbold';
    //text-align:center;
  }
</style>
