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

      <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>
        <el-button
          type="primary"
          class="ml10"
          icon="el-icon-search"
          @click="searchFn"
          >查询</el-button
        >
        <el-button type="primary" icon="el-icon-download">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table
      stripe
      :data="
        networklevelData.slice(
          (currentPage - 1) * pageSize,
          currentPage * pageSize
        )
      "
      :height="height"
      border
      style="width: 100%"
      v-loading="isLoading"
      header-cell-class-name="table_header"
    >
      <template v-for="(item, index) in tableHeaderNetworklevel">
        <el-table-column :prop="item.prop" :label="item.label" :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>
    <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="networklevelData.length"
      class="mt10"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getWholeNetworkData } from "@/api/evaluate";
import { dictypeData } from "@/api/user";
import { dicData } from "@/assets/commjs/dictypeData";
import Area from "@/views/components/Area/Area.vue";
import Timeinterval from "../../../components/Timeinterval.vue";
export default {
  components: { Area, Timeinterval },
  data() {
    return {
      vh: "",
      valueLevel: "",
      height: null,
      isLoading: false,
      //电压等级数据
      level: [],
      //全网水平评价表头
      tableHeaderNetworklevel: [
        { prop: "company", label: "单位" },
        { prop: "voltageClass", label: "电压等级(kV)" },
        {
          prop: "voltage",
          label: "电压",
          children: [
            { prop: "vmeanValue", label: "均值(kV)" },
            { prop: "vstandardDeviation", label: "标准差(V)" },
          ],
        },
        {
          prop: "threePhase",
          label: "三相不平衡",
          children: [
            { prop: "tmeanValue", label: "均值" },
            { prop: "tstandardDeviation", label: "标准差" },
          ],
        },
        {
          prop: "harmonic ",
          label: "电压总谐波畸变率",
          children: [
            { prop: "hmeanValue", label: "均值" },
            { prop: "hstandardDeviation", label: "标准差" },
          ],
        },
        {
          prop: "longTime ",
          label: "长时间",
          children: [
            { prop: "lmeanValue", label: "均值" },
            { prop: "lstandardDeviation", label: "标准差" },
          ],
        },
      ],
      networklevelData: [],
      device: "",
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 18, // 每页的数据条数
    };
  },
  created() {
    this.networklevel();
    //   this.dictionaries();
    this.getclassificationData();
  },
  mounted() {
    this.device = window.devicePixelRatio;
    this.height = document.getElementById("app-main-in").offsetHeight - 175;
  },
  computed: {
    //计算表格高度
    // height(){
    //   return '100vh'- this.$refs.form.offsetHeight +259;
    // }
  },
  methods: {
    //获取电压等级
    getclassificationData() {
      // debugger
      var code = "Dev_Voltage";
      this.classificationData = dicData(code, ["Load_Type"]);
      this.level = this.classificationData;
    },
    // 切换选项
    handleNodeClick(data) {
      // console.log(data);
    },

    //获取数据
    networklevel() {
      this.isLoading = true;
      getWholeNetworkData().then((res) => {
        this.isLoading = false;
        this.networklevelData = res.data;
      });
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val;
      this.networklevel();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.networklevel();
    },
    //查询
    searchFn() {
      this.networklevel();
    },
  },
};
</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--small.el-form-item {
//   margin-bottom: 0;
// }
</style>

