<template>
  <div>
    <!-- 表格 -->
    <div v-if="!dialogVisible">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <!-- <el-form-item label="监测点类别:">
        <el-select
          v-model="form.monitorSort"
          clearable
          multiple
          collapse-tags
          placeholder="请选择监测点类别"
        >
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
        <el-form-item label="监测点:">
          <el-input
            v-model="form.monitorName"
            clearable
            placeholder="请填写内容"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <Area @click="handleNodeClick"></Area>
        </el-form-item>
        <el-form-item>
          <Timeinterval :interval="3" ref="interval"></Timeinterval>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
            class="ml10"
            icon="el-icon-search"
            >查询</el-button
          >
          <el-button type="primary" icon="el-icon-download">导出</el-button>
          <!-- <el-button
                type="primary"
                class="boxing"
                icon="el-icon-download"
                @click="fn"
                >存在波形</el-button
              > -->
        </el-form-item>
        <el-table
          stripe
          :data="
            PlatformData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          :height="vh"
          border
          v-loading="isLoading"
          style="width: 100%"
          header-cell-class-name="table_header"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          :cell-style="cellStyle"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <template v-for="(item, index) in tableHeaderPlatform">
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              :key="index"
              show-overflow-tooltip
              :width="item.width"
            >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  v-if="item.prop == 'Waveform'"
                  @click="queryBxView(scope.row)"
                  >{{ scope.row[item.prop] == 0 ? "不存在波形" : "存在波形" }}
                </el-button>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </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="PlatformData.length"
          class="mt10"
        >
        </el-pagination>
      </el-form>
    </div>
    <el-row>
      <el-col :span="12">
        <span
          v-if="dialogVisible"
          style="font-size: 14px; font-weight: ; line-height: 30px"
          >值类型选择:</span
        >
        <el-select
          v-if="dialogVisible"
          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
          v-if="dialogVisible"
          @click="dialogVisible = !dialogVisible"
          type="primary"
          class="el-icon-refresh-right"
          style="float: right"
          >返回</el-button
        >
      </el-col>
    </el-row>
    <el-tabs
      v-if="dialogVisible"
      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;' && showBoxi"
      >
        <rmsboxi
          v-if="bxactiveName == 'rmsbx'"
          :value="value"
          :boxoList="boxoList"
          :wp="wp"
        ></rmsboxi>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getSubstationData, getShapeData } from "@/api/TransientStateIndex";
