<template>
  <div>
    <el-row v-if="!contrastVisible">
      <el-col :span="24">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <Timeinterval :interval="3" ref="interval"></Timeinterval>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="transientlist"
              >查询</el-button
            >
            <!-- <el-button type="primary" icon="el-icon-warning"></el-button> -->
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary" icon="el-icon-s-fold">波形对比</el-button>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" icon="el-icon-download" @click="download"
              >下载波形</el-button
            >
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-download"
              @click="exportEvent"
              >列表导出</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="text" @click="closeHandle"
              >条件筛选<i
                :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"
              ></i
            ></el-button>
          </el-form-item>
        </el-form>
        <div class="container" id="container">
          <i @click="closeHandle" class="el-icon-circle-close coles"></i>
          <el-form :inline="true" :model="formData" label-width="90px" class="">
            <el-form-item label="统计类型:">
              <el-radio-group v-model="formData.isType">
                <el-radio-button :label="0">在线</el-radio-button>
                <el-radio-button :label="1">离线</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <Area @click="handleNodeClick" ref="area"></Area>
            </el-form-item>

            <el-form-item label="数据筛选:">
              <el-input
                v-model="formData.searchValue"
                clearable
                style="width: 290px"
                placeholder="根据监测点,IP/MAC地址等信息查询"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-s-fold"
                @click="dialogVisible = true"
                >多条件筛选</el-button
              >

              <!-- <el-button type="primary" icon="el-icon-warning"></el-button> -->
            </el-form-item>
          </el-form>
        </div>
        <!--对话框-->
        <el-dialog
          :close-on-click-modal="false"
          title="多条件筛选"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <el-form
           
            :model="formData"
            label-width="120px"
            class="form"
          >
            <el-form-item label="暂态幅值(%):">
              <el-input
                v-model="formData.eventValueMin"
                placeholder="0"
                onkeyup="value = value.replace(/[^0-9]/g,'')"
                maxlength="3"
                clearable
                style="width: 94px"
              ></el-input>
              <el-tag style="margin-left: 5px;">&lt;  幅值数  &lt;</el-tag>
              <el-input
                v-model="formData.eventValueMax"
                placeholder="200"
                onkeyup="value = value.replace(/[^0-9]/g,'')"
                maxlength="3"
                clearable
                style="margin-left: 5px;width: 94px"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="&lt;  幅值  &lt;" label-width="100px">
             
            </el-form-item> -->
            <el-form-item label="暂态持续时间(s):" class="top">
              <el-input
                v-model="formData.persistMin"
                placeholder="请输入X秒"
                onkeyup="value=value.replace(/[^\d.]/g,'')"
                clearable
                style="width: 94px"
              ></el-input>
              <el-tag style="margin-left: 5px;">&lt;  时间数  &lt;</el-tag>
              <el-input
                v-model="formData.persistMax"
                placeholder="请输入X秒"
                onkeyup="value=value.replace(/[^\d.]/g,'')"
                clearable
                style="margin-left: 5px;width: 94px"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="&lt;  持续时间  &lt;">
            
            </el-form-item> -->
            <el-form-item label="事件严重度:" class="top">
              <el-input
                v-model="formData.severityMin"
                placeholder="请输入正负数"
                onkeyup="value=value.replace(/[^\d\.-]/g,'')"
                clearable
                style="width: 94px"
              ></el-input>
              <el-tag style="margin-left: 5px;">&lt;  严重度  &lt;</el-tag>
              <el-input
                v-model="formData.severityMax"
                placeholder="请输入正负数"
                onkeyup="value=value.replace(/[^\d\.-]/g,'')"
                clearable
                style="margin-left: 5px;width: 94px;"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="&lt;  严重度  &lt;" label-width="110px">
             
            </el-form-item> -->
            <el-form-item label="暂降类型:" class="top">
              <el-select
                v-model="formData.eventType"
                placeholder="请选择暂降类型"
                clearable
                multiple
                collapse-tags
                style="width:100%"
              >
                <el-option
                  v-for="item in typeoptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="暂降原因:" class="top">
              <el-select
                v-model="formData.eventReason"
                placeholder="请选择暂降原因"
                clearable
                multiple
                collapse-tags
                style="width:100%"
              >
                <el-option
                  v-for="item in reasonoptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="触发类型:" class="top">
              <el-select
                v-model="formData.waveType"
                placeholder="请选择触发类型"
                clearable
                multiple
                collapse-tags
                style="width:100%"
              >
                <el-option
                  v-for="item in triggeroptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否有波形:" class="top">
              <el-select
                v-model="formData.fileFlag"
                placeholder="请选择是否存在波形"
                clearable
                style="width:100%"
              >
                <el-option
                  v-for="item in wareaoptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="affirm">确 认</el-button>
          </span>
        </el-dialog>
      </el-col>
    </el-row>

    <div v-else class="el-row">
      <el-row>
        <el-col :span="24">
          <svg-icon
            class="back"
            icon-class="back"
            @click="contrastVisible = false"
          />
          <xieBoFenxi />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
