<template>
  <div class="app-container power-index-content">
    <el-row type="flex" :gutter="20">
      <el-col :span="24">
        <div class="gl-filters">
          <SwitchTag
              :ds="areaTag"
              :def-tag="defArea"
              :tagClick="onSwitchTagClick"
          />
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <LineChartBlock
            title="发电量"
            :on-filter="getPvList"
            :opt-cfg="pvData"
        >
          <template v-slot:filters>
            <SwitchTag
                :ds="[{val: 'day', text: '按日'},{val: 'month', text: '按月'},{val: 'year', text: '按年'}]"
                :defTag="{val: 'day'}"
                :tagClick="getPvList"
            />
          </template>
        </LineChartBlock>
      </el-col>
      <el-col :span="12">
        <LineChartBlock
            title="发电功率"
            :on-filter="()=>{}"
            :opt-cfg="pvPower"
        >
          <template v-slot:filters>
            <SwitchTag
                :ds="[{val: 'day', text: '按日'},{val: 'month', text: '按月'},{val: 'year', text: '按年'}]"
                :defTag="{val: 'day'}"
                :tagClick="getPvList"
            />
          </template>
        </LineChartBlock>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <LineChartBlock title="发电效率" :on-filter="()=>{}" :opt-cfg="pvEff">
          <template v-slot:filters>
            <SwitchTag
                :ds="[{val: 'day', text: '按日'},{val: 'month', text: '按月'},{val: 'year', text: '按年'}]"
                :defTag="{val: 'day'}"
                :tagClick="getPvList"
            />
          </template>
        </LineChartBlock>
      </el-col>
      <el-col :span="12">
        <LineChartBlock title="近七天发电趋势分析" :on-filter="()=>{}" :opt-cfg="pvWeek">
          <template v-slot:filters>
            <SwitchTag
                :ds="[{val: 'day', text: '按日'},{val: 'month', text: '按月'},{val: 'year', text: '按年'}]"
                :defTag="{val: 'day'}"
                :tagClick="getPvList"
            />
          </template>
        </LineChartBlock>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { ApiCode } from '@/api/apiEmums';
import { get } from '@/api/commonApi';
import { DateTool } from '@/utils/DateTool';
import * as areaApi from '../../../api/basecfg/area';
import LineChartBlock from '../../../components/Block/charts/LineChartBlock.vue';
import SwitchTag from '../../../components/SwitchTag/index.vue';

export default {
  components: {
    LineChartBlock,
    SwitchTag,
  },
  data() {
    return {
      areaTag: [],
      defArea: {},
      pvData: {
        xAxis: {
          type: 'category',
          data: [],
        },
        series: [
          {
            data: [],
            type: 'line',
            areaStyle: {
              color: '#d7e4fc',
              emphasis: {
                color: '#6093f5',
              },
            },
          },
        ],
      },
      pvPower: {
        xAxis: {
          type: 'category',
          data: [
            '00:00',
            '01:00',
            '02:00',
            '03:00',
            '04:00',
            '05:00',
            '06:00',
            '07:00',
            '08:00',
            '09:00',
            '10:00',
            '11:00',
            '12:00',
            '13:00',
            '14:00',
            '15:00',
            '16:00',
            '17:00',
            '18:00',
            '19:00',
            '20:00',
            '21:00',
            '22:00',
            '23:00',
          ],
        },
        series: [
          {
            data: [
              735, 577, 377, 403, 377, 400, 239, 500, 550, 600, 800, 900, 991, 980,
              990, 600, 540, 500, 600, 700, 789, 790, 500, 450, 400,
            ],
            type: 'line',
            areaStyle: {
              color: '#d7e4fc',
              emphasis: {
                color: '#6093f5',
              },
            },
          },
        ],
      },
      pvEff: {
        xAxis: {
          type: 'category',
          data: [
            '00:00',
            '01:00',
            '02:00',
            '03:00',
            '04:00',
            '05:00',
            '06:00',
            '07:00',
            '08:00',
            '09:00',
            '10:00',
            '11:00',
            '12:00',
            '13:00',
            '14:00',
            '15:00',
            '16:00',
            '17:00',
            '18:00',
            '19:00',
            '20:00',
            '21:00',
            '22:00',
            '23:00',
          ],
        },
        series: [
          {
            data: [
              735, 577, 377, 403, 377, 400, 239, 500, 550, 600, 800, 900, 991, 980,
              990, 600, 540, 500, 600, 700, 789, 790, 500, 450, 400,
            ],
            type: 'line',
            areaStyle: {
              color: '#d7e4fc',
              emphasis: {
                color: '#6093f5',
              },
            },
          },
        ],
      },
      pvWeek: {
        xAxis: {
          type: 'category',
          data: [
            '08-01',
            '08-02',
            '08-03',
            '08-04',
            '08-05',
            '08-06',
          ],
        },
        series: [
          {
            data: [
              735, 577, 377, 403, 377, 400,
            ],
            type: 'line',
            areaStyle: {
              color: '#d7e4fc',
              emphasis: {
                color: '#6093f5',
              },
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.initData();
  },
  created() {
  },
  methods: {
    onSwitchTagClick(item) {
      console.log(item);
    },
    async initData() {
      const {
        rows,
        total,
      } = await areaApi.listArea({
        pageNum: 1,
        pageSize: 10,
      });
      if (rows.length > 0) {
        rows.forEach(item => {
          this.areaTag.push({
            val: item.areaCode,
            text: item.areaName,
          });
        });
        this.defArea = this.areaTag[0];
      }
      this.queryCharts();
    },
    queryCharts() {
      this.getPvList();
    },
    async getPvList() {
      const {
        data,
        code,
      } = await get('/prod/list/prod/this/day/index', {
        areaCode: this.defArea.val,
      });
      const result = {};
      if (ApiCode.SUCCESS !== code || !data || data.length < 1) {
        return null;
      }
      const xAxis = DateTool.getTime(60);
      data.forEach(item => {
        const {
          elecQuantity,
          timeIndex,
        } = item;
        result[timeIndex] = {
          elecQuantity,
        };
      });
      const chartData = [];
      xAxis.forEach((item, index) => {
        const timeIndex = index + 1;
        if (result[timeIndex]) {
          chartData.push(result[timeIndex].elecQuantity);
        } else {
          chartData.push(0);
        }
      });
      this.pvData.xAxis.data = xAxis;
      this.pvData.series[0].data = chartData;
    },
  }
};
</script>
<style src="./index.scss" lang="scss" />
