<template>
  <div v-if="view2"  v-loading="loading"    element-loading-background="#343849c7">
    <el-row   v-if="view4">
      <el-col :span="12">
        <span style="font-size: 14px; line-height: 30px">值类型选择：</span>
        <el-select
          style="width: 150px"
          @change="changeView"
          size="small"
          v-model="value"
          placeholder="请选择值类型"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
    <div
     
      v-if="view4"
      element-loading-background="rgba(122, 122, 122, 0.8)"
      style="height: 750px"
    >
      <el-tabs
        class="default-main"
        v-model="bxactiveName"
        @tab-click="bxhandleClick"
      >
        <el-tab-pane
          label="瞬时波形"
          name="ssbx"
          class="boxbx  pb10"
          :style="'height:' + bxecharts + ';overflow-y: auto;'"
        >
          <shushiboxi
            ref="shushiboxiRef"
            v-if="bxactiveName == 'ssbx' && showBoxi"
            :value="value"
            :parentHeight="parentHeight"
            :boxoList="boxoList"
            :wp="wp"
          ></shushiboxi>
        </el-tab-pane>
        <el-tab-pane
          label="RMS波形"
          class="boxbx  pb10"
          name="rmsbx"
          :style="'height:' + bxecharts + ';overflow-y: auto;'"
        >
          <rmsboxi
            ref="rmsboxiRef"
            v-if="bxactiveName == 'rmsbx' && showBoxi"
            :value="value"
            :parentHeight="parentHeight"
            :boxoList="boxoList"
            :wp="wp"
          ></rmsboxi>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-empty v-else description="暂无数据" style="height: 700px" />
  </div>
</template>
<script setup lang="ts">
import shushiboxi from "./shushiboxi.vue";
import rmsboxi from "./rmsboxi.vue";
import { ref, reactive } from "vue";
import { getTransientAnalyseWave } from "@/api/statistics/index";
const emit = defineEmits(["backbxlb"]);
interface Props {
  // boxoList: any
  // wp: any,
  senior?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  senior: false,
});
const parentHeight = ref(0);
const loading = ref(true);
const bxactiveName = ref("ssbx");
const rmsboxiRef = ref();
const value = ref(1);
const options = ref([
  {
    value: 1,
    label: "一次值",
  },
  {
    value: 2,
    label: "二次值",
  },
]);
const shushiboxiRef = ref();
const bxecharts = ref("700px");
const view2 = ref(true);
const boxoList: any = ref({});
const wp: any = ref(null);
const showBoxi = ref(true);
const view3 = ref(false);
const view4 = ref(false);
const GJList = ref([]);

const open = async (row: any) => {
  console.log("🚀 ~ open ~ row:", row);
  loading.value = true;
  await getTransientAnalyseWave({
    // id: "151984a0-4a2e-4c46-aece-493e1a2e24c1",
    id: row.eventdetail_index,
    systemType: 0,
    type: 0,
  })
    .then((res) => {
      row.loading = false;
      if (res != undefined) {
        boxoList.value = {
          subName: row.bdname,
          lineName: row.pointname,
          startTime: row.timeid,
          featureAmplitude: row.eventvalue,
          duration: row.persisttime,
        };
        wp.value = res.data;
        loading.value = false;
        view4.value = true;
      }
    })
    .catch(() => {
      loading.value = false;
    });
};
const bxhandleClick = (tab: any) => {
  // if (shushiboxiRef.value) shushiboxiRef.value.backbxlb();
  // if (rmsboxiRef.value) rmsboxiRef.value.backbxlb();

  loading.value = true;
  if (tab.name == "ssbx") {
    bxactiveName.value = "ssbx";
  } else if (tab.name == "rmsbx") {
    bxactiveName.value = "rmsbx";
  }
  setTimeout(() => {
    loading.value = false;
  }, 0);
  //  console.log(tab, event);
};
const backbxlb = () => {
  boxoList.value = null;
  wp.value = null;
  // if (shushiboxiRef.value) shushiboxiRef.value.backbxlb();
  // if (rmsboxiRef.value) rmsboxiRef.value.backbxlb();

  emit("backbxlb");
};
const setHeight = (h: any, vh: any) => {
  if (h != false) {
    parentHeight.value = h;
  }

  setTimeout(() => {
    bxecharts.value = "700px";
  }, 100);
};
// 高级分析

const changeView = () => {
  // if (shushiboxiRef.value) shushiboxiRef.value.backbxlb();
  // if (rmsboxiRef.value) rmsboxiRef.value.backbxlb();
  showBoxi.value = false;
  setTimeout(() => {
    showBoxi.value = true;
  }, 0);
};
const gaoBack = () => {
  view2.value = true;
  view3.value = false;
};
defineExpose({ open, setHeight });
</script>
<style lang="scss" scoped>
:deep(.el-tabs__item) {
  // color: #c2c2c2;
  --el-text-color-primary: #d3d4d6;
}
</style>
