<template>
  <div class="index-container">
    <el-container>
      <el-main>
        <el-card style="margin-top: 0px;">
          <template #header>
            <div class="card-header">
              <span>发电趋势图</span>
              <div class="right">
                <el-radio-group class="fl" v-model="trendType2" size="mini" @change="handleType2">
                  <el-radio-button label="day">按日</el-radio-button>
                  <el-radio-button label="week">近7日</el-radio-button>
                  <el-radio-button label="month">按月</el-radio-button>
                  <el-radio-button label="year">按年</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </template>
          <div id="trendChar" style="width: 100%; height: 220px"></div>
          <!-- <v-chart :options="options" ref="trendChar"style="width: 100%; height: 230px"></v-chart> -->
        </el-card>

        <el-row :gutter="10" style="margin-top: 10px;">
          <el-col :span="6">
            <el-card class="data-card">
              <div class="data-content">
                <div class="data-text">
                  <div class="data-item">
                    <div class="data-title">在线电站数 (个)</div>
                    <div class="data-value">{{ homeView.onlineCnt }}</div>
                  </div>
                  <div class="data-item">
                    <div class="data-title">总电站数 (个)</div>
                    <div class="data-value">{{ homeView.onlineCnt + homeView.offlineCnt + homeView.faultCnt }}</div>
                  </div>
                </div>
                <div class="data-icon">
                  <img src="/img/icon1.png" alt="icon" class="icon-image" />
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="data-card">
              <div class="data-content">
                <div class="data-text">
                  <div class="data-item">
                    <div class="data-title">当日发电 (万度)</div>
                    <div class="data-value">{{ (homeView.etd/10000).toFixed(2) }}</div>
                  </div>
                  <div class="data-item">
                    <div class="data-title">累计发电 (万度)</div>
                    <div class="data-value">{{ (homeView.eto/10000).toFixed(2) }}</div>
                  </div>
                </div>
                <div class="data-icon">
                  <img src="/img/icon2.png" alt="icon" class="icon-image" />
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="data-card">
              <div class="data-content">
                <div class="data-text">
                  <div class="data-item">
                    <div class="data-title">实时功率 (KW)</div>
                    <div class="data-value">{{ homeView.realPower }}</div>
                  </div>
                  <div class="data-item">
                    <div class="data-title">总装机功率 (KW)</div>
                    <div class="data-value">{{ homeView.totalPower }}</div>
                  </div>
                </div>
                <div class="data-icon">
                  <img src="/img/icon3.png" alt="icon" class="icon-image" />
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="data-card">
              <div class="data-content">
                <div class="data-text">
                  <div class="data-item">
                    <div class="data-title">等效植树 (棵)</div>
                    <div class="data-value">{{ homeView.treeCount.toFixed(2) }}</div>
                  </div>
                  <div class="data-item">
                    <div class="data-title">累计等效植树 (棵)</div>
                    <div class="data-value">{{ homeView.totalTreeCount.toFixed(2) }}</div>
                  </div>
                </div>
                <div class="data-icon">
                  <img src="/img/icon4.png" alt="icon" class="icon-image" />
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-card style="margin-top: 0px;">

          <template #header>
            <div class="card-header">
              <span>项目发电量（万度）</span>
              <div class="right">
                <el-radio-group class="fl" v-model="trendType" size="mini" @change="handleType">
                  <el-radio-button label="day">按日</el-radio-button>
                  <el-radio-button label="week">近7日</el-radio-button>
                  <el-radio-button label="month">按月</el-radio-button>
                  <el-radio-button label="year">按年</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </template>
          <div id="rankChar" style="width: 100%; height: 230px"></div>
          <!-- <v-chart :options="options" ref="trendChar"style="width: 100%; height: 230px"></v-chart> -->
        </el-card>

      </el-main>

      <el-aside width="400px" class="sidebar">
        <weather :stationId="999" :city="city"></weather>
        <el-card style="margin-top: 10px;">
          <div slot="header" class="sidebar-title">运维统计</div>
          <div class="sidebar-content" style="padding-left: 0; padding-right: 0;">
            <div id="warnChart" style="height:180px; flex: 1"></div>
          </div>
        </el-card>
      </el-aside>
    </el-container>
    <div id="mapContainer"></div>
  </div>
