<template>
  <div class="pd10">
    <div v-show="flag" v-loading="isLoading" element-loading-text="数据加载中">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item>
          <Timeinterval ref="Timeinterval" :interval="3"></Timeinterval>
        </el-form-item>
        <el-form-item label="筛选数据:">
          <el-input
            v-model.trim="form.searchValue"
            placeholder="请输入筛选数据"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="administratione"
            >查询</el-button
          >
          <el-tooltip
            class="item"
            effect="dark"
            content="关联分析详解"
            placement="top-start"
          >
            <el-button type="primary" icon="el-icon-info"></el-button>
          </el-tooltip>
          <el-button type="primary" icon="el-icon-tickets" @click="analysis"
            >分析记录管理</el-button
          >
          <el-button type="primary" icon="el-icon-tickets" @click="firing"
            >启动关联分析</el-button
          >
        </el-form-item>
      </el-form>
      <template>
        <el-table
          stripe
          :data="eventcorrelationData"
          :height="height"
          border
          style="width: 100%"
          header-cell-class-name="table_header"
          highlight-current-row
        >
          <template v-for="(item, index) in tableHeaderAdministration">
            <el-table-column :prop="item.prop" :label="item.label" :key="index">
              <el-table-column prop="number" label="序号" width="80">
                <template scope="scope">
                  <span>{{
                    (form.pageNum - 1) * form.pageSize + scope.$index + 1
                  }}</span>
                </template>
              </el-table-column>
              <template v-for="(item, index) in item.children">
                <el-table-column
                  v-if="item.prop == 'fileFlag'"
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                  :min-width="item.width"
                  show-overflow-tooltip
                  :sortable="item.sortable"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.fileFlag == 0" style="color: red"
                      >不存在</span
                    >
                    <span v-else-if="scope.row.fileFlag == 1">存在</span>
                  </template>
                </el-table-column>
                <el-table-column
                  v-else-if="item.prop == 'dealFlag'"
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                  :min-width="item.width"
                  show-overflow-tooltip
                  :sortable="item.sortable"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.dealFlag == 0" style="color: red"
                      >未处理</span
                    >
                    <span v-else-if="scope.row.dealFlag == 1">已处理</span>
                    <span v-else-if="scope.row.dealFlag == 2"
                      >已处理,无结果</span
                    >
                    <span v-else-if="scope.row.dealFlag == 3" style="color: red"
                      >计算失败</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  v-else-if="item.prop == 'port'"
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                  :min-width="item.width"
                  show-overflow-tooltip
                  :sortable="item.sortable"
                >
                  <template slot-scope="scope">
                    <el-button
                      v-if="scope.row.fileFlag == 0"
                      type="primary"
                      style="color: #000; background: #ccc !important"
                      size="mini"
                      icon="el-icon-share"
                    >
                      暂无波形</el-button
                    >
                    <el-button
                      v-if="scope.row.fileFlag == 1"
                      type="primary"
                      size="mini"
                      @click="queryBxView(scope.row)"
                      icon="el-icon-share"
                      >波形分析</el-button
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  v-else
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                  :min-width="item.width"
                  show-overflow-tooltip
                  :sortable="item.sortable"
                >
                </el-table-column>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <el-pagination
          align="right"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.pageNum"
          :page-sizes="[20, 30, 40, 50]"
          :page-size="form.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          class="mt10"
        >
        </el-pagination>
      </template>
    </div>
    <div
      v-if="!flag && !view && !view2"
      v-loading="isLoading1"
      element-loading-text="数据加载中"
    >
      <el-form :inline="true" :model="formData" label-width="90px" class="">
        <el-form-item label="筛选数据:">
          <el-input
            v-model.trim="formData.searchValue"
            placeholder="请输入筛选数据"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button icon="el-icon-refresh-left" style="" type="primary" @click="back">返回</el-button>
        </el-form-item>
      </el-form>
      <template>
        <el-table
          stripe
          :data="recordData"
          :height="height"
          border
          style="width: 100%"
          header-cell-class-name="table_header"
          highlight-current-row
        >
          <el-table-column prop="number" label="序号" width="80">
            <template scope="scope">
              <span>{{
                (formData.pageNum - 1) * formData.pageSize + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="timeId" label="策略名称"></el-table-column>
          <el-table-column prop="timeId" label="操作时间"></el-table-column>
          <el-table-column prop="createName" label="操作人"></el-table-column>
          <el-table-column prop="number" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" icon="el-icon-delete" @click="details(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          align="right"
          background
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="formData.pageNum"
          :page-sizes="[20, 30, 40, 50]"
          :page-size="formData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="recordTotal"
          class="mt10"
        >
        </el-pagination>
      </template>
    </div>
    <!-- <div> -->
    <el-row v-loading="isLoading2" element-loading-text="数据加载中">
      <el-col :span="12">
        <span
          v-if="view"
          style="font-size: 14px; font-weight: ; line-height: 30px"
          >值类型选择:</span
        >
        <el-select
          v-if="view"
          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-button v-if="view" type="primary" @click="AdvancedAnalytics"
          >高级分析</el-button
        >
      </el-col>
      <el-col :span="12">
        <el-button
          v-if="view"
          @click="backbxlb"
          type="primary"
          style="float: right"
          >返回</el-button
        >
      </el-col>
    </el-row>
    <el-tabs v-if="view" 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"
          class="mt10"
        ></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 v-if="view2" v-loading="isLoading3" element-loading-text="数据加载中">
      <span style="font-weight: 500; font-size: 22px">高级分析</span>
      <el-button type="primary" @click="gaoBack" style="float: right"
        >返回</el-button
      >
      <boxi :flag="true" :GJList="GJList" :boxoList="boxoList"></boxi>
    </div>
  </div>
</template>

<script>
import {
  querySagEventsPage,
  processEvents,
  queryRelevantLogPage,
  delRelevantLog,
} from "@/api/administratione";
import { analysis } from "@/api/transientlist.js";

import Timeinterval from "@/views/components/TimePicker/index4";
import rmsboxi from "@/views/Event-boot/components/echarts/rmsboxi";
import shushiboxi from "@/views/Event-boot/components/echarts/shushiboxi";
import boxi from "./components/boxi.vue";
// import boxis from "@/assets/commjs/boxi";
import { getMonitorEventAnalyseWave } from "@/api/monitoringpointStatistics/echart";
import jquery from "jquery";
export default {
  components: { rmsboxi, shushiboxi, Timeinterval,boxi },
  data() {
    return {
      wp: {},
      boxoList: {},
      form: {
        pageNum: 1,
        pageSize: 20,
        searchValue: "",
        searchBeginTime: "",
        searchEndTime: "",
      },
      GJList: [],
      formData: {
        pageNum: 1,
        pageSize: 20,
        searchValue: "",
      },
      showBoxi: true,
      flag: true,
      view: false,
      view2: false,
      bxactiveName: "ssbx",
      value: 1,
      options: [
        {
          value: 1,
          label: "一次值",
        },
        {
          value: 2,
          label: "二次值",
        },
      ],
      height: null,
      bxecharts: null,
      isLoading: false,
      isLoading1: false,
      isLoading2: false,
      isLoading3: false,
      //监测覆盖率报表表头
      tableHeaderAdministration: [
        {
          prop: "none",
          label: "未关联分析列表",
          width: 100,
          children: [
            { prop: "startTime", label: "发生时间", width: 180 },
            { prop: "duration", label: "持续时间(s)", width: 150 },
            {
              prop: "featureAmplitude",
              label: "暂降(骤升)幅值(%)",
              width: 180,
            },
            { prop: "gdName", label: "供电公司", width: 130 },
            { prop: "subName", label: "变电站", width: 200 },
            { prop: "lineName", label: "监测点", width: 180 },
            { prop: "dealFlag", label: "暂降特征幅值计算", width: 180 },
            { prop: "fileFlag", label: "录波文件", width: 120 },
            { prop: "port", label: "操作", width: 120 },
          ],
        },
      ],
      eventcorrelationData: [],
      recordData: [],
      device: "",
      total: 0,
      recordTotal: 0,
    };
  },
  created() {},
  mounted() {
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    this.administratione();

    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.device = window.devicePixelRatio;
    this.height = window.sessionStorage.getItem("appheight") - 95;
    this.bxecharts = window.sessionStorage.getItem("appheight") - 100 + "px";
          
        },
    //方法调用终端运行管理数据接口
    administratione() {
      this.isLoading = true;
      this.form.searchBeginTime = this.$refs.Timeinterval.timeValue[0];
      this.form.searchEndTime = this.$refs.Timeinterval.timeValue[1];
      querySagEventsPage(this.form).then((res) => {
        this.eventcorrelationData = res.data.records;
        this.total = res.data.total;
        this.isLoading = false;
      });
    },
    //分析记录管理
    analysis() {
      this.flag = false;
      this.isLoading1 = true;
      this.form.searchBeginTime = this.$refs.Timeinterval.timeValue[0];
      this.form.searchEndTime = this.$refs.Timeinterval.timeValue[1];
      queryRelevantLogPage(this.form).then((res) => {
        this.recordData = res.data.records;
        this.recordTotal = res.data.total;
        this.isLoading1 = false;
      });
    },
    //删除
    details(val) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            id: val.id,
          };
          delRelevantLog(data).then((res) => {
            if ((res.code == "A0000")) {
              this.$message({
                type: "success",
                message: res.message,
              });
            }
            this.analysis();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //启动关联分析
    firing() {
      processEvents({
        startTime: this.form.searchBeginTime,
        endTime: this.form.searchEndTime,
      }).then((res) => {
        if (res.code == "A0000") {
          this.$message({
            type: "success",
            message: res.message,
          });
          this.administratione();
        }
      });
    },
    changeView() {
      this.showBoxi = false;
      setTimeout(() => {
        this.showBoxi = true;
      }, 0);
    },
    //返回
    back() {
      this.flag = true;
      this.administratione();
    },
    // //波形查看触发按钮
    // queryBxView() {
    //   this.flag = false;
    //   this.view = true;

    // },
    async queryBxView(e) {
      // console.log(e);
      this.boxoList = e;
      let from = {
        id: this.boxoList.eventId,
        // id: "90be9991-7b4c-4a52-ad06-701e5e783aea",
        systemType: 0,
      };
      await getMonitorEventAnalyseWave(from).then((res) => {
        if (res != undefined) {
          this.wp = res.data;
          setTimeout(() => {
            this.flag = false;
            this.view = true;
            jquery("el-tab-pane").height(100 + "px");
          }, 0);
        }
        //  this.initWaves()
      });

      // console.log( this.boxoList);
      //调取波形图
    },
    //里层波形tab标签页触发事件
    bxhandleClick(tab, event) {
      if (tab.name == "ssbx") {
        this.bxactiveName = "ssbx";
      } else if (tab.name == "rmsbx") {
        this.bxactiveName = "rmsbx";
      }
    },
    //返回触发事件
    backbxlb() {
      this.flag = true;
      this.view = false;
    },
    //高级分析
    AdvancedAnalytics() {
      analysis({
        eventIndex: this.boxoList.eventId,
      }).then((res) => {
        this.GJList = res.data;
        this.flag = false;
        this.view = false;
        this.view2 = true;
      });
    },
    //高级分析返回
    gaoBack() {
      this.flag = false;
      this.view = true;
      this.view2 = false;
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.administratione();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.administratione();
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange1(val) {
      this.formData.pageSize = val;
      //   this.administratione();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange1(val) {
      this.formData.pageNum = val;
      //   this.administratione();
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
::v-deep .el-table .cell {
  text-align: center;
}
</style>
