<template>
  <div class="camerasMg">
    <el-row class="topBar">
      <el-col>
        <el-form :inline="true" :model="searchData">
          <el-form-item label>
            <el-input v-model="searchData.eventName" placeholder="请输事件名称"></el-input>
          </el-form-item>
          <el-form-item label>
            <el-input v-model="searchData.eventType" placeholder="请输事件类型"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchFun()">
              <i class="el-icon-search"></i> 搜索
            </el-button>
            <el-button type="primary" @click="resetFun()">
              <i class="el-icon-refresh"></i> 重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table :data="tableData.pageData" stripe border style="width:100%;" :loading="loading">
      <el-table-column width="50" type="index" label="序号"></el-table-column>
      <el-table-column prop="eventName" label="事件名称"></el-table-column>
      <el-table-column prop="eventLevel" label="事件等级">
        <template slot-scope="scope">
          <font>{{scope.row.eventLevel + '级'}}</font>
        </template>
      </el-table-column>
      <el-table-column prop="eventType" label="事件类型"></el-table-column>
      <el-table-column prop="eventAddress" label="事发地点"></el-table-column>
      <el-table-column prop="alarmTime" label="报案时间"></el-table-column>
      <el-table-column prop="alarmPeople" label="报案人"></el-table-column>
      <el-table-column prop="alarmPeople" label="事件状态">
        <template slot-scope="scope">
          <span class="stautsTag ed" v-if="scope.row.eventStatus == 4">已完成</span>
          <span class="stautsTag not" v-else-if="scope.row.eventStatus == 0">未处理</span>
          <span class="stautsTag ing" v-else>处理中</span>
        </template>
      </el-table-column>
      <el-table-column prop="eventContent" label="事件描述" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="操作" width="270" align="center">
        <template slot-scope="scope">
			<el-button type="warning" @click="resoveFun(scope.row, 'b')" size="small" plain>
				<i class="el-icon-news"></i> 事件处置
			</el-button>
			<el-button type="primary" @click="resoveFun(scope.row, 'a')" size="small" plain>
				<i class="el-icon-edit"></i> 事件评估
			</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total,sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="PAGE.page"
      :page-size="PAGE.size"
    ></el-pagination>
    <ProcessEventsEdit
      v-if="reVisible"
      :stype="sType"
      :reVisible="reVisible"
      :eventId="formData.id"
      :eventStatus="formData.eventStatus"
      @redialogFun="recloseDialog"
      @refreshTableData="getTableData"
    ></ProcessEventsEdit>
  </div>
</template>
<style lang="scss" scoped>
.stautsTag {
  display: inline-block;
  padding: 0px 3px;
  color: aliceblue;
  border-radius: 2px;
}
  .ed {
    background: #008000;
  }
  .ing{
    background: #409EFF;
  }
  .not{
    background: #F8333A;
  }
</style>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import ProcessEventsEdit from "./ProcessEventsEdit.vue";
import METHOD from "@/utils/methods";
@Component({
  components: { ProcessEventsEdit }
})
export default class ProcessEvents extends Vue {
  @Provide() tableData: Object = { pageData: [], total: 0 };
  @Provide() PAGE: any = { page: 1, size: 10 };
  @Provide() searchData: any = { eventName: "" };
  @Provide() loading: Boolean = false;

  @Provide() formData: Object = {};
  // @Provide() zjKey: any = 0;
  @Provide() reVisible: Boolean = false;
  @Provide() sType: String = "";
  getTableData() {
    let that = this,
      params = Object.assign(that.PAGE, that.searchData);
    that.loading = true;
    (that as any).$axios
      .post("/eventInfo/getEventInfoList", params)
      .then((res: any) => {
        that.loading = false;
        if( res ) that.tableData = res;
      });
  }
  searchFun() {
    this.PAGE = { page: 1, size: 10 };
    this.getTableData();
  }
  resetFun() {
    this.PAGE = { page: 1, size: 10 };
    this.searchData = {};
    this.getTableData();
  }
  handleSizeChange(val: any) {
    this.PAGE.size = val;
    this.getTableData();
  }
  handleCurrentChange(val: any) {
    this.PAGE.page = val;
    this.getTableData();
  }
  recloseDialog() {
    this.reVisible = false;
  }
  resoveFun(row: any, word: String) {
    this.sType = word;
    this.reVisible = true;
    this.formData = Object.assign({}, row);
  }
  created() {
    this.getTableData();
  }
}
</script>
