<template>
  <el-dialog
    title="告警详情"
    :visible.sync="dialogVisible"
    fullscreen
    :before-close="handleClose"
    class="warnDialog"
  >
    <div class="warnBox">
      <div class="search">
        <el-form :inline="true" :model="formdata" class="demo-form-inline">
          <!-- <el-form-item label="审批人">
            <el-input v-model="formdata.user" placeholder="审批人"></el-input>
          </el-form-item> -->
          <el-form-item label="开始日期">
            <el-date-picker
              @change="changestartdate"
              v-model="formdata.starttime"
              :picker-options="pickerOptions"
              :clearable="false"
              type="date"
              placeholder="开始日期"
              :default-time="['00:00:00']"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束日期">
            <el-date-picker
              @change="changeenddate"
              v-model="formdata.endtime"
              :clearable="false"
              :picker-options="pickerOptions"
              type="date"
              :default-time="['23:59:59']"
              placeholder="结束日期"
              class="ml10"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="处理状态">
            <el-select
              v-model="formdata.stateVal"
              placeholder="请选择"
              @change="statechange"
            >
              <el-option
                v-for="item in stateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button
              type="primary"
              icon="el-icon-document"
              class="exportBtn"
              @click="exportWarn"
              >导出数据</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-bell"
              class="exportBtn"
              @click="clearWarnAll"
              >一键处理</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="warnTable">
        <el-table
          ref="restauranttable"
          :data="tableData"
          border
          height="calc(100% - 38px)"
        >
          <el-table-column align="center" prop="warnTime" label="报警时间">
          </el-table-column>
          <el-table-column align="center" prop="zsbName" label="主设备名称">
          </el-table-column>
          <el-table-column
            align="center"
            prop="warnDesc"
            label="告警信息"
            min-width="200"
          >
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row.warnDesc"
                placement="top"
              >
                <span> {{ scope.row.warnDesc }}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="warnValue" label="当前值">
          </el-table-column>
          <el-table-column align="center" prop="triggerDesc" label="触发条件">
          </el-table-column>

          <el-table-column align="center" prop="threshold" label="告警阈值">
          </el-table-column>
          <el-table-column align="center" prop="warnLevel" label="告警等级">
            <template slot-scope="scope">
              <span v-if="scope.row.warnLevel == 2"
                ><el-tag type="danger">高</el-tag>
              </span>
              <span v-else-if="scope.row.warnLevel == 1">
                <el-tag type="warning">中</el-tag>
              </span>
              <span v-else-if="scope.row.warnLevel == 0">
                <el-tag type="info">低</el-tag>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="95" fixed="right">
            <template slot-scope="scope">
              <span
                v-if="scope.row.state == 1"
                class="readbox"
                @click="handleReadClick(scope.row)"
                >[未处理]</span
              >
              <span v-if="scope.row.state == 0">[已处理]</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="pageNation">
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page="page"
            :page-size="pageSize"
            :page-sizes="[20, 40, 100]"
            layout="sizes, prev, pager, next, jumper,total"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  warningListApi,
  updateStateApi,
  oneKeyUpdateStateApi,
} from "@/utils/api/index";
export default {
  name: "warnDialog",
  components: {},
  data() {
    return {
      pickerOptions: {
        disabledDate(date) {
          return date.getTime() > Date.now(); // 禁用大于今天的日期
        },
      },
      dialogVisible: false,
      formdata: {
        stateVal: 1,
      },
      tableData: [],
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
      stateOptions: [
        {
          value: 1,
          label: "未处理",
        },
        {
          value: 0,
          label: "已处理",
        },
      ],
    };
  },
  created() {
    const startDate = new Date(); // 获取当前时间
    startDate.setHours(0); // 设置小时为23
    startDate.setMinutes(0); // 设置分钟为59
    startDate.setSeconds(0); // 设置秒数为59
    this.$set(this.formdata, "starttime", startDate);
    console.log(this.formdata.starttime);
    const currentDate = new Date(); // 获取当前时间
    currentDate.setHours(23); // 设置小时为23
    currentDate.setMinutes(59); // 设置分钟为59
    currentDate.setSeconds(59); // 设置秒数为59
    this.$set(this.formdata, "endtime", currentDate);
    console.log("我是开始时间", this.formdata.starttime);
    console.log("我是结束时间", currentDate);
  },
  watch: {
    endtime(newVal) {
      if (newVal) {
        const date = new Date(newVal);
        date.setHours(23);
        date.setMinutes(59);
        date.setSeconds(59);
        this.formdata.endtime = date;
      }
    },
  },
  mounted() {},
  methods: {
    getwarnList(params) {
      warningListApi(params)
        .then((res) => {
          console.log(res);
          this.tableData = res.data.content;
          this.total = res.data.totalElements;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    changestartdate(val) {
      console.log(val);
      if (val == null) {
        console.log(new Date());
        const startDate = new Date();
        startDate.setHours(0); // 设置小时为23
        startDate.setMinutes(0); // 设置分钟为59
        startDate.setSeconds(0); // 设置秒数为59
        this.formdata.starttime = startDate;
      } else {
        this.formdata.starttime = val;
      }
    },
    //结束日期
    changeenddate(val) {
      if (val == null) {
        console.log(new Date());
        const endDate = new Date();
        endDate.setHours(23); // 设置小时为23
        endDate.setMinutes(59); // 设置分钟为59
        endDate.setSeconds(59); // 设置秒数为59
        this.formdata.endtime = endDate;
        console.log(this.formdata.endtime);
      } else {
        val.setHours(23); // 设置小时为23
        val.setMinutes(59); // 设置分钟为59
        val.setSeconds(59); // 设置秒数为59
        this.formdata.endtime = val;
        console.log(val);
      }
    },
    //更改处理状态
    statechange() {
      // this.pageSize = 20;
      // this.page = 1;
    },
    onSubmit() {
      this.page = 1;
      console.log(this.formdata);
      //开始时间和结束时间
      this.formdata.starttime = this.$moment(this.formdata.starttime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      this.formdata.endtime = this.$moment(this.formdata.endtime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      let params = {};
      params.startTime = this.formdata.starttime;
      params.endTime = this.formdata.endtime;
      params.pageSize = this.pageSize;
      params.pageNum = this.page;
      params.state = this.formdata.stateVal;
      console.log(params);
      this.getwarnList(params);
    },
    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      this.tableData = [];
      let params = {};
      params.startTime = this.$moment(this.formdata.starttime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      params.endTime = this.$moment(this.formdata.endtime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      params.pageSize = this.pageSize;
      params.pageNum = this.page;
      params.state = this.formdata.stateVal;
      console.log(params);
      this.getwarnList(params);
    },
    //每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.tableData = [];
      let params = {};
      params.startTime = this.$moment(this.formdata.starttime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      params.endTime = this.$moment(this.formdata.endtime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      params.pageSize = this.pageSize;
      params.pageNum = this.page;
      params.state = this.formdata.stateVal;
      console.log(params);
      this.getwarnList(params);
    },
    display(data) {
      this.dialogVisible = true;
      this.getwarnList(data);
    },
    handleClose() {
      this.dialogVisible = false;
      this.$parent.getwarnList();
    },
    //导出数据
    exportWarn() {
      this.formdata.starttime = this.$moment(this.formdata.starttime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      this.formdata.endtime = this.$moment(this.formdata.endtime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      window.location.href =
        "/cac-api/warning/export?" +
        "startTime=" +
        this.formdata.starttime +
        "&endTime=" +
        this.formdata.endtime;
    },
    //点击变成已处理
    handleReadClick(row) {
      console.log(row);
      setTimeout(function () {
        updateStateApi({
          id: row.id,
          state: 0,
        })
          .then((res) => {
            if (res.success) {
              console.log(res);
              row.state = 0;
            } else {
              this.$message({
                duration: 1500,
                showClose: true,
                message: res.errorMsg,
                type: "error",
              });
            }

            // this.tableData = res.data.content;
          })
          .catch((err) => {
            console.log(err); //代码错误、请求失败捕获
          });
      }, 300);
    },
    //一键处理
    clearWarnAll() {
      this.$confirm("此操作将一键处理所有告警, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        oneKeyUpdateStateApi()
          .then((res) => {
            console.log(res);
            if (res.success) {
              this.$message({
                type: "success",
                message: "一键处理告警成功!",
              });
              this.onSubmit();
            }
          })
          .catch((err) => {
            console.log(err); //代码错误、请求失败捕获
          });
      });
    },
  },
};
</script>

<style lang="less">
.warnDialog {
  .el-dialog {
    background-color: #f0f0f0;
  }
  .el-dialog__header {
    background-color: #337ab7;
    padding: 10px 20px;
    color: #fff;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__headerbtn {
      position: absolute;
      top: 10px;
      right: 20px;
      padding: 0;
      background: 0 0;
      border: none;
      outline: 0;
      cursor: pointer;
      font-size: 24px;
      .el-dialog__close {
        color: #fff;
      }
    }
  }
  .el-dialog__body {
    height: calc(100% - 84px);
    padding: 20px;
    .warnBox {
      height: 100%;
      .search {
        background-color: #fff;
        padding: 16px;
        height: auto;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        margin-bottom: 16px;
        .el-form {
          .el-form-item {
            margin-bottom: 0px;
          }
        }
      }
      .warnTable {
        background-color: #fff;
        padding: 16px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        height: calc(100% - 114px);
        .readbox {
          color: #f56c6c;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
      }
      .pageNation {
        margin-top: 6px;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>
