<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <Area @click="handleNodeClick" ref="area" class="box"></Area>
      </el-form-item>

      <el-form-item>
        <Timeinterval @time="time" ></Timeinterval>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="alarmdetails"
          >查询</el-button
        >
        <el-button type="primary" icon="el-icon-download" @click="dc"
          >导出</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="text" @click="closeHandle"
          >条件筛选<i
            :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"
          ></i
        ></el-button>
      </el-form-item>
    </el-form>

    <div class="container" id="container">
      <i @click="closeHandle" class="el-icon-circle-close coles"></i>
      <el-form :inline="true" label-width="110px">
        <el-form-item label="告警类型:" class="box1">
          <el-select
            v-model.trim="form.alarmType"
            placeholder="请选择"
            clearable
            multiple
            collapse-tags
          >
            <el-option
              v-for="item in notify"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="监测点类别:" class="box1">
          <el-select
            v-model="form.monitorSort"
            clearable
            multiple
            collapse-tags
            placeholder="请选择"
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="监测点:" class="box">
          <el-input
            v-model.trim="form.valuePoint"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <el-row>
      <el-col :span="24">
        <vxe-table
          size="mini"
          :row-config="{ isCurrent: true, isHover: true }"
          border
          stripe
          ref="classification7"
          :data="alarmdetailsData"
          :height="height"
          style="width: 100%"
          v-loading="isLoading"
          header-cell-class-name="table_header"
          :cell-style="cellstyle"
        >
          <template v-for="(item, index) in tableHeaderAlarmdetails">
            <vxe-table-colgroup
              :field="item.prop"
              :title="item.label"
              :key="index"
              :min-width="item.width"
              show-overflow
              align="center"
            >
            </vxe-table-colgroup>
          </template>
        </vxe-table>
        <el-pagination
          background
          align="right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 30, 40, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="alarmdetailsData.length"
          class="mt10"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Area from "@/views/components/Area/Area.vue";
import Timeinterval from "./AlarmStatistics/Timeslot.vue";
import { getAlarmDetailList } from "@/api/Distributionnetwork-analysis/IndicatorAlarmStatistics/IndicatorAlarmStatistics";
import { dicData } from "@/assets/commjs/dictypeData";
export default {
  components: { Area, Timeinterval },
  data() {
    return {
      id: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
      kai: true,
      start: "",
      end: "",
      vh: "",
      height: null,
      isLoading: false,
      view:false,
      form: {
        alarmType: "", //告警类型
        monitorSort: "", //监测点类别
        valuePoint: "", //监测点
      },
      //监测点类别数据
      typeList: [],

      //告警类型
      notify: [],

      tableHeaderAlarmdetails: [
        { prop: "orgName", label: "单位", width: 160 },
        { prop: "powerName", label: "所属变电站", width: 100 },
        { prop: "powerDistributionAreaName", label: "所属台区", width: 100 },
        { prop: "powerClientName", label: "用户名称", width: 100 },
        { prop: "measurementPointName", label: "监测点名称", width: 100 },
        { prop: "dataDate", label: "时间", width: 100 },
        { prop: "alarmInfo", label: "告警描述", width: 100 },
        { prop: "alarmType", label: "告警类型", width: 100 },
        { prop: "voltageLevel", label: "监测点电压等级(kV)", width: 140 },
        { prop: "monitorSort", label: "监测点类别", width: 100 },
      ],
      alarmdetailsData: [],
      device: "",
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 20, // 每页的数据条数
      fvh: "",
    };
  },
  created() {
    this.getclassificationData();
  },
  mounted() {
    
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.device = window.devicePixelRatio;
    this.height = window.sessionStorage.getItem("appheight") - 170;
          
        },
    dc() {
      this.$refs.classification7.exportData({
        filename: "export1", // 文件名字
        sheetName: "Sheet1",
        type: "xlsx", //导出文件类型 xlsx 和 csv
        useStyle: true,
        isFooter: true,
        data: this.alarmdetailsData, // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$columnIndex === 0 ) //   // 0是复选框 不导出 // }
      });
    },
    time(val) {
      (this.start = val[0]), (this.end = val[1]);
      this.type = val[2];
      if (this.kai) {
        this.alarmdetails();
      }
    },
    //获取类型
    getclassificationData() {
      //监测点类别
      var code = "Line_Sort";
      this.typeList = dicData(code, []);
      //告警类型
      var code1 = "alarm_Type";
      this.notify = dicData(code1, []);
    },

    //获取主网运行指标统计数据
    alarmdetails() {
      this.isLoading = true;
      getAlarmDetailList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        alarmType: this.form.alarmType.toString(),
        endTime: this.end,
        startTime: this.start,
        id: this.id,
        monitorName: this.form.valuePoint,
        monitorSort: this.form.monitorSort.toString(),
      }).then((res) => {
        this.total = res.data.total;
        let a = dicData("Dev_Voltage", []);
        // console.log(this.notify,'ppoop')
        res.data.records.forEach((i) => {
          this.notify.forEach((l) => {
            if (l.id == i.alarmType) {
              i.alarmType = l.label;
            }
          });
          this.typeList.forEach((l) => {
            if (l.id == i.monitorSort) {
              i.monitorSort = l.label;
            }
          });
          a.forEach((l) => {
            if (l.id == i.voltageLevel) {
              i.voltageLevel = l.label;
            }
          });
        });

        this.isLoading = false;
        this.alarmdetailsData = res.data.records;
      });
    },
    // 切换选项
    handleNodeClick(data) {
      this.id = data.id;
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val;
      this.alarmdetails();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.alarmdetails();
    },
    closeHandle() {
      if (this.view) {
        this.view = false;
      } else {
        this.view = true;
      }
      //console.log('关闭和展开');
      const dom = document.getElementById("container");
      const closeDom = document.getElementsByClassName("close")[0];
      if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
        dom.className = "container expend";
      } else {
        dom.className = "container close-container";
      }
    },
    cellstyle(row) {
      // console.log(row);
      if (
        row.row.monitoringPoint == "Ⅱ类监测点" ||
        row.row.monitoringPoint == "Ⅲ类监测点"
      ) {
        row.row.substation = "/";
      }
      if (
        row.row.monitoringPoint == "Ⅰ类监测点" ||
        row.row.monitoringPoint == "Ⅲ类监测点"
      ) {
        row.row.stationArea = "/";
      }
      if (
        row.row.monitoringPoint == "Ⅰ类监测点" ||
        row.row.monitoringPoint == "Ⅱ类监测点"
      ) {
        row.row.userName = "/";
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../../styles/comStyle.less");
.container {
  /* margin: auto; */
  top: 0px;
  right: 0;
  width: 40%;
  height: 0px;
  z-index: 2000;
  position: absolute;
  background-color: #e4e7ebb9;
  overflow: auto;
  scroll-behavior: smooth;
  -radius: 20px;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: block;
}
.expend {
  animation: expend ease 5s forwards;
}
.close-container {
  animation: no-expend ease 1s forwards;
}
@keyframes expend {
  from {
    top: 0px;
    height: auto;
  }
  to {
    height: auto;
    top: 0px;
  }
}
@keyframes no-expend {
  from {
    height: 20%;
    top: 0px;
  }
  to {
    top: 0px;
    height: 0px;
  }
}
.coles {
  position: absolute;
  right: 0;
  font-size: 20px;
  cursor: pointer;
}
</style>
