<template>
  <div>
    <!-- <span slot="label"><i class="el-icon-date"></i> 事件统计</span> -->
    <el-col :span="24" v-show="view">
      <el-tabs
        :tab-position="tabPosition"
        v-model="active"
        type="border-card"
        :style="'height:' + asideheight + 'px;'"
      >
        <el-tab-pane label="ITIC曲线分析" name="tab1">
          <ITIC
          v-show="active == 'tab1'"
            @Loading="Loading"
            @BoXi="BoXi"
            :style="`height:${asideheight - 20}px;`"
          />
        </el-tab-pane>
        <el-tab-pane label="SEMI F47 分析" name="tab2">
          <SEMI
            @Loading="Loading"
            v-show="active == 'tab2'"
            @BoXi="BoXi"
            :style="`height:${asideheight - 20}px;`"
          />
        </el-tab-pane>
        <el-tab-pane label="电压暂降表及密度" name="tab3">
          <density
            @Loading="Loading"
            v-show="active == 'tab3'"
            :style="`height:${asideheight - 20}px;`"
          />
        </el-tab-pane>
        <el-tab-pane label="暂降分布统计" name="tab4">
          <Statistics
            @Loading="Loading"
            v-show="active == 'tab4'"
            :style="`height:${asideheight - 20}px;`"
          />
        </el-tab-pane>
        <el-tab-pane label="暂降幅值概率分布" name="tab5">
          <Sag
            @Loading="Loading"
            v-show="active == 'tab5'"
            :style="`height:${asideheight - 20}px;`"
          />
        </el-tab-pane>
        <el-tab-pane label="持续时间概率分布" name="tab6">
          <Duration
            @Loading="Loading"
            v-show="active == 'tab6'"
            :style="`height:${asideheight - 20}px;`"
          />
        </el-tab-pane>
      </el-tabs>
    </el-col>
    <div v-if="view2">
      <el-row>
        <el-col :span="12">
          <span
            v-if="view2"
            style="font-size: 14px; font-weight: ; line-height: 30px"
            >值类型选择:</span
          >
          <el-select
            v-if="view2"
            v-model="value"
            @change="changeView"
            placeholder="请选择值类型"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="12">
          <el-button
            @click="backbxlb"
            type="primary"
            class="el-icon-refresh-right"
            style="float: right"
            >返回</el-button
          >
        </el-col>
      </el-row>
      <el-tabs v-model="bxactiveName" @tab-click="bxhandleClick">
        <el-tab-pane
          label="瞬时波形"
          name="ssbx"
          :style="'height:' + bxecharts + ';overflow-y: scroll;'"
        >
          <shushiboxi
            v-if="bxactiveName == 'ssbx' && showBoxi"
            :value="value"
            :boxoList="boxoList"
            :wp="wp"
          ></shushiboxi>
        </el-tab-pane>
        <el-tab-pane
          label="RMS波形"
          name="rmsbx"
          :style="'height:' + bxecharts + ';overflow-y: scroll;'"
        >
          <rmsboxi
            v-if="bxactiveName == 'rmsbx' && showBoxi"
            :value="value"
            :boxoList="boxoList"
            :wp="wp"
          ></rmsboxi>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import {
  getMonitorEventAnalyseWave,
  getTransientDetailById,
} from "@/api/monitoringpointStatistics/echart";
import ITIC from "@/views/Event-boot/components/monitoringpointStatistics/ITIC";
import SEMI from "@/views/Event-boot/components/monitoringpointStatistics/SEMI";
import density from "@/views/Event-boot/components/monitoringpointStatistics/density";
import rmsboxi from "@/views/Event-boot/components/echarts/rmsboxi";
import shushiboxi from "@/views/Event-boot/components/echarts/shushiboxi";
import Statistics from "@/views/Event-boot/components/monitoringpointStatistics/Statistics";
import Sag from "@/views/Event-boot/components/monitoringpointStatistics/Sag";
import Duration from "@/views/Event-boot/components/monitoringpointStatistics/Duration";
export default {
  components: {
    ITIC,
    SEMI,
    density,
    Statistics,
    Sag,
    Duration,
    rmsboxi,
    shushiboxi,
  },
  props: {},
  data() {
    return {
      tabPosition: "left",
      active: "tab1",
      asideheight: undefined,
      boxoList: {},
      wp: {},
      view: true,
      bxecharts: undefined,
      view2: false,
      bxactiveName: "ssbx",
      value: 1,
      showBoxi: true,
      options: [
        {
          value: 1,
          label: "一次值",
        },
        {
          value: 2,
          label: "二次值",
        },
      ],
    };
  },
  created() {},
  mounted() {
   
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          let appheight = window.sessionStorage.getItem("appheight");
    this.bxecharts = window.sessionStorage.getItem("appheight") - 150 + "px";
    this.asideheight = appheight - 70;
          
        },
    changeView() {
      this.showBoxi = false;
      setTimeout(() => {
        this.showBoxi = true;
      }, 0);
    },
    Loading(e) {
      this.$emit("Loading", e);
    },
    async BoXi(e) {
      await getTransientDetailById({
        eventId: e,
        sysType: 0,
        smallType: 0,
      }).then((res) => {
        this.boxoList = res.data;
      });
      await getMonitorEventAnalyseWave({
        id: e,
        systemType: 0,
        type: 0,
      }).then((res) => {
        if (res != undefined) {
          this.wp = res.data;
          setTimeout(() => {
            this.view = false;
            this.view2 = true;
          }, 0);
        }

        //  this.initWaves()
      });
    },
    //里层波形tab标签页触发事件
    bxhandleClick(tab, event) {
      if (tab.name == "ssbx") {
        this.bxactiveName = "ssbx";
      } else if (tab.name == "rmsbx") {
        this.bxactiveName = "rmsbx";
      }
      // console.log(tab, event);
    },
    //返回触发事件
    backbxlb() {
      this.view = true;
      this.view2 = false;
      this.value = 1;
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-tabs--left .el-tabs__header.is-left {
  float: left;
  margin-right: 0;

  /* margin-right: 10px; */
}
</style>