// import { dictypeData } from "@/api/user";
import { dicData } from "@/assets/commjs/dictypeData";
import Area from "@/views/components/Area/Area.vue";
import Timeinterval from "@/views/components/TimePicker/index4";
import xieBoFenxi from "../../../../Photovoltaic-system/xieBoFenxi.vue";
import api from "@/api/integraliy/integraliy";
export default {
  components: { Timeinterval, xieBoFenxi, Area },
  props: {
    lineIds: {
      type: [Array, Object],
    },
    // timeIds: {
    //   type: [Array, Object],
    // },
  },
  data() {
    return {
      view: false,
      dialogVisible: false,
      contrastVisible: false,
      formData: {
        deptIndex: "",
        isType: 0,
        monitorFlag: 2,
        powerFlag: 2,
        pageNum: 1,
        pageSize: 20,
        serverName: "event-boot",
        searchBeginTime: "2022-08-01",
        searchEndTime: "2022-08-10",
        statisticalType: {},
        eventValueMin: "",
        eventValueMax: "",
        persistMin: "",
        persistMax: "",
        severityMin: "",
        severityMax: "",
        eventType: [],
        eventReason: [],
        waveType: [],
        searchValue: "",
        fileFlag: "",
        // timeFlag: "",
      },
      //暂降类型
      typeoptions: [],
      //暂降原因
      reasonoptions: [],
      //触发类型
      triggeroptions: [],
      //波形类型
      wareaoptions: [
        {
          id: 1,
          label: "是",
        },
        {
          id: 0,
          label: "否",
        },
      ],
    };
  },
  created() {
    this.getclassificationData();
  },
  mounted() {
    this.formData.deptIndex = JSON.parse(
      window.sessionStorage.getItem("Info")
    ).deptId;
    this.formData.searchBeginTime = this.$refs.interval.timeValue[0];
    this.formData.searchEndTime = this.$refs.interval.timeValue[1];
  },
  methods: {
    // changeFn(val){
    //   console.log(val,'11111111111111');
    // },
    download() {
      if (this.lineIds.length == 0) {
        this.$message({
          message: "请选择数据!",
          type: "warning",
        });
        return;
      }
      let data = {
        lineId: this.lineIds,
        // timeId: this.timeIds,
      };
      api.downloadWaveFile(data).then((response) => {
        if (response.type == "application/json") {
          return this.$message({
            message: "暂无可下载的波形文件!",
            type: "warning",
          });
        }
        this.$message("下载中...");
        let blob = new Blob([response], { type: "application/zip" });

        const url = window.URL.createObjectURL(blob);
        const link = document.createElement("a"); // 创建a标签
        link.href = url;
        link.download = "波形分析下载"; // 设置下载的文件名
        document.body.appendChild(link);
        link.click(); //执行下载
        document.body.removeChild(link); //释放标签
      });
    },
    //获取暂降类型
    getclassificationData() {
      //电网拓扑
      this.formData.statisticalType = dicData("Statistical_Type", [])[0];
      //暂降类型
      this.typeoptions = dicData("Event_Type", []);
      //暂降原因
      this.reasonoptions = dicData("Event_Reason", []);
      //触发类型
      this.triggeroptions = dicData("Event_Statis", []);
    },
    handleNodeClick(data) {
      this.formData.deptIndex = data.id;
    },
    //多条件过滤触发事件
    // duoyjfilter(){
    //     this.dialogVisible = true
    // },
    //对话框关闭触发事件
    handleClose() {
      this.dialogVisible = false;
      //  this.contrastVisible = false
    },
    //查询
    transientlist() {
      this.formData.searchBeginTime = this.$refs.interval.timeValue[0];
      this.formData.searchEndTime = this.$refs.interval.timeValue[1];
      setTimeout(() => {
        this.$emit("clickSon");
      }, 100);
    },
    //确认
    affirm() {
      this.transientlist();
      this.dialogVisible = false;
    },
    //导出
    exportEvent() {
      this.$emit("exportEvent");
    },
    closeHandle() {
      if (this.view) {
        this.view = false;
      } else {
        this.view = true;
      }
      //console.log('关闭和展开');
      const dom = document.getElementById("container");

      if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
        dom.className = "container expend";
      } else {
        dom.className = "container close-container";
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../../../styles/comStyle.less");
::v-deep .el-table .cell {
  text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  padding: 10px;
}
::v-deep .demo-form-inline {
  .el-form-item--small.el-form-item {
    margin-bottom: 0;
    //margin-right:-px;
  }
}
.bx-g {
  margin-right: -5px;
}

::v-deep .area {
  .el-input {
    width: 125px;
  }
}
::v-deep .data {
  .el-input {
    width: 100px;
  }
}
// ::v-deep .form {
//   .el-select > .el-input {
//     width: 390px;
//   }
//   .el-input--small {
//     width: 125px;
//   }
// }

.container {
  /* margin: auto; */
  top: 0px;
  right: 0;
  width: 560px;
  height: 0px;
  z-index: 2000;
  position: absolute;
  background-color: #e4e7ebb9;
  overflow: auto;
  scroll-behavior: smooth;
  -radius: 20px;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: block;
}
.expend {
  animation: expend ease 5s forwards;
}
.close-container {
  animation: no-expend ease 1s forwards;
}
@keyframes expend {
  from {
    top: 0px;
    height: auto;
  }
  to {
    height: auto;
    top: 0px;
  }
}
@keyframes no-expend {
  from {
    height: 10%;
    top: 0px;
  }
  to {
    top: 0px;
    height: 0px;
  }
}
.coles {
  position: absolute;
  right: 0;
  font-size: 20px;
  cursor: pointer;
}
</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>