<template>
  <div class="pd10">
    <el-row>
      <el-col>
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          type="border-card"
        >
          <!-- 暂态事件统计 -->
          <el-tab-pane
            label="暂态事件统计" 
            name="first"
            :style="'height:' + vh + ';'"
          >
            <Incident v-if="activeName=='first'"></Incident>
          </el-tab-pane>
          <!-- 监测点暂态事件统计 -->
          <el-tab-pane
            label="监测点暂态事件统计"
            name="second"
            :style="'height:' + vh + ';'"
          >
            <Example v-if="activeName=='second'"></Example>
          </el-tab-pane>
          <!-- 暂态事件分布统计 -->
          <el-tab-pane 
          label="暂态事件分布统计" 
          name="third"
          :style="'height:' + vh + ';'"
          >
            <Distribution v-if="activeName=='third'"></Distribution>
          </el-tab-pane>
          <!-- 暂态事件明细 -->
          <el-tab-pane
            label="暂态事件明细"
            name="fourth"
            :style="'height:' + vh + ';'"
          >
            <Definite v-if="activeName=='fourth'"></Definite>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { tableheight } from "@/assets/commjs/common";
import Incident from "./components/TransientState/Incident"
import Example from "./components/TransientState/Example"
import Distribution from "./components/TransientState/Distribution"
import Definite from "./components/TransientState/Definite"
import {viewheight} from "@/assets/commjs/common";
export default {
  components: {Incident,Example,Distribution,Definite},
  data() {
    return {
      vh: undefined,
      date: "",
      input: "",
      height: null,
      activeName: "first", //区分是那个节点
    };
  },
  mounted() {
    this.device = window.devicePixelRatio;
    this.vh =(viewheight()-65)+'px'
  },
  computed: {
    // height() {
    //   return "100vh" - this.$refs.form.offsetHeight + 259;
    // },
  },
  methods: {
    handleClick(tab, event) {
      // if (tab.label == "暂态事件分布统计") {
      //   this.echarts();
      //   this.echarts2();
      //   this.echarts4();
      //   this.iticData();
      //   this.semif();
      //   this.echarts3();
      // }
      // this.onSubmit();
    },
  },
};
</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-table.el-table--small td {
  height: 40px;
}
/deep/.el-row {
  width: 100%;
}
</style>
