<template>
  <div>
    <el-form :inline="true" 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-input
          v-model.trim="valuePlatformArea"
          placeholder="请输入台区"
          clearable
        >
        </el-input>
      </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="
        arealevelData.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 tableHeaderArealevel">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :key="index"
          :width="item.width"
        >
          <template v-for="(item, index) in item.children">
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              :key="index"
              :width="item.width"
            ></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="arealevelData.length"
      class="mt10"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getArealevelData } from "@/api/Distributionnetwork-analysis/BaselineLevelAssessment/BaselineLevelAssessment";
import Area from "@/views/components/Area/Area.vue";
import Timeinterval from "../../../components/Timeinterval.vue";
export default {
  components: { Area, Timeinterval },
  data() {
    return {
      vh: "",
      valuePlatformArea: "",
      height: null,
      isLoading: false,
      //台区水平评价表头
      tableHeaderArealevel: [
        { prop: "company", label: "单位" },
        { prop: "areaName", label: "台区名称", width: 180 },
        {
          prop: "penetrationLevel",
          label: "分布式光伏台区渗透水平(0~25%)",
          children: [
            { prop: "zeroVoltage", label: "电压水平" },
            { prop: "zeroThreephase", label: "三相电压不平衡水平", width: 150 },
            { prop: "zeroHarmonic", label: "谐波水平" },
            { prop: "zeroFlicker", label: "闪变水平" },
          ],
        },
        {
          prop: "penetrationLevel",
          label: "分布式光伏台区渗透水平(25~50%)",
          children: [
            { prop: "quarterVoltage", label: "电压水平" },
            {
              prop: "quarterThreephase",
              label: "三相电压不平衡水平",
              width: 150,
            },
            { prop: "quarterHarmonic", label: "谐波水平" },
            { prop: "quarterFlicker", label: "闪变水平" },
          ],
        },
        {
          prop: "penetrationLevel",
          label: "分布式光伏台区渗透水平(50~75%)",
          children: [
            { prop: "ahalfVoltage", label: "电压水平" },
            {
              prop: "ahalfThreephase",
              label: "三相电压不平衡水平",
              width: 150,
            },
            { prop: "ahalfHarmonic", label: "谐波水平" },
            { prop: "ahalfFlicker", label: "闪变水平" },
          ],
        },
        {
          prop: "penetrationLevel",
          label: "分布式光伏台区渗透水平(75~100%)",
          children: [
            { prop: "threeFourthsVoltage", label: "电压水平" },
            {
              prop: "threeFourthsThreephase",
              label: "三相电压不平衡水平",
              width: 150,
            },
            { prop: "threeFourthsHarmonic", label: "谐波水平" },
            { prop: "threeFourthsFlicker", label: "闪变水平" },
          ],
        },
        {
          prop: "penetrationLevel",
          label: "分布式光伏台区渗透水平(100%)",
          children: [
            { prop: "hundredVoltage", label: "电压水平" },
            {
              prop: "hundredThreephase",
              label: "三相电压不平衡水平",
              width: 150,
            },
            { prop: "hundredHarmonic", label: "谐波水平" },
            { prop: "hundredFlicker", label: "闪变水平" },
          ],
        },
      ],
      arealevelData: [],
      device: "",
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 18, // 每页的数据条数
    };
  },
  created() {
    this.arealevel();
    // this.dictionaries();
  },
  mounted() {
    this.device = window.devicePixelRatio;
    this.height = document.getElementById("app-main-in").offsetHeight - 175;
  },
  computed: {},
  methods: {
    // 切换选项
    handleNodeClick(data) {
      // console.log(data);
    },
    //获取数据
    arealevel() {
      this.isLoading = true;
      getArealevelData().then((res) => {
        this.isLoading = false;
        this.arealevelData = res.data;
      });
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val;
      this.arealevel();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.arealevel();
    },
    //查询
    searchFn() {
      this.arealevel();
    },
  },
};
</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>
