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

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

      <el-form-item label="电压等级:">
        <el-select
          v-model.trim="form.valueLevel"
          placeholder="请选择"
          clearable
          multiple
          collapse-tags
        >
          <el-option
            v-for="item in VoltageList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="监测点类别:">
        <el-select
          v-model.trim="form.valueMonitor"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in category"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          >
          </el-option>
        </el-select>
      </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="
          totalData.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 tableHeaderTotal">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :key="index"
          >
            <template v-for="(item, index) in item.children">
              <el-table-column
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :key="index"
              >
                <template v-for="(item, index) in item.children">
                  <el-table-column
                    :prop="item.prop"
                    :label="item.label"
                    :key="index"
                  ></el-table-column>
                </template>
              </el-table-column>
            </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="totalData.length"
        class="mt10"
      >
      </el-pagination>
    </el-form>
  </div>
</template>

<script>
import { getTransientData } from "@/api/TransientStateIndex";
import { dicData } from "@/assets/commjs/dictypeData";
import Area from "@/views/components/Area/Area.vue";
import Timeinterval from "@/views/components/Timeinterval.vue";
export default {
  components: { Area, Timeinterval },
  data() {
    return {
      vh: undefined,
      date: "",
      input: "",
      height: null,
      form: {
        valueMonitor: "", //监测点类别
        valueLevel: "", //电压等级
        valuePoint: "", //监测点
      },
      //监测点类别数据
      category: [
        {
          value: "选项1",
          label: "Ⅰ类监测点",
        },
        {
          value: "选项2",
          label: "Ⅱ类监测点",
        },
        {
          value: "选项3",
          label: "Ⅲ类监测点",
        },
      ],
      VoltageList: [], //电压等级数据
      isLoading1: false,
      //暂态事件统计
      tableHeaderTotal: [
        { prop: "company", label: "单位", width: 180 },
        { prop: "monitoringTotal", label: "监测点总数", width: 120 },
        { prop: "onlineMonitoring", label: "在线监测点数", width: 120 },
        {
          prop: "month",
          label: "当月累计",
          children: [
            // { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
            {
              prop: "state",
              label: "暂态事件",
              children: [
                { prop: "stateMonitoring", label: "监测点数" },
                { prop: "stateTransient", label: "发生次数" },
                { prop: "stateFrequency", label: "发生频次" },
              ],
            },
            {
              prop: "sag",
              label: "暂降事件",
              children: [
                { prop: "sagMonitoring", label: "监测点数" },
                { prop: "sagTransient", label: "发生次数" },
                { prop: "sagFrequency", label: "发生频次" },
              ],
            },
            {
              prop: "tag",
              label: "暂升事件",
              children: [
                { prop: "tagMonitoring", label: "监测点数" },
                { prop: "tagTransient", label: "发生次数" },
                { prop: "tagFrequency", label: "发生频次" },
              ],
            },
            {
              prop: "interrupt",
              label: "中断事件",
              children: [
                { prop: "spdMonitoring", label: "监测点数" },
                { prop: "spdTransient", label: "发生次数" },
                { prop: "spdFrequency", label: "发生频次" },
              ],
            },
          ],
        },
        {
          prop: "year",
          label: "当年累计",
          children: [
            {
              prop: "states",
              label: "暂态事件",
              children: [
                { prop: "statesMonitoring", label: "监测点数" },
                { prop: "statesTransient", label: "发生次数" },
                { prop: "statesFrequency", label: "发生频次" },
              ],
            },
            {
              prop: "sags",
              label: "暂降事件",
              children: [
                { prop: "sagsMonitoring", label: "监测点数" },
                { prop: "sagsTransient", label: "发生次数" },
                { prop: "sagsFrequency", label: "发生频次" },
              ],
            },
            {
              prop: "tags",
              label: "暂升事件",
              children: [
                { prop: "tagsMonitoring", label: "监测点数" },
                { prop: "tagsTransient", label: "发生次数" },
                { prop: "tagsFrequency", label: "发生频次" },
              ],
            },
            {
              prop: "interrupts",
              label: "中断事件",
              children: [
                { prop: "spdsMonitoring", label: "监测点数" },
                { prop: "spdsTransient", label: "发生次数" },
                { prop: "spdsFrequency", label: "发生频次" },
              ],
            },
          ],
        },
      ],
      totalData: [],
      device: "",
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 20, // 每页的数据条数
    };
  },
  created() {
    this.transient();
    this.getclassificationData();
  },
  mounted() {
    this.device = window.devicePixelRatio;
    this.vh = document.getElementById("app-main-in").offsetHeight - 165;
    this.onSubmit();
  },
  methods: {
    //获取统计类型
    getclassificationData() {
      var code = "Dev_Voltage";
      this.classificationData = dicData(code, []);
      this.VoltageList = this.classificationData;
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    transient() {
      this.isLoading1 = true;
      this.totalData = [];
      //方法调用获取暂态事件统计数据接口
      getTransientData().then((res) => {
        // console.log(res);
        this.isLoading1 = false;
        this.totalData = 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-form-item--small.el-form-item {
  margin-bottom: 0;
}
/deep/.el-tabs--border-card > .el-tabs__content {
  padding: 10px;
}
/deep/.el-row {
  width: 100%;
}
/deep/.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .el-form-item {
    display: flex;
    width: 48%;
    .el-form-item__content {
      flex: 1 !important;
      .el-select {
        width: 100%;
      }
      .el-input__inner {
        width: 100% !important;
      }
      .el-date-editor {
        width: 100%;
      }
    }
  }
}
</style>
