<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">
        <BarChartBlock
            title="设备数量统计"
            :opt-cfg="devcNum"
        />
      </el-col>
      <el-col :span="12">
        <PieChartBlock title="设备状态统计" :opt-cfg="devcStat"></PieChartBlock>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <PieChartBlock title="供应商占比" :opt-cfg="supplyerIndex"></PieChartBlock>
      </el-col>
      <el-col :span="12">
        <LineChartBlock title="故障发生情况" :opt-cfg="devcFault" />
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { ApiCode } from '@/api/apiEmums';
import { get } from '@/api/commonApi';
import BarChartBlock from '@/components/Block/charts/BarChartBlock.vue';
import PieChartBlock from '@/components/Block/charts/PieChartBlock.vue';
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: {
    BarChartBlock,
    PieChartBlock,
    LineChartBlock,
    SwitchTag,
  },
  data() {
    return {
      areaTag: [],
      defArea: {},
      devcStat: {
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            data: [
              {
                value: 8,
                name: '故障',
              },
              {
                value: 75,
                name: '运行',
              },
              {
                value: 2,
                name: '未运行',
              },
            ],
          },
        ],
      },
      supplyerIndex: {
        series: [
          {
            type: 'pie',
            radius: ['0%', '70%'],
            data: [
              {
                value: 7,
                name: '西门子',
              },
              {
                value: 6,
                name: '施耐德',
              },
              {
                value: 9,
                name: '通用电器',
              },
              {
                value: 14,
                name: '飞利浦',
              },
              {
                value: 18,
                name: '霍尼韦尔',
              },
            ],
          },
        ],
      },
      devcNum: {
        categories: ['空调', '灯具', '杀菌设备', '出纳机', '感应器'],
        series: [
          {
            name: '故障',
            data: [1, 0, 0, 1, 1],
          },
          {
            name: '运行',
            data: [20, 109, 20, 20, 10],
          },
          {
            name: '未运行',
            data: [1, 2, 4, 0, 1],
          },
        ],
      },
      devcFault: {
        unit:"  ",
        xAxis: {
          type: 'category',
          data: [
            '1月',
            '2月',
            '03月',
            '04月',
            '05月',
            '06月',
            '07月',
            '08月',
          ],
        },
        series: [
          {
            data: [
              73, 57, 37, 40, 37, 40, 73, 57,
            ],
            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" />
