<template>
    <div class="charge-box">
      <div class="charge-tools">
        <el-form :inline="true" :model="queryParams">
  
          <el-form-item label="告警设备:" style="margin-left: 25px;">
            <el-input placeholder="请输入告警设备" v-model="queryParams.equipment" clearable></el-input>
          </el-form-item>
  
          <el-form-item label="告警信息:" style="margin-left: 20px;">
            <el-input placeholder="请输入告警信息" v-model.trim="queryParams.info" clearable></el-input>
          </el-form-item>
          <el-form-item label="告警状态:" style="margin-left: 20px;">
            <el-select v-model="queryParams.state" clearable placeholder="请选择状态">
              <el-option label="待处理" value="0"></el-option>
              <el-option label="处理中" value="1"></el-option>
              <el-option label="已处理" value="2"></el-option>
            </el-select>
          </el-form-item>
  
          <el-form-item label="告警时间:" style="margin-left: 20px">
            <el-date-picker
              class="times"
              v-model="dateArr.alarmDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
  
          <el-form-item>
            <el-button type="primary" @click="handleQuery" class="serch actve">查询</el-button>
          <el-button type="primary" @click="resetForm" class="serch">重置</el-button>
          </el-form-item>
  
        </el-form>
      </div>
      <div class="charge-table">
        <div class="charge-table-top">
          <el-button type="primary" @click="alarmExport" class="daochu">导出结果</el-button>
        </div>
        <div class="charge-table-bottom">
          <el-table
            :data="datalist"
            :header-cell-style="{
              background: '#1d283e',
              borderColor: '#2f3c86',
              height: '36px',
              lineHeight: '36px',
              color:'white',
              fontSize: '16px',
            }"
            stripe
            fit
            :height="tableheight"
            style="width: 100%"
            :default-sort = "{prop: 'date', order: 'descending'}"
            >
            <el-table-column
              prop="equipment"
              label="告警设备">
            </el-table-column>
            <el-table-column
              prop="code"
              label="告警标识">
            </el-table-column>
            <el-table-column
              prop="info"
              label="告警信息"
              >
            </el-table-column>
            <el-table-column
              prop="beginTime"
              label="告警开始时间"
              sortable
              >
            </el-table-column>
            <el-table-column
              prop="endTime"
              label="告警结束时间"
              sortable
              >
            </el-table-column>
            <el-table-column label="告警状态">
                <template slot-scope="scope">
                  <template v-if="scope.row.state === 0">
                    <el-badge is-dot class="item nostate">待处理</el-badge>
                  </template>
                  <template v-else-if="scope.row.state === 1">
                    <el-badge is-dot class="item instate">处理中</el-badge>
                  </template>
                  <template v-else>
                    <el-badge is-dot class="item">已处理</el-badge>
                  </template>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100" align="center">
              <template slot-scope="scope">
                <el-button type="primary" class="handle" size="small" @click="handlealarm(scope.row)">处理</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        
        <div class="pageblock">
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        </div>
      </div>

      <!--处理告警弹窗-->
      <div class="rolemanage alarmFrom">
        <el-dialog 
        title="告警处理" 
        :visible.sync="dialogAlarmVisible" 
        :destroy-on-close="true"
        >
          <el-form 
          :model="alarmFrom" 
          v-loading="loading"
          :rules="rules"
          ref="ruleForm"
          >
            <el-form-item label="告警设备：" :label-width="formLabelWidth">
              <span>{{alarmFrom.equipment}}</span>
            </el-form-item>
            <el-form-item label="告警信息：" :label-width="formLabelWidth">
              <span>{{alarmFrom.info}}</span>
            </el-form-item>
            <el-form-item label="告警开始时间：" :label-width="formLabelWidth">
              <span>{{alarmFrom.beginTime}}</span>
            </el-form-item>
            <el-form-item label="处理：" :label-width="formLabelWidth" style="margin-bottom:10px">
              <el-select v-model="alarmFrom.state" placeholder="请选择状态">
                <el-option label="处理中" value="1"></el-option>
                <el-option label="已处理" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="说明：" :label-width="formLabelWidth" prop="remark">
              <el-input type="textarea" :rows="4" placeholder="请输入说明,30字以内" maxlength="30" v-model="alarmFrom.remark">
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogAlarmVisible = false" class="exit">取 消</el-button>
            <el-button type="primary" @click="alarmDispose" class="save">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <!--处理告警弹窗结束-->
    </div>
  </template>
  
  <script>
  import '../permission.scss';
  import { alarmList,alarmExport,alarmDispose } from "@/api/records";
  import serverUrl from '../../../../vue.config.js'
  export default {
    name: "RecordAlarm",
    components: {},
    data() {
      return {
        // 表单校验
       rules: {
          remark:[
            { min: 0, max: 30, message: '长度最大30个字符', trigger: 'blur' }
          ],
        },
        //查询时间数组
        dateArr: {
          alarmDate: [],
        },
        datalist:[],
        //查询参数
        queryParams:{
          page: 1, //当前页
          pageSize:10,//每页条数
          equipment:undefined, //充电机ID
          info:undefined, //告警信息
          beginTime:undefined,
          endTime:undefined,
          state:undefined, //告警状态
          orderByField:undefined, //排序字段
          orderByWays:'desc'//排序方式
        },
        total:0,//总条数，
        tableheight:0,//表格高度设置
        dialogAlarmVisible:false,//弹窗状态
        alarmFrom:{
          id:0,
          remark:null,
          state:undefined,
          equipment:undefined,
          info:undefined,
          beginTime:undefined,
        },
        formLabelWidth: '120px',
        loading:false,
      };
    },
    watch: {
      tableheight(val) {
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if (!this.heightTimer) {
          // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
          this.screenHeight = val
          this.heightTimer = true
          setTimeout(function() {
            this.heightTimer = false
          }, 400)
        }
      }
    },
    mounted() {
      this.alarmList()
      this.onLoadHeight()
      this.changeWindow()
    },
    methods: {
      /*设置初始视窗高度*/
      onLoadHeight(){
        this.$nextTick(()=>{
          this.tableheight = document.body.clientHeight - 460
        })
      },
      /*设置窗口变化高度*/
      changeWindow(){
        window.onresize = () => {
          return (() => {
            this.tableheight = document.body.clientHeight - 460
          })()
        }
      },
      //告警记录列表，
      alarmList(){
        const params=this.queryParams
        alarmList(params).then(res=>{
          this.datalist =res.data.records
          this.total=res.data.total
        });
      },
      /**分页下一页 */
      handleSizeChange(val) {
        this.queryParams.pageSize = val
        this.alarmList()
      },
      /**分页选择页数 */
      handleCurrentChange(val) {
        this.queryParams.page = val
        this.alarmList()
      },
      //搜索
      handleQuery(){
        if(this.dateArr.alarmDate.length !== 0){
          this.queryParams.beginTime = this.dateArr.alarmDate[0]
          this.queryParams.endTime = this.dateArr.alarmDate[1]
        }
        this.alarmList()
      },
      //搜索重置
      resetForm(){
        this.queryParams.beginTime = undefined
        this.queryParams.state = undefined
        this.queryParams.equipment = undefined
        this.queryParams.info = undefined
        this.queryParams.remark = null
        this.alarmList()
      },
      //导出结果
      alarmExport(){
        this.$confirm('确认导出结果？', '导出结果', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(async() => {
            const res = await alarmExport(this.queryParams)
            const execlUrl=serverUrl.devServer.proxy['/api'].target+'/excel/'+res.data
            window.open(execlUrl,'_blank')
          })
        .catch(err => { console.error(err) })
      },
      //告警状态弹窗
      handlealarm(row){
        if(row.state === 0)
        {
          this.alarmFrom.state=undefined
        }else{
          this.alarmFrom.state=row.state+'';
        }
        this.alarmFrom.id=row.id;
        this.alarmFrom.equipment=row.equipment;
        this.alarmFrom.info=row.info;
        this.alarmFrom.beginTime=row.beginTime;
        this.alarmFrom.remark=row.remark;
        this.dialogAlarmVisible=true;
      },
      //处理告警
      alarmDispose(){
        const params={
          id:this.alarmFrom.id,
          state:this.alarmFrom.state,
          remark:this.alarmFrom.remark
        }
        alarmDispose(params).then(res=>{
          if(res.code === 0){
            this.loading = false;
            this.dialogAlarmVisible = false;
            this.$message({
              type: 'success',
              message: '操作成功！'
            })
            this.alarmList()
          }else {
            this.loading = false;
            return this.$message.error(res.msg);
          }
        })
      },
    },
  };
  </script>