<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="预警编号" prop="alertCode">
        <el-input v-model="queryParams.alertCode" placeholder="请输入预警编号" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="设备编码" prop="deviceCode">
        <el-input v-model="queryParams.deviceCode" placeholder="请输入设备编码" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="预警类型" prop="alertType">
        <el-select v-model="queryParams.alertType" placeholder="请选择类型" clearable>
          <el-option label="参数超限" value="参数超限"/>
          <el-option label="设备异常" value="设备异常"/>
          <el-option label="质量异常" value="质量异常"/>
        </el-select>
      </el-form-item>
      <el-form-item label="预警状态" prop="alertStatus">
        <el-select v-model="queryParams.alertStatus" placeholder="请选择状态" clearable>
          <el-option label="未处理" value="0"/>
          <el-option label="处理中" value="1"/>
          <el-option label="已处理" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="预警时间">
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['base:processAlert:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="alertList" :row-class-name="tableRowClassName">
      <el-table-column label="预警编号" align="center" prop="alertCode" width="120"/>
      <el-table-column label="预警类型" align="center" prop="alertType" width="100"/>
      <el-table-column label="预警级别" align="center" prop="alertLevel" width="80">
        <template slot-scope="scope">
          <el-tag :type="scope.row.alertLevel === '3' ? 'danger' : scope.row.alertLevel === '2' ? 'warning' : 'info'">
            {{ scope.row.alertLevel === '3' ? '紧急' : scope.row.alertLevel === '2' ? '重要' : '一般' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="设备编码" align="center" prop="deviceCode"/>
      <el-table-column label="设备名称" align="center" prop="deviceName"/>
      <el-table-column label="参数名称" align="center" prop="paramName"/>
      <el-table-column label="预警内容" align="center" prop="alertContent" show-overflow-tooltip/>
      <el-table-column label="预警值" align="center" prop="alertValue" width="80"/>
      <el-table-column label="阈值" align="center" prop="thresholdValue" width="80"/>
      <el-table-column label="预警时间" align="center" prop="alertTime" width="160"/>
      <el-table-column label="状态" align="center" prop="alertStatus" width="80">
        <template slot-scope="scope">
          <el-tag :type="scope.row.alertStatus === '2' ? 'success' : scope.row.alertStatus === '1' ? 'warning' : 'danger'">
            {{ scope.row.alertStatus === '2' ? '已处理' : scope.row.alertStatus === '1' ? '处理中' : '未处理' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
        <template slot-scope="scope">
          <el-button v-if="scope.row.alertStatus !== '2'" size="mini" type="text" icon="el-icon-check" @click="handleProcess(scope.row)" v-hasPermi="['base:processAlert:edit']">处理</el-button>
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>

    <el-dialog title="处理预警" :visible.sync="processOpen" width="500px" append-to-body>
      <el-form ref="processForm" :model="processForm" :rules="processRules" label-width="100px">
        <el-form-item label="预警编号">
          <el-input v-model="processForm.alertCode" disabled/>
        </el-form-item>
        <el-form-item label="预警内容">
          <el-input v-model="processForm.alertContent" type="textarea" disabled/>
        </el-form-item>
        <el-form-item label="处理状态" prop="alertStatus">
          <el-radio-group v-model="processForm.alertStatus">
            <el-radio label="1">处理中</el-radio>
            <el-radio label="2">已处理</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="处理结果" prop="handleResult">
          <el-input v-model="processForm.handleResult" type="textarea" placeholder="请输入处理结果"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitProcess">确 定</el-button>
        <el-button @click="processOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="预警详情" :visible.sync="viewOpen" width="600px" append-to-body>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="预警编号">{{ currentRow.alertCode }}</el-descriptions-item>
        <el-descriptions-item label="预警类型">{{ currentRow.alertType }}</el-descriptions-item>
        <el-descriptions-item label="预警级别">{{ currentRow.alertLevel === '3' ? '紧急' : currentRow.alertLevel === '2' ? '重要' : '一般' }}</el-descriptions-item>
        <el-descriptions-item label="预警状态">{{ currentRow.alertStatus === '2' ? '已处理' : currentRow.alertStatus === '1' ? '处理中' : '未处理' }}</el-descriptions-item>
        <el-descriptions-item label="设备编码">{{ currentRow.deviceCode }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ currentRow.deviceName }}</el-descriptions-item>
        <el-descriptions-item label="参数编码">{{ currentRow.paramCode }}</el-descriptions-item>
        <el-descriptions-item label="参数名称">{{ currentRow.paramName }}</el-descriptions-item>
        <el-descriptions-item label="预警值">{{ currentRow.alertValue }}</el-descriptions-item>
        <el-descriptions-item label="阈值">{{ currentRow.thresholdValue }}</el-descriptions-item>
        <el-descriptions-item label="预警内容" :span="2">{{ currentRow.alertContent }}</el-descriptions-item>
        <el-descriptions-item label="预警时间" :span="2">{{ currentRow.alertTime }}</el-descriptions-item>
        <el-descriptions-item label="处理人">{{ currentRow.handleUser }}</el-descriptions-item>
        <el-descriptions-item label="处理时间">{{ currentRow.handleTime }}</el-descriptions-item>
        <el-descriptions-item label="处理结果" :span="2">{{ currentRow.handleResult }}</el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="viewOpen = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listProcessAlert, getProcessAlert, handleProcessAlert } from "@/api/base/processAlert";

export default {
  name: "ProcessAlert",
  data() {
    return {
      loading: true,
      showSearch: true,
      total: 0,
      alertList: [],
      dateRange: [],
      processOpen: false,
      viewOpen: false,
      currentRow: {},
      processForm: {},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        alertCode: null,
        deviceCode: null,
        alertType: null,
        alertStatus: null,
      },
      processRules: {
        alertStatus: [{ required: true, message: "请选择处理状态", trigger: "change" }],
        handleResult: [{ required: true, message: "请输入处理结果", trigger: "blur" }],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      let params = { ...this.queryParams };
      if (this.dateRange && this.dateRange.length === 2) {
        params.params = { beginTime: this.dateRange[0], endTime: this.dateRange[1] };
      }
      listProcessAlert(params).then(response => {
        this.alertList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    tableRowClassName({ row }) {
      if (row.alertStatus === '0' && row.alertLevel === '3') {
        return 'danger-row';
      } else if (row.alertStatus === '0') {
        return 'warning-row';
      }
      return '';
    },
    handleProcess(row) {
      this.processForm = {
        alertId: row.alertId,
        alertCode: row.alertCode,
        alertContent: row.alertContent,
        alertStatus: row.alertStatus === '0' ? '1' : row.alertStatus,
        handleResult: row.handleResult,
      };
      this.processOpen = true;
    },
    handleView(row) {
      this.currentRow = row;
      this.viewOpen = true;
    },
    submitProcess() {
      this.$refs["processForm"].validate(valid => {
        if (valid) {
          handleProcessAlert(this.processForm).then(response => {
            this.$modal.msgSuccess("处理成功");
            this.processOpen = false;
            this.getList();
          });
        }
      });
    },
    handleExport() {
      this.download('base/processAlert/export', { ...this.queryParams }, `processAlert_${new Date().getTime()}.xlsx`);
    }
  }
};
</script>

<style scoped>
::v-deep .warning-row {
  background-color: #FDF6EC !important;
}
::v-deep .danger-row {
  background-color: #FEF0F0 !important;
}
</style>
