<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 :interval="1" ref="interval"></Timeinterval>
      </el-form-item>

      <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-item>
        <el-button type="primary" icon="el-icon-search" @click="researchFn"
          >查询</el-button
        >
        <el-button type="primary" icon="el-icon-download">导出</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="24">
        <el-table
          stripe
          :data="
            alarmdetailsData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          :height="height"
          border
          style="width: 100%"
          v-loading="isLoading"
          header-cell-class-name="table_header"
          :cell-style="cellstyle"
        >
          <template v-for="(item, index) in tableHeaderAlarmdetails">
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              :key="index"
              :width="item.width"
            >
            </el-table-column>
          </template>
        </el-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 "../../../components/Timeinterval.vue";
import { getAlarmdetailsData } from "@/api/Distributionnetwork-analysis/IndicatorAlarmStatistics/IndicatorAlarmStatistics";
import { dicData } from "@/assets/commjs/dictypeData";
export default {
  components: { Area, Timeinterval },
  data() {
    return {
      vh: "",
      height: null,
      isLoading: false,
      form: {
        alarmType: "", //告警类型
        monitorSort: "", //监测点类别
        valuePoint: "", //监测点
      },

      //监测点类别数据
      typeList: [],

      //告警类型
      notify: [],

      tableHeaderAlarmdetails: [
        { prop: "company", label: "单位", width: 160 },
        { prop: "substation", label: "所属变电站" },
        { prop: "stationArea", label: "所属台区" },
        { prop: "userName", label: "用户名称" },
        { prop: "monitoringPoint", label: "监测点类别" },
        { prop: "voltageLevel", label: "监测点电压等级(kV)" },
        { prop: "monitoringName", label: "监测点名称" },
        { prop: "hour", label: "时间" },
        { prop: "typologic", label: "告警类型" },
        { prop: "describe", label: "告警描述", width: 250 },
      ],
      alarmdetailsData: [],
      device: "",
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 18, // 每页的数据条数
    };
  },
  created() {
    this.alarmdetails();
    this.getclassificationData();
  },
  mounted() {
    this.device = window.devicePixelRatio;
    this.height = document.getElementById("app-main-in").offsetHeight - 165;
  },
  computed: {
    //计算表格高度
    // height(){
    //   return '100vh'- this.$refs.form.offsetHeight +259;
    // }
  },
  methods: {
    //获取类型
    getclassificationData() {
      //监测点类别
      var code = "Line_Sort";
      this.typeList = dicData(code, []);
      //告警类型
      var code1 = "alarm_Type";
      this.notify = dicData(code1, []);
    },

    //获取主网运行指标统计数据
    alarmdetails() {
      this.isLoading = true;
      getAlarmdetailsData().then((res) => {
        this.isLoading = false;
        this.alarmdetailsData = res.data;
      });
    },
    // 切换选项
    handleNodeClick(data) {
      // console.log(data);
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val;
      this.alarmdetails();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.alarmdetails();
    },
    //查询
    researchFn() {
      this.alarmdetails();
    },
    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");
/deep/.el-table .cell {
  text-align: center;
}
/deep/.el-tabs--border-card > .el-tabs__content {
  padding: 10px;
}
/deep/.el-form-item {
  margin-bottom: 0;
}
/deep/.box {
  .el-input {
    width: 150px;
  }
}
/deep/.box1 {
  .el-input {
    width: 150px;
  }
}
.button {
  float: right;
  margin-right: 5px;
}
</style>