</template>

<script>
import { projectCompanyGenerationData, powerGenerationTrendsHome, staticsHomeOverview } from "@/api/nh/powerStation";
import AMapLoader from '@amap/amap-jsapi-loader'; //引入
import func from '@/utils/func';
import weather from '@/views/nh/components/weather.vue'
import * as echarts from 'echarts';
export default {
  components: { weather },
  data() {
    return {
      homeView: { "onlineCnt": 0, "offlineCnt": 0, "faultCnt": 0, "etd": 0, "eto": 0, "realPower": 0, "totalPower": 0, "treeCount": 0, "totalTreeCount": 0 },
      trendType: "week",
      trendType2: "week",
      time: "",
      rankChar: {}, //告警
      rankingData: {},
      warnChart: {},
      trendChar: {},
      trendData: {},
      dataZoomTrend: false, //是否显示缩放
      city: ""
    };
  },
  mounted() {
    this.rankChar = echarts.init(document.getElementById('rankChar'));
    this.warnChart = echarts.init(document.getElementById('warnChart'));
    this.trendChar = echarts.init(document.getElementById('trendChar'));
    this.initCharts();

    let that = this;

    AMapLoader.load({
      key: "727b25e7366ab5015225754e8ee00fef", //此处填入我们注册账号后获取的Key
      version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [''], //需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {
      // 确保window.AMap对象已经加载
      AMap.plugin('AMap.CitySearch', function () {
        var citySearch = new AMap.CitySearch()
        citySearch.getLocalCity(function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            // 查询成功，result即为当前所在城市信息
            console.log(result)
            that.city = result.city;
          }
        })
      })

    }).catch(e => {
      console.log(e)
    })

    this.inithomedata();
  },
  methods: {
    handleType2(e) {
      this.getPowerGenerationTrendsData();
    },
    handleType(e) {
      this.genProjectCompanyGeneration();
    },
    inithomedata() {
      staticsHomeOverview().then(res => {
        this.homeView = res.data.data;
        this.setWarnOptions(res.data.data);
      })
    },
    initCharts() {
      this.genProjectCompanyGeneration();
      this.getPowerGenerationTrendsData();
      //自动缩放图表
      window.addEventListener('resize', () => {
        if (this.resizeTimer) clearTimeout(this.resizeTimer);
        this.resizeTimer = setTimeout(() => {
          this.rankChar.resize();
          this.warnChart.resize();
          this.trendChar.resize();
        }, 10)
      })
    },
    genProjectCompanyGeneration() {
      projectCompanyGenerationData(this.trendType).then(res => {
        console.log(res.data.data)
        this.rankingData = res.data.data;
        this.setRankOptions();
      });
    },
    getPowerGenerationTrendsData() {
      powerGenerationTrendsHome(this.trendType2).then(res => {
        console.log(res.data.data)
        this.trendData = res.data.data;
        this.setTrendOptions();
      });
    },
    setRankOptions() {
      this.rankChar.setOption({
        tooltip: {
          trigger: 'item',
          formatter: function (param) {
            return "<span style=\"display:inline-block;margin-right:5px; background-color:#117fbc; border-radius:10px;width:10px;height:10px;\"></span>" + param.name + "：" + param.data + "(度)";
          }
        },
        grid: {
          left: 30,
          right: 30,
          bottom: 0,
          top: 30,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: { show: false },
          axisLine: {
            show: true,
          },
          axisLabel: { show: true, textStyle: { color: '#9b9fa2' } }
        },
        yAxis: {
          name: '项目公司',
          type: 'category',
          axisLine: {
            show: true,
          },
          axisLabel: {
            show: false,
            textStyle: { color: '#9b9fa2' },
          },
          // data: ['经营性租赁项目电站', '项目公司A', '项目公司B', '项目公司C', '合肥圆睿网络科技有限公司'],
          data: this.rankingData.xaxis
        },
        series: [
          {
            type: 'bar',
            barWidth: 10,
            barGap: 50,
            sort: true,
            data: func.zoomListNum(this.rankingData.yaxisForElectricity, 0.0001),
            // data: [100, 200, 300, 400, 500],
            label: {
              show: true,
              position: ['10', '-150%'],
              formatter: function (param) {
                return param.name + '（' + param.value + '万度）';
              },
              textStyle: {
                color: '#d1d1d1',
                fontWeight: 'normal',
                fontSize: 12,
                interval: 0, // 设置横坐标文字全部显示
                rotate: 30
              },
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                { offset: 0, color: '#117fbc' },
                { offset: 0.5, color: '#117fbc' },
                { offset: 1, color: '#e7f5fd' }
              ])
            },
          },
        ]
      })
    },
    //告警统计图
    setWarnOptions(warn) {
            this.warnChart.setOption({
              tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c}'
                },
                legend: {
                    orient: 'vertical',
                    left: 0,
                    data: [
                        { name: '待处理' },
                        { name: '处理中' },
                        { name: '已完成' }
                    ]
                },
                series: [
                    {
                       name: '告警数量',
                        type: 'pie',
												center: ['60%', '50%'],
                        data: [
                            { value: warn.alarmUnDeal, name: '待处理' },
                            { value: warn.alarmDealing, name: '处理中' },
                            { value: warn.alarmDealed, name: '已完成' },
                        ]
                    }
                ]
            })
        },
    //发电趋势/拆线图
    setTrendOptions() {
      console.log("setTrendOptions")
      let yAxis;
      yAxis = [
        {
          name: '发电量（万度）',
          type: 'value',
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true
          },
          axisLabel: { show: true, textStyle: { color: '#d9d9d9' } }, //左侧坐标文字
          splitLine: { show: false }, //横向线
        }
      ]

      this.trendChar.setOption({
        xAxis: {
          // name: '日期',
          data: this.trendData.xaxis,
          // data: ['1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00'],//按日
          boundaryGap: false,
          axisTick: {
            show: false
          },
          splitLine: { show: false },
          axisLabel: { show: true },
        },
        yAxis: yAxis,
        grid: {
          left: 50,
          right: 30,
          bottom: 30,
          top: 40,
          containLabel: true
        },
        dataZoom: [
          {
            show: this.dataZoomTrend,
            height: 15,
            xAxisIndex: [
              0
            ],
            filterMode: 'empty',
            bottom: '10',
            left: '80',
            right: '80',
            start: 0,
            end: 100,
            handleSize: '50%',
            handleStyle: {
              color: "#fff"
            },
            textStyle: {
              color: '#fff'
            },
            borderColor: '#1C2242'
          },
          {
            type: 'inside',
            show: this.dataZoomTrend,
            height: 10,
            start: 1,
            end: 35,
          }
        ],

        series: [
          {
            name: '发电量',
            smooth: true,
            type: 'bar',
            barMaxWidth: 50,
            unit: '个',
            data: func.zoomListNum(this.trendData.yaxisForElectricity, 0.0001),
            // data: [10,50,60,90,30,80,120,30],
            animationDuration: 1000,
            animationEasing: 'quadraticOut',
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: '{c}'
              }
            },
          },
          {
            name: '趋势线',
            type: 'line',
            data: func.zoomListNum(this.trendData.yaxisForElectricity, 0.0001),
            smooth: true,
            lineStyle: {
              color: '#add8e6', // 线条颜色
              width: 2, // 线条宽度
              type: 'dashed' // 设置为虚线
            }
          }
        ]
      })
    },
  }
};
</script>

<style lang="scss">
.index-container {
  padding: 0 0 0 10px;
}

.right {
  float: right;
}

.fl {
  float: left;
}

.sidebar {
  margin-left: 10px;
}

.sidebar-title {
  font-size: 16px;
  color: #606266;
}

.sidebar-content {
  padding: 10px;
}

.data-card {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.data-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.data-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.data-item {
  margin-bottom: 10px;
}

.data-title {
  font-size: 14px;
  color: #2773d6;
}

.data-value {
  font-size: 20px;
  font-weight: bold;
  color: #1e90ff;
}

.data-icon {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
}

.icon-image {
  width: 100%;
  height: 100%;
}
</style>
