<template>
  <div>
    <div class="app-container">
      <div class="searh">
        <el-form ref="queryParams" :model="queryParams">
          <el-row>
            <el-col :span="6">
              <el-form-item label="报警时间" label-width="120px" prop="warningTime">
                <el-date-picker
                 size="small"
                  v-model="queryParams.warningTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item style="margin-left: 120px">
                <div class="searhButtons">
                  <el-button
                    size="mini"
                    icon="el-icon-search"
                    type="primary"
                    @click="onResearchClick()"
                    >查询</el-button
                  >
                  <el-button
                    size="mini"
                    icon="el-icon-refresh"
                    @click="resetSearchForm()"
                    style="margin-left: 20px"
                    >重置</el-button
                  >
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="dataTable">
        <avue-crud
          style="margin-top: 10px"
          :table-loading="loading"
          :option="option"
          :data="tableData"
          :page.sync="tablePage"
          @size-change="sizeChange"
          @current-change="currentChange"
          @selection-change="handleSelectionChange"
        >
          <!-- 左边按钮 -->
          <!-- :disabled="single" -->
          <template slot="menuLeft">
            <el-button
              type="primary"
              icon="el-icon-notebook-2"
              size="mini"
              class="operationBut"
              @click.stop="batchProcessing()"
              >批量处理</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-delete"
              size="mini"
              class="operationBut"
              @click.stop="allRemove()"
              >一键清除</el-button
            >
          </template>
          <template slot-scope="scope" slot="menu">
            <el-button
              type="text"
              icon="el-icon-edit"
              size="small"
              @click.stop="batchProcessing(scope.row)"
              >处理</el-button
            >
          </template>
        </avue-crud>
      </div>
      <!-- 批量处理警告 -->
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogOpen"
      width="40%"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="处理结果" prop="process">
              <el-input v-model="form.process"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">处 理</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {queryAlarmDetail,dealwarning} from "@/api/home/home";
export default {
  name: "userManagement",
  props: {
    data: Object
  },
  data() {
    return {
      queryParams: {
        jcType: "",
        gjType: "",
        warningTime: "",
      },
      form: {
        process: "",
        id : "",
        state : "",
      },
      // 是否显示弹出层
      open: false,
      // 选中的用户id
      selectIds: [],
      selectStatus: [],
      single: true,
      tablePage: {
        limit: 10,
        total: 0,
        page: 1,
      },
      queryData:{
        state:"1",
        startTime:"",
        endTime:"",
        eqmId:"",
        page: 1,
        limit: 10,
      },
      // 遮罩层
      loading: false,
      // 弹出层标题
      dialogTitle: "告警单批处理",
      jcOptions: [],
      gjOptions: [],
      // 是否显示弹出层
      dialogOpen: false,
      rules: {
        cljg: [
          { required: true, message: "处理结果不能为空", trigger: "blur" },
        ],
      },
      option: {
        title: "",
        border: true,
        emptyText: "暂无数据!",
        align: "center",
        menuAlign: "center",
        menuWidth: 200,
        menuTitle: "操作",
        menuType: "text",
        addBtn: false,
        delBtn: false,
        editBtn: false,
        refreshBtn: false,
        selection: false,
        // multiple: false,
        column: [
          {
            label: "监测设备",
            prop: "deviceName",
          },
          {
            label: "阈值",
            prop: "threadval",
          },
          {
            label: "当前值",
            prop: "warningValue",
          },
          {
            label: "告警信息",
            prop: "warnDesc",
          },
          {
            label: "报警时间",
            prop: "warnTime",
          },
        ],
      },
      toDept: "1",
      // 表格选中的数据
      selectData: {},
      tableData: [],
    };
  },
  watch:{
    data:function(value){
      this.tablePage.total=value.total
      this.tableData=value.records
      this.queryData.eqmId = value.records[0].eqmId
    }
  },
  created() {},
  methods: {
    onResearchClick(){
      this.queryData.startTime = this.queryParams.warningTime[0]
      this.queryData.endTime = this.queryParams.warningTime[1]
      this.getList()
    },
    getList(){
      queryAlarmDetail(this.queryData).then((response) => {
        const { code, data, msg } = response;
        this.loading = false;
        if (code === 200) {
          this.tableData = data.records
          this.tablePage.total = data.total
        } else {
          this.msgError(msg);
        }
      })
    },
    // 重置条件搜索表单
    resetSearchForm() {
      this.$nextTick(() => {
        if (this.$refs["queryParams"] !== undefined) {
          this.$refs["queryParams"].resetFields();
        }
      });
    },
    // 批量处理
    batchProcessing(row) {
      this.dialogOpen = true;
      this.form.id = row.id
      this.form.state = row.state
    },
    // 一键清除
    allRemove() {
      this.$confirm("确定要处理当前所有的告警吗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          dealwarning(this.form).then((response) => {
            const { code, data, msg } = response;
            this.loading = false;
            if (code === 200) {
              this.dialogOpen = false
              this.$message.success('处理成功！')
              this.getList()
            } else {
              this.msgError(msg);
            }
          })
        })
        .catch(function () {});
    },
    handleSelectionChange(selection) {
      this.selectIds = selection.map((item) => item.noticeId);
      this.single = selection.length != 1;
    },
    /** 页码大小改变操作 */
    sizeChange(val) {
      this.tablePage.limit = 10;
      this.tablePage.page = val;
      this.getList();
    },
    /** 翻页操作 */
    currentChange(val) {
      // this.tablePage.page = val;
      this.queryData.page = val
      this.getList();
    },
    // 批量处理
    submitForm() {
      dealwarning(this.form).then((response) => {
        const { code, data, msg } = response;
        this.loading = false;
        if (code === 200) {
          this.dialogOpen = false
          this.$message.success('处理成功！')
          this.getList()
        } else {
          this.msgError(msg);
        }
      })
    },
    cancel() {
      this.dialogOpen = false;
    },
  },
};
</script>
<style lang="scss">
.dataTable {
  .operationBut {
    margin-right: 10px !important;
  }
}
.avue-crud__right {
  display: none;
}
.el-dialog__body{
padding: 0px 20px;
}
.el-select{
  width: 100%;
}
.el-form {
  margin-top: 20px;
}
.el-table__empty-block {
  padding: 50px 0;
  box-sizing: border-box;
}
</style>