<template>
  <div class="parameter">
    <div class="parameter-btn">
      <el-button
        class="ml10"
        type="primary"
        icon="el-icon-refresh-right"
        @click="getInit"
        >刷新</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="isQuery = !isQuery"
        >查询</el-button
      >
      <el-button
        class="ml10"
        type="primary"
        icon="el-icon-refresh-right"
        @click="handleExportExcel"
        >导出</el-button
      >
      <el-button
        class="ml10"
        type="primary"
        icon="el-icon-refresh-right"
        @click="handlePrint"
        v-print="printoption"
        >打印</el-button
      >
    </div>
    <el-form
      v-show="isQuery"
      class="search-form"
      ref="form"
      :model="form"
      :inline="true"
      size="mini"
    >
      <el-form-item label="告警对象">
        <el-input
          v-model="form.alarmTarget"
          clearable
          placeholder="请输入告警对象"
        ></el-input>
      </el-form-item>
      <el-form-item label="告警类型">
        <el-select
          v-model="form.alarmType"
          placeholder="请选择告警类型"
          clearable
        >
          <el-option
            v-for="(val, key) in alarmType"
            :key="key"
            :label="val"
            :value="key"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="告警级别">
        <el-select
          v-model="form.alarmLevel"
          placeholder="请选择告警级别"
          clearable
        >
          <el-option
            v-for="(val, key) in alarmLeval"
            :key="key"
            :label="val"
            :value="key"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="告警状态">
        <el-select
          v-model="form.confirmStatus"
          placeholder="请选择告警类型"
          clearable
        >
          <el-option
            v-for="(val, key) in confirmStatus"
            :key="key"
            :label="val"
            :value="key"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="告警产生时间">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="toSearch">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div id="print">
      <div class="both">
        <div class="card">
          <div class="nav-title">告警状态分布统计</div>
          <div style="display: flex; justify-content: center">
            <div id="chart1" style="width: 400px; height: 300px"></div>
          </div>
        </div>
        <div class="card">
          <div class="nav-title">告警级别分布</div>
          <div style="display: flex; justify-content: center">
            <div id="chart2" style="width: 400px; height: 300px"></div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="nav-title">告警数量统计</div>
        <div style="display: flex; justify-content: center">
          <div id="chart3" style="width: 800px; height: 300px"></div>
        </div>
      </div>
      <div class="table">
        <el-table
          :data="tableData"
          :header-cell-style="{ background: '#EAF1FE', color: '#666666' }"
        >
          <el-table-column type="index" label="序号" align="center" />
          <el-table-column
            prop="siteName"
            label="告警基站名称"
            align="center"
          />
          <el-table-column
            prop="alarmTarget"
            label="告警对象名称"
            align="center"
          />
          <el-table-column prop="alarmType" label="告警类型" align="center">
            <template slot-scope="scope">
              {{ alarmType[scope.row.alarmType] }}
            </template>
          </el-table-column>
          <el-table-column prop="alarmLevel" label="告警级别" align="center">
            <template slot-scope="scope">
              {{ alarmLeval[scope.row.alarmLevel] }}
            </template>
          </el-table-column>
          <el-table-column prop="confirmStatus" label="告警状态" align="center">
            <template slot-scope="scope">
              {{ confirmStatus[scope.row.confirmStatus] }}
            </template>
          </el-table-column>

          <el-table-column
            prop="creationTime"
            label="告警产生时间"
            align="center"
          />
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="confirmAlarm(scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          :limit="params.size"
          :page="params.current"
          :total="total"
          class="pagination"
          @pagination="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import printToPdf from "./printToPdf.js";
import { alarmLeval, alarmType, confirmStatus } from "@/const";
import {
  alarmConfirmStatusStatistics,
  alarmLevelStatistics,
  alarmLevelCountStatistics,
  selectPage,
  exportExcel,
} from "../api";
import download from "@/utils/download";
export default {
  data() {
    return {
      printoption: {
        id: "print",
        popTitle: "&nbsp;", // 打印配置页上方的标题
        extraHead: "", // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        preview: false, // 是否启动预览模式，默认是false
        //previewTitle: '预览的标题', // 打印预览的标题
        //previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
        standard: "",
        extraCss: "./index.css",
      },
      form: {},
      params: {
        current: 1,
        size: 10,
      },
      total: 10,
      dateRange: [],
      value: "",
      alarmLeval,
      alarmType,
      confirmStatus,
      options: [],
      myChart: {
        chart1: null,
        chart2: null,
        chart3: null,
      },
      tableData: [],
      isQuery: false,
    };
  },
  mounted() {
    this.handleInIt();
  },
  methods: {
    handleExportExcel() {
      exportExcel({}).then((res) => {
        download(res, "vnd.ms-excel", `告警信息统计.xls`);
      });
    },
    handleInIt() {
      this.handlealArmConfirmStatusStatistics();
      this.handlealArmLevelStatistics();
      this.handleAlarmLevelCountStatistics();
      this.handleSelectPage();
    },
    async handlealArmConfirmStatusStatistics() {
      let res = await alarmConfirmStatusStatistics(this.form);
      let data = res.map((item) => {
        return {
          name: confirmStatus[item.confirmStatus],
          value: item.alarmCount,
        };
      });

      if (this.myChart.chart1 != null) {
        this.myChart.chart1.dispose();
      }

      let chartDom = document.getElementById("chart1");
      this.myChart.chart1 = echarts.init(chartDom, null, { renderer: "svg" });
      let option;
      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          left: "right",
        },
        series: [
          {
            name: "告警状态",
            type: "pie",
            radius: "50%",
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      option && this.myChart.chart1.setOption(option);
    },
    async handlealArmLevelStatistics() {
      let res = await alarmLevelStatistics(this.form);
      let data = res.map((item) => {
        return {
          name: alarmLeval[item.alarmLevel],
          value: item.alarmCount,
        };
      });
      if (this.myChart.chart2 != null) {
        this.myChart.chart2.dispose();
      }
      let chartDom = document.getElementById("chart2");
      this.myChart.chart2 = echarts.init(chartDom, null, { renderer: "svg" });
      let option;
      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "告警级别",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };
      option && this.myChart.chart2.setOption(option);
    },
    async handleAlarmLevelCountStatistics() {
      let res = await alarmLevelCountStatistics(this.form);
      let xData = [...new Set(res.map((item) => item.alarmDate))];
      let t1 = res
        .filter((item) => item.confirmStatus == 0)
        .map((item) => {
          return item.alarmCount;
        });
      let t2 = res
        .filter((item) => item.confirmStatus == 1)
        .map((item) => {
          return item.alarmCount;
        });
      let t3 = res
        .filter((item) => item.confirmStatus == 2)
        .map((item) => {
          return item.alarmCount;
        });
      let t4 = t1.map((value, index) => {
        return value + (t2[index] || 0) + (t3[index] || 0);
      });
      if (this.myChart.chart3 != null) {
        this.myChart.chart3.dispose();
      }
      let chartDom = document.getElementById("chart3");
      this.myChart.chart3 = echarts.init(chartDom, null, { renderer: "svg" });
      let option;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          // feature: {
          //   dataView: { show: true, readOnly: false },
          //   magicType: { show: true, type: ["line", "bar"] },
          //   restore: { show: true },
          //   saveAsImage: { show: true },
          // },
        },
        legend: {
          data: ["紧急告警", "重要告警", "一般告警", "告警趋势"],
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位：条",
            min: 0,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "紧急告警",
            type: "bar",
            data: t3,
          },
          {
            name: "重要告警",
            type: "bar",
            data: t2,
          },
          {
            name: "一般告警",
            type: "bar",
            data: t1,
          },
          {
            name: "告警趋势",
            type: "line",
            smooth: true,
            data: t4,
          },
        ],
      };
      option && this.myChart.chart3.setOption(option);
    },
    async handleSelectPage() {
      let data = {
        ...this.form,
        ...this.params,
      };
      let res = await selectPage(data);
      this.tableData = res.records;
      this.total = res.total;
      console.log(res);
    },
    // 分页更改
    handlePageChange(pageData) {
      this.params.size = pageData.size;
      this.params.current = pageData.page;
      this.handleInIt();
    },
    getInit() {},
    reset() {
      this.dateRange = [];
      this.form = {};
    },
    toSearch() {
      this.form.startUploadTime = this.dateRange[0];
      this.form.endUploadTime = this.dateRange[1];
      // this.$emit("search", this.form);
      this.handleInIt();
    },
    handlePrint() {},
  },
};
</script>


<style lang="scss" scoped>

.nav-title {
  color: #02a7f0;
  font-size: 20px;
  position: relative;
  padding-left: 16px;
  font-weight: bold;
  line-height: 28px;
}
.nav-title::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 1px;
  width: 5px;
  height: 100%;
  background-color: #02a7f0;
  border-radius: 4px;
}
.parameter {
  .parameter-btn {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
  }
  .search-form {
    padding: 10px;
    background-color: #eaf1fe;
    margin-bottom: 20px;
    border-radius: 8px;
    .el-form-item--mini.el-form-item,
    .el-form-item--small.el-form-item {
      margin-bottom: 0;
    }
  }
}
#print {
  width: 100%;
  .both {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    .card {
      width: 40%;
      flex: 1;
    }
  }
  .card {
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #d7d7d7;
  }
  .table {
    // width: 100%;
    ::v-deep table {
      table-layout: auto;
    }
    ::v-deep .el-table__header-wrapper .el-table__header {
      width: 100% !important;
    }
    ::v-deep .el-table__body-wrapper .el-table__body {
      width: 100% !important;
    }
  }
}
</style>