<template>
  <div class="charge-box">
    <div class="charge-tools">
      <el-form :inline="true" :model="queryParams">

        <el-form-item label="告警设备:">
          <el-input placeholder="请输入告警设备" v-model="queryParams.equipment" clearable></el-input>
        </el-form-item>

        <el-form-item label="告警信息:">
          <el-input placeholder="请输入告警信息" v-model.trim="queryParams.info" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item label="告警状态:">
          <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="告警时间:" >
          <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 label="告警类型:">
          <el-select v-model="queryParams.type" clearable placeholder="请选择类型">
            <el-option label="充电机告警" value="1"></el-option>
            <el-option label="BMS告警" value="2"></el-option>
            <el-option label="机器人告警" value="3"></el-option>
            <el-option label="消防告警" value="4"></el-option>
          </el-select>
        </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-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="type"
            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"
      >
      <div class="drawer_main_title">
							系统检测到【电池/架载机】发生了消防问题，确认需要抓取电池吗？
						</div>
						<div class="drawer_main_tip">
							<span>确认消防换仓：</span>机器人执行消防换仓动作。
						</div>
						<div class="drawer_main_tip">
							<span>忽略：</span>放弃消防换仓。
						</div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="alarmDispose" class="saveOk">确认消防换仓</el-button>
          <el-button @click="dialogAlarmVisible = false" class="exit">忽略</el-button>
        </div>
      </el-dialog>
    </div>
    <!--处理告警弹窗结束-->
  </div>
</template>

<script>
import '../permission.scss';
import { alarmList,alarmDispose,RecordFile,getrealList,FireChangestorage } from "@/api/records";
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',//排序方式
        type:undefined//告警类型
      },
      total:0,//总条数，
      tableheight:0,//表格高度设置
      dialogAlarmVisible:false,//弹窗状态
      alarmFrom:{
      },
      formLabelWidth: '120px',
      loading:false,
    };
  },
  mounted() {
    this.alarmList()
    this.onLoadHeight()
    this.changeWindow()
  },
  methods: {
    //告警记录列表，
    alarmList(){
      const params=this.queryParams
      getrealList(params).then(res=>{
        if(res.code == 0){
          res.data.list.forEach(item=>{
            if(item.type == 1){
              item.type = '充电机告警'
            }else if(item.type == 2){
              item.type = 'BMS告警'
            }else if(item.type == 3){
              item.type = '机器人告警'
            }else if(item.type == 4){
              item.type = '消防告警'
            }
          })
          this.datalist =res.data.list
        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]+' '+'00:00:00'
        this.queryParams.endTime = this.dateArr.alarmDate[1]+' '+'23:59:59'
      }else{
        this.queryParams.beginTime=undefined
        this.queryParams.endTime=undefined
      }
      this.alarmList()
    },
    //搜索重置
    resetForm(){
      this.queryParams.beginTime = undefined
      this.queryParams.state = undefined
      this.queryParams.equipment = undefined
      this.queryParams.info = undefined
      this.queryParams.type = undefined
      this.dateArr.alarmDate=[]
      this.alarmList()
    },
 
    //告警状态弹窗
    handlealarm(row){
      this.alarmFrom=row;
      this.dialogAlarmVisible=true;
    },
    //处理告警
    alarmDispose(){
      const params={
        targetCode: this.alarmFrom.chargerCode,
      }
      // FireChangestorage(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>
<style lang="scss" scoped>
.saveOk{
  width: 150px;
  height: 36px;
  line-height: 36px;
  text-align: center;
}
		.drawer_main_title{
			font-size: 16px;
		}
		.drawer_main_tip{
			font-size: 14px;
			margin-top: 20px;
			span{
				font-size: 16px;
			}
		}
  
</style>