<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 :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <DeviceWaring />
      </el-col>
      <el-col :span="12">
        <LineChartBlock title="历史告警变化" :opt-cfg="devcWarningHis">
          <template v-slot:filters>
            <SwitchTag
                :ds="[{val: 'day', text: '按日'},{val: 'month', text: '按月'},{val: 'year', text: '按年'}]"
                :defTag="{val: 'day'}"
                :tagClick="onSwitchTagClick"
            />
          </template>
        </LineChartBlock>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <BlockTable title="实时告警" :table-data="realTimeTableData">
          <template v-slot:columns>
            <el-table-column
                type="index"
                label="序号"
                align="center"
            />
            <el-table-column
                prop="subSystem"
                label="子系统"
                align="center"
            />
            <el-table-column
                prop="devcName"
                label="设备名称"
                align="center"
            />
            <el-table-column
                prop="warnDes"
                label="描述"
                align="center"
            />
            <el-table-column
                label="操作"
                align="center"
            >
              <template v-slot:default="scope">
                <el-button
                    type="text"
                    size="mini"

                    @click="handleEdit(scope.row)"
                >
                  待确认
                </el-button>
              </template>
            </el-table-column>
          </template>
        </BlockTable>
      </el-col>
      <el-col :span="12">
        <BlockTable title="告警统计" :table-data="alarmTableData">
          <template v-slot:columns>
            <el-table-column
                type="index"
                label="序号"
                align="center"
            />
            <el-table-column
                prop="warnType"
                label="告警部位"
                align="center"
            />
            <el-table-column
                prop="warnFacsType"
                label="告警能源类型"
                align="center"
            />
            <el-table-column
                prop="date"
                label="日期"
                align="center"
            />

          </template>
        </BlockTable>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { ApiCode } from '@/api/apiEmums';
import { get } from '@/api/commonApi';
import Block from '@/components/Block/block.vue';
import BlockTable from '@/components/Block/BlockTable/index.vue';
import BarChartBlock from '@/components/Block/charts/BarChartBlock.vue';
import PieChartBlock from '@/components/Block/charts/PieChartBlock.vue';
import { DateTool } from '@/utils/DateTool';
import DeviceWaring from '@/views/analysis/device/DevcWarning/index.vue';
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: {
    BlockTable,
    DeviceWaring,
    Block,
    BarChartBlock,
    PieChartBlock,
    LineChartBlock,
    SwitchTag,
  },
  data() {
    return {
      areaTag: [],
      defArea: {},
      devcWarningHis: {
        unit: '  ',
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data:  ["一月","二月","三月","四月","五月","六月","七月"],
        },
        series:  [
          {
            name: '紧急',
            type: 'line',
            data: [122, 142, 111, 134, 90, 30, 110],
          },
          {
            name: '重要',
            type: 'line',
            data: [220, 152, 171, 214, 190, 230, 210],
          },
          {
            name: '次要',
            type: 'line',
            data: [120, 162, 161, 134, 260, 130, 200],
          },
          {
            name: '警告',
            type: 'line',
            data: [20, 182, 131, 144, 130, 140, 90],
          }
        ]
      },

      alarmTableData: [
        {
          warnType: '研发部照明',
          warnFacsType: '电',
          date: '2024年6月1日 12:00:00',
        },
        {
          warnType: '研发部照明',
          warnFacsType: '电',
          date: '2024年6月1日 12:00:00',
        },
      ],
      realTimeTableData: [
        {
          subSystem: '安防',
          devcName: '东围墙50',
          warnDes: '设备故障',
        },
        {
          subSystem: '安防',
          devcName: '东围墙50',
          warnDes: '设备故障',
        },
      ],
    };
  },
  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" />