import {
  getPwRmpEventDetail,
  getTransientAnalyseWave,
} from "@/api/Distributionnetwork/transient/transient";
import rmsboxi from "@/views/Event-boot/components/echarts/rmsboxi";
import shushiboxi from "@/views/Event-boot/components/echarts/shushiboxi";
// import { dicData } from "@/assets/commjs/dictypeData";
import Area from "@/views/components/Area/Area.vue";
import Timeinterval from "@/views/components/Timeinterval.vue";
import boxis from "@/assets/commjs/boxi";
export default {
  components: { rmsboxi, shushiboxi, Area, Timeinterval },
  data() {
    return {
      boxoList: "",
      bxecharts: undefined,
      wp: boxis,
      vh: undefined,
      date: "",
      input: "",
      height: null,
      showBoxi: true,
      dialogVisible: false,
      item: ["", ""],
      form: {
        // monitorSort: [], //监测点类别
        monitorName: "", //监测点
        endTime: "",
        startTime: "",
        id: "",
        type: "",
      },
      //监测点类别数据
      typeList: [],
      //里层默认波形tab标签页
      bxactiveName: "ssbx",
      value: 2,
      options: [
        {
          value: 1,
          label: "一次值",
        },
        {
          value: 2,
          label: "二次值",
        },
      ],
      options0: [
        {
          value: 0,
          label: "一次值",
        },
        {
          value: 1,
          label: "二次值",
        },
      ],
      isLoading: false,
      //暂态分布明细
      tableHeaderPlatform: [
        { prop: "orgName", label: "单位", width: 140 },
        { prop: "subName", label: "所属变电站", width: 160 },
        { prop: "powerDistributionArea", label: "所属台区" },
        { prop: "powerClient", label: "用户名称" },
        { prop: "monitorSort", label: "监测点类别" },
        {
          prop: "monitorVoltageLevel",
          label: "监测点电压等级(kV)",
          width: 160,
        },
        { prop: "monitorName", label: "监测点名称", width: 180 },
        { prop: "startTime", label: "暂态事件发生时间", width: 230 },
        { prop: "eventType", label: "暂态事件类型" },
        { prop: "featureAmplitude", label: "特征幅值(%)" },
        { prop: "duration", label: "持续时间(秒)" },
        { prop: "Waveform", label: "波形显示" },
      ],
      PlatformData: [],
      device: "",
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 20, // 每页的数据条数
      multipleSelection: [],
    };
  },
  created() {
    this.form.id = JSON.parse(window.sessionStorage.getItem("Info")).deptId;
    // this.getclassificationData();
  },
  mounted() {
    this.device = window.devicePixelRatio;
    this.vh = document.getElementById("app-main-in").offsetHeight - 168;
    // this.vh2 = document.getElementById("app-main-in").offsetHeight - 205;

    this.height =
      document.getElementById("app-main-in").offsetHeight - 175 + "px";
    this.bxecharts =
      document.getElementById("app-main-in").offsetHeight - 160 + "px";
    this.onSubmit();
  },
  methods: {
    //获取类型
    // getclassificationData() {
    //   var code = "Line_Sort";
    //   this.typeList= dicData(code, []);
    // },
    //里层波形tab标签页触发事件
    bxhandleClick(tab, event) {
      if (tab.name == "ssbx") {
        this.bxactiveName = "ssbx";
      } else if (tab.name == "rmsbx") {
        this.bxactiveName = "rmsbx";
      }
      // console.log(tab, event);
    },
    changeView() {
      this.showBoxi = false;
      setTimeout(() => {
        this.showBoxi = true;
      }, 0);
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.boxi = val;
    },
    onSubmit() {
      // this.isLoading= true;
      this.form.type = this.$refs.interval.intervald;
      this.item = this.$refs.interval.timeValue;
      this.form.startTime = this.item[0];
      this.form.endTime = this.item[1];
      getPwRmpEventDetail(this.form).then((res) => {
        // console.log("暂态事件分布明细:", res);
        this.isLoading = false;
        this.PlatformData = res.data;
      });
    },

    // 表格多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //波形查看触发按钮
    async queryBxView(e) {
      // console.log(e,'================');
      this.boxoList = e;
      let from = {
        lineId: this.boxoList.monitorId,
        timeId: this.boxoList.startTime,
      };
      await getTransientAnalyseWave(from).then((res) => {
        // console.log(res);
        this.wp = boxis;
        setTimeout(() => {
          this.view = false;
          this.view2 = true;
          this.vh =
            document.getElementById("app-main-in").offsetHeight - 80 + "px";
        }, 0);
        //  this.initWaves()
      });

      // console.log( this.boxoList);
      //调取波形图
      this.$nextTick(() => {});
    },
    // 切换选项
    handleNodeClick(data) {
      // console.log(data);
    },
    cellStyle(row) {
      // console.log(row);
      if (
        row.row.monitoringPoint == "Ⅱ类监测点" ||
        row.row.monitoringPoint == "Ⅲ类监测点"
      ) {
        row.row.substation = "/";
      }
      if (
        row.row.monitoringPoint == "Ⅰ类监测点" ||
        row.row.monitoringPoint == "Ⅲ类监测点"
      ) {
        row.row.platform = "/";
      }
      if (
        row.row.monitoringPoint == "Ⅱ类监测点" ||
        row.row.monitoringPoint == "Ⅱ类监测点"
      ) {
        row.row.username = "/";
      }
    },
  },
};
</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;
}
.box {
  display: flex;
}
/deep/.el-row {
  width: 100%;
  // margin-top: -20px;
}
/deep/.el-form-item {
  margin-bottom: 0;
}
.boxing {
  margin-left: 520px;
}


.flex {
  display: flex;
  align-items: center;
}
// /deep/.form {
//   display: flex;
//   flex-wrap: wrap;
//   justify-content: space-between;
//   .el-form-item {
//     display: flex;
//     width: 48%;
//     .el-form-item__content {
//       flex: 1 !important;
//       .el-select {
//         width: 100%;
//       }
//       .el-input__inner {
//         width: 100% !important;
//       }
//       .el-date-editor {
//         width: 100%;
//       }
//     }
//   }
// }
</style>
<style lang="scss" scoped>
.back {
  float: right;
  margin-top: 5px;
  margin-right: 10px;
  margin-left: auto;
  font-size: 29px;
  line-height: 32px;
  color: $themeColor;
  cursor: pointer;
  &:hover {
    color: $themeColor;
    opacity: 0.9;
  }
}
</style>
