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

      <el-form-item>
        <Timeinterval :interval="1" ref="interval"></Timeinterval>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
          class="ml10"
          icon="el-icon-search"
          >查询</el-button
        >
        <el-button type="primary" icon="el-icon-download">导出</el-button>
      </el-form-item>
      <el-table
        stripe
        :data="
          regionData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        :height="vh"
        border
        v-loading="isLoading1"
        style="width: 100%"
        header-cell-class-name="table_header"
      >
        <template v-for="(item, index) in tableHeaderRegion">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :key="index"
            :width="item.width"
          >
            <template slot-scope="scope">
              <span
                v-if="
                  item.prop == 'voltage' ||
                  item.prop == 'frequency' ||
                  item.prop == 'threephase' ||
                  item.prop == 'harmonic' ||
                  item.prop == 'flicker' ||
                  item.prop == 'sag' ||
                  item.prop == 'interrupt'
                "
                >{{ scope.row[item.prop] == "1" ? "否" : "是" }}</span
              >
              <span v-else>{{ scope.row[item.prop] }}</span>
            </template>
          </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="regionData.length"
        class="mt10"
      >
      </el-pagination>
    </el-form>
  </div>
</template>

<script>
import { getRegionalalarmData } from "@/api/Distributionnetwork-analysis/IndicatorAlarmStatistics/IndicatorAlarmStatistics";
// import { dictypeData } from "@/api/user";
import Area from "@/views/components/Area/Area.vue";
import Timeinterval from "../../../components/Timeinterval.vue";
export default {
  components: { Area, Timeinterval },
  data() {
    return {
      vh: null,
      date: "",
      input: "",
      form: {},
      isLoading1: false,
      device: "",
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 20, // 每页的数据条数
      //区域告警管理
      tableHeaderRegion: [
        { prop: "company", label: "单位" },
        { prop: "voltage", label: "电压偏差告警" },
        { prop: "frequency", label: "频率偏差告警" },
        { prop: "threephase", label: "三相电压不平衡告警" },
        { prop: "harmonic", label: "谐波电压告警" },
        { prop: "flicker", label: "闪变告警" },
        { prop: "sag", label: "电压暂降告警" },
        { prop: "interrupt", label: "电压中断告警 " },
        { prop: "alarmRating", label: "告警评级" },
      ],
      regionData: [],
    };
  },
  created() {
    this.indicator();
    // this.dictionaries();
  },
  mounted() {
    this.device = window.devicePixelRatio;
    this.vh = document.getElementById("app-main-in").offsetHeight - 165;
    this.onSubmit();
  },
  computed: {
    // height() {
    // return "100vh" - this.$refs.form.offsetHeight + 259;
    // },
  },
  methods: {
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    indicator() {
      this.isLoading1 = true;
      this.regionData = [];
      //方法调用获取区域告警管理数据接口
      getRegionalalarmData().then((res) => {
        this.isLoading1 = false;
        this.regionData = res.data;
      });
    },
    // 表格查询
    onSubmit() {
      this.loading = true;
    },
    // },
    // 切换选项
    handleNodeClick(data) {
      // console.log(data);
    },
  },
};
</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;
}
</style>