<template>
  <div>
    <div class="app-container">
      <div class="searh">
        <el-form ref="queryParams" :model="queryParams">
          <el-row>
            <el-col :md="6" :lg="6" :xl="6">
              <el-form-item
                label="变电设备类型"
                label-width="120px"
                prop="jcType"
              >
                <el-select
                  size="small"
                  v-model="queryParams.jcType"
                  placeholder="请选择变电设备类型"
                  @change="getLxType"
                >
                  <el-option
                    v-for="item in jcOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="6" :lg="6" :xl="6">
              <el-form-item label="设备小类" label-width="120px" prop="lxType">
                <el-select
                  size="small"
                  v-model="queryParams.lxType"
                  placeholder="请选择设备小类"
                  @change="getEqType"
                >
                  <el-option
                    v-for="item in lxOptions"
                    :key="item.value"
                    :label="item.zmc"
                    :value="item.lxid"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="6" :lg="6" :xl="6">
              <el-form-item
                label="被监测设备"
                label-width="120px"
                prop="eqType"
              >
                <el-select
                  size="small"
                  v-model="queryParams.eqType"
                  placeholder="请选择被监测设备"
                >
                  <el-option
                    v-for="item in eqOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :md="6" :lg="6" :xl="6">
              <el-form-item label="告警类型" label-width="120px" prop="status">
                <el-select
                  size="small"
                  v-model="queryParams.gjType"
                  placeholder="请选择告警类型"
                >
                  <el-option
                    v-for="item in gjOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :md="6" :lg="6" :xl="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 :md="6" :lg="6" :xl="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="data"
          :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="processingPrompt" prop="cljg">
              <el-input v-model="form.cljg"></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 {
  getJgType,
  getLxType,
  getEqType,
  queryAlarmDetail,
  dealwarning,
} from "@/api/home/home";
export default {
  name: "userManagement",
  props: {
    tableData: Object,
  },
  data() {
    return {
      queryParams: {
        jcType: "",
        lxType: "",
        eqType: "",
        gjType: "",
        warningTime: "",
      },
      // 是否显示弹出层
      open: false,
      // 选中的用户id
      selectIds: [],
      selectStatus: [],
      single: true,
      tablePage: {
        limit: 10,
        total: 0,
        page: 1,
      },
      page: {
        total: 0,
        limit: 1,
        page: 10,
      },
      // 遮罩层
      loading: false,
      // 弹出层标题
      dialogTitle: "告警单批处理",
      jcOptions: [],
      lxOptions: [],
      eqOptions: [],
      gjOptions: [],
      processingPrompt:'批处理结果',
      // 是否显示弹出层
      dialogOpen: false,
      rules: {
        cljg: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
      },
      // 表格数据
      data: [
        {
          toType: "1111",
        },
      ],
      option: {
        title: "",
        border: true,
        emptyText: "暂无数据!",
        align: "center",
        menuAlign: "center",
        menuWidth: 200,
        menuTitle: "操作",
        menuType: "text",
        addBtn: false,
        delBtn: false,
        editBtn: false,
        refreshBtn: false,
        selection: false,
        column: [
          {
            label: "监测设备",
            prop: "deviceName",
          },
          {
            label: "阈值",
            prop: "threadval",
          },
          {
            label: "当前值",
            prop: "warningValue",
          },
          {
            label: "告警信息",
            prop: "warnDesc",
          },
          {
            label: "报警时间",
            prop: "warnTime",
          },
        ],
      },
      toDept: "1",
      // 表格选中的数据
      selectData: {},
      queryData: {
        state: "1",
        startTime: "",
        jgid: "",
        lxid: "",
        mtid: "",
        endTime: "",
        eqmId: "",
        page: 1,
        limit: 10,
      },
      form: {
        process: "",
        id: "",
        state: "",
      },
    };
  },
  watch: {
    tableData: function (value) {
      this.tablePage.total = value.total;
      this.data = value.records;
    },
  },
  created() {
    this.getJgType();
  },
  methods: {
    getJgType() {
      getJgType().then((response) => {
        const { code, data, msg } = response;
        this.loading = false;
        if (code === 200) {
          const obj = [];
          for (const key in data) {
            obj.push({
              label: key,
              value: data[key],
            });
          }
          this.jcOptions = obj;
        } else {
          this.msgError(msg);
        }
      });
    },
    getLxType() {
      getLxType(this.queryParams.jcType).then((response) => {
        const { code, data, msg } = response;
        this.loading = false;
        if (code === 200) {
          this.queryParams.lxType = "";
          this.queryParams.eqType = "";
          this.lxOptions = data;
        } else {
          this.msgError(msg);
        }
      });
    },
    getEqType() {
      getEqType(this.queryParams.jcType, this.queryParams.lxType).then(
        (response) => {
          const { code, data, msg } = response;
          this.loading = false;
          if (code === 200) {
            this.queryParams.eqType = "";
            this.eqOptions = data;
          } else {
            this.msgError(msg);
          }
        }
      );
    },
    // 点击查询
    getList() {
      queryAlarmDetail(this.queryData).then((response) => {
        const { code, data, msg } = response;
        this.loading = false;
        if (code === 200) {
          this.data = data.records;
          this.tablePage.total = data.total;
        } else {
          this.msgError(msg);
        }
      });
    },
    // 重置条件搜索表单
    resetSearchForm() {
      this.$nextTick(() => {
        if (this.$refs["queryParams"] !== undefined) {
          this.$refs["queryParams"].resetFields();
        }
      });
    },
    //搜索
    onResearchClick() {
      this.queryData.startTime = this.queryParams.warningTime
        ? this.queryParams.warningTime[0]
        : "";
      this.queryData.endTime = this.queryParams.warningTime
        ? this.queryParams.warningTime[1]
        : "";
      this.queryData.jgid = this.queryParams.jcType
        ? this.queryParams.jcType
        : "";
      this.queryData.lxid = this.queryParams.lxType
        ? this.queryParams.lxType
        : "";
      this.queryData.eqmId = this.queryParams.eqType
        ? this.queryParams.eqType
        : "";
      this.getList();
    },
    // 批量处理
    batchProcessing(row) {
      this.dialogTitle=row?'告警处理':'告警批处理'
      this.processingPrompt=row?'处理结果':'批处理结果'
      this.rules.cljg[0].message=this.processingPrompt+'不能为空'
      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.queryData.page = val;
      this.getList();
    },
    // 批量处理
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if(valid){
          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 {
  box-shadow: 0 0 5px 4px #e7e7e7;
  .operationBut {
    margin-right: 10px !important;
  }
}
.searh {
  background-color: #ffffff;
  padding: 20px 30px;
  box-sizing: border-box;
  margin-top: 20px;
  box-shadow: 0 0 5px 4px #e7e7e7;
}
.avue-crud__right {
  display: none;
}
.el-dialog__body {
  padding: 0px 20px;
}
.el-select {
  width: 100%;
}
.el-form {
  margin-top: 20px;
}
.el-dialog.is-fullscreen {
  background-color: rgb(240, 240, 240);
}
.el-dialog__header {
  background-color: #106cde;
  padding: 20px 30px !important;
  color: #ffffff;
  .el-dialog__title {
    color: #ffffff;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #ffffff;
    font-size: 18px;
  }
}
.el-card__body {
  min-height: 500px;
  box-shadow: 0 0 5px 4px #e7e7e7;
}
.el-date-editor {
  width: 100% !important;
}
.el-table__empty-block {
  padding: 50px 0;
  box-sizing: border-box;
}
</style>