<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="18" :style="{ marginBottom: '12px' }">
        <a-row :gutter="24">
          <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '12px', padding: '0px 0px 0px 12px' }">
            <a-card
              :body-style="{ padding: '10px 8px 8px' }"
              :bordered="false"
              style="background: linear-gradient(45deg, #8897f5, #9eaafd)"
            >
              <div class="chart-card-header">
                <div class="meta">
                  <span class="chart-card-title">电站数量</span>
                </div>
                <div class="total">
                  <span>2 个</span>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '12px', padding: '0px 0px 0px 12px' }">
            <a-card
              :body-style="{ padding: '10px 8px 8px' }"
              :bordered="false"
              style="background: linear-gradient(45deg, #c67ffd, #d9a0fd)"
            >
              <div class="chart-card-header">
                <div class="meta">
                  <span class="chart-card-title">电站装机容量</span>
                </div>
                <div class="total">
                  <span>{{elecdetail.fInstalledCapacity}} kW</span>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '12px' }">
            <a-card
              :body-style="{ padding: '10px 8px 8px' }"
              :bordered="false"
              style="background: linear-gradient(45deg, #07b59d, #09d5b8)"
            >
              <div class="chart-card-header">
                <div class="meta">
                  <span class="chart-card-title">当前发电功率</span>
                </div>
                <div class="total">
                  <span>{{elecdetail.realGeneratingPower}} kwh</span>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :sm="24" :md="12" :xl="24">
            <div id="map" style="width: 100%; height: 775px"></div>
          </a-col>
        </a-row>
      </a-col>

      <a-col :sm="24" :md="12" :xl="6" :style="{ padding: '0px 12px 0px 0px' }">
        <a-row>
          <a-col :span="24">
            <a-card :loading="loading" :body-style="{ padding: '10px 8px 8px' }" :bordered="false">
              <span class="head-title">发电量信息</span>
              <a-row>
                <a-col :span="8">
                  <div class="head-info" :class="center && 'center'">
                    <span>日发电量</span>
                    <p>{{elecdetail.powerByDay}} kW·h</p>
                  </div>
                </a-col>
                <a-col :span="8">
                  <div class="head-info" :class="center && 'center'">
                    <span>月发电量</span>
                    <p>{{elecdetail.powerByMonth}} kW·h</p>
                  </div>
                </a-col>
                <a-col :span="8">
                  <div class="head-info" :class="center && 'center'">
                    <span>年发电量</span>
                    <p>{{elecdetail.powerByYear}} kW·h</p>
                  </div>
                </a-col>
              </a-row>
              <a-divider style="margin: 8px 0" />
              <span class="head-title">收益信息</span>
              <a-row>
                <a-col :span="8">
                  <div class="head-info" :class="center && 'center'">
                    <span>日收益</span>
                    <p>{{elecdetail.powerByDayProfit}} 元</p>
                  </div>
                </a-col>
                <a-col :span="8">
                  <div class="head-info" :class="center && 'center'">
                    <span>日收益</span>
                    <p>{{elecdetail.powerByMonthProfit}} 元</p>
                  </div>
                </a-col>
                <a-col :span="8">
                  <div class="head-info" :class="center && 'center'">
                    <span>年收益</span>
                    <p>{{elecdetail.powerByYearProfit}} 元</p>
                  </div>
                </a-col>
              </a-row>
            </a-card>
          </a-col>
        </a-row>
        <a-row>
          <a-card
            :loading="loading"
            :body-style="{ padding: '10px 8px 8px' }"
            :bordered="false"
            title="当年社会效益"
            style="margin-top: 12px"
          >
            <div class="chart-card-header">
              <div class="societyTree">
                <div class="societyTreeFont Cleft">
                  <span class="treeF">节约标煤</span><br />
                  <span class="treeF2">{{elecdetail.coalAmount}} t</span>
                </div>
                <div class="societyTreeFont Cright">
                  <span class="treeF">减少二氧化碳排放</span><br />
                  <span class="treeF2">{{elecdetail.co2Amount}} t</span>
                </div>
              </div>
            </div>
          </a-card>
        </a-row>
        <a-row>
          <a-card
            :body-style="{ padding: '0px 8px 8px' }"
            :bordered="false"
            title="年发电量"
            style="margin-top: 12px;height:300px;"
          >
            <div class="totalEle-trend" ref="yearElec"></div>
          </a-card>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { httpAction, getAction } from '@/api/manage'
import { pvdata } from '../pvdata';

export default {
  name: 'pvDashboard',
  components: {},
  data() {
    return {
        description: '光伏综合看板',
      loading: true,
      center: null,
      elecdetail: {},
      yearElecList: {}
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  },
  mounted() {
    this.initMap()
    this.$nextTick(() => {
    setTimeout(() => {
      this.getTest();
    }, 1000)
      // this.getEnergyoverview()
    })
  },
  methods: {
    getTest() {
      var listData = pvdata.pvDashboardData;
      console.log(listData)
      this.elecdetail = listData.elecdetail;
      this.yearElecList = listData.yearElecList;
      
      this.initChart();
    },
    initMap() {
      // 百度地图API功能
      var map = new BMap.Map('map') // 创建Map实例
      map.centerAndZoom(new BMap.Point(121.455333, 37.471718), 15) // 初始化地图,设置中心点坐标和地图级别
      //添加地图类型控件
      map.addControl(
        new BMap.MapTypeControl({
          mapTypes: [BMAP_NORMAL_MAP],
        })
      )
      map.setCurrentCity('烟台') // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
    },
    initChart() {
      var _this = this;
      var chartDom = _this.$refs.yearElec;
      var myChart = echarts.init(chartDom);
      var option

      option = {
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        },
        yAxis: {
          type: 'value',
          name: '电量(kW·h)',
        },
        series: [
          {
            data: _this.yearElecList,
            type: 'bar',
          },
        ],
      }

      option && myChart.setOption(option);
      
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
  },
}
</script>

<style lang="less" scoped>
.chart-card-header {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 50px;

  .meta {
    position: relative;
    overflow: hidden;
    //   width: 100%;
    color: #ffffff;
    font-size: 20px;
    line-height: 38px;
    float: left;
  }
}

.chart-card-action {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}

.chart-card-footer {
  border-top: 1px solid #e8e8e8;
  padding-top: 9px;
  margin-top: 8px;

  > * {
    position: relative;
  }

  .field {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }
}

.chart-card-content {
  margin-bottom: 12px;
  position: relative;
  height: 46px;
  width: 100%;

  .content-fix {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }
}

.total {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
  color: #ffffff;
  // margin-top: 4px;
  margin-bottom: 0;
  font-size: 30px;
  line-height: 38px;
  height: 38px;
  float: right;
}
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: center;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
  .bm-view {
    width: 100%;
    height: 300px;
  }
}
.head-title {
  font-size: 18px;
}
.societyTree {
  background-image: url(../../../../assets/societyTree_light.png);
  background-repeat: no-repeat;
  background-size: 75%;
  height: 190px;
  background-position: 50% 0;

  .societyTreeFont {
    position: absolute;
    font-size: small;
    text-align: center;
    .treeF {
      color: #989c9f !important;
    }
    .treeF2 {
      color: #333 !important;
    }
  }
  .Cleft {
    top: 74%;
    left: 22%;
  }
  .Cright {
    top: 62%;
    left: 46%;
    font-size: 14px;
  }
}

.totalEle-trend {
  height: 260px;
}
</style>