<template>
  <div id="app">
    <el-container class="container">
      <el-main>
        <el-table
          style="width: 100%"
          stripe
          :data="tableData"
        >
          <!-- <el-table-column label="id" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="企业" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.companyName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.deviceName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="传感器" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.sensorName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="告警等级" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.alarmLevel }}</span>
            </template>
          </el-table-column>
          <el-table-column label="告警时间" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.alarmTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="事件状态" align="center">
            <template slot-scope="{row}">
              <!-- <span style="margin-left: 10px">{{ scope.row.eventStatus}}</span> -->
              <el-tag
                :type="row.eventStatus| statusFilter"
              >{{ row.eventStatus === 1 ? $t('common.alarmEvenStatus.processed') : $t('common.alarmEvenStatus.unprocessed') }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="处理时间" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.finishTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否上报" align="center">
            <template slot-scope="{row}">
              <!-- <span style="margin-left: 10px">{{ scope.row.isreport}}</span> -->
              <el-tag
                :type="row.isreport| statusFilter"
              >{{ row.isreport === 1 ? $t('common.isReport.processed') : $t('common.isReport.unprocessed') }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="异常原因" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.reason }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template  slot-scope="scope">
              <!-- <el-button type="success" @click="removeDeviceById(scope.row.eventStatus)" v-if="scope.row.eventStatus==1">已处理</el-button> -->
              <el-button type="danger" v-if="scope.row.eventStatus==0" @click="deal(scope.row)">处理</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <span class="demonstration" />
          <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="pagination.num"
          :limit.sync="pagination.size"
          @pagination="test"
        />
        </div>
      </el-main>
    </el-container>
    <!--        处理弹窗-->
    <el-dialog
      title="请填写异常原因"
      :visible.sync="DealdialogVisible"
      width="30%"
    >
      <el-form :model="reason">
        <el-col :span="12">
        <el-form-item label="异常原因">
          <el-select id="selectId" v-model="reason.region" @change="exceptionCause">
            <el-option selected="selected" label="设备检修" value="设备检修" />
            <el-option label="其他" value="其他" />
          </el-select>
          </el-form-item>
        </el-col>
          <div v-show="play">
            <el-input id="other" v-model="reason.other" placeholder="请填写原因" style="width: 200px;"/>
          </div>
        
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="DealdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dealReason">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination"
import { compile } from 'path-to-regexp'
export default {
  components: { Pagination },
  filters: {
    sexFilter(status) {
      const map = {
        0: 'success',
        1: 'danger',
        2: 'info'
      }
      return map[status]
    },
    statusFilter(status) {
      const map = {
        0: 'danger',
        1: 'success'
      }
      return map[status]
    }
  },
  data() {
    return {
      tableData: [],
      play: false,
      dialogFormVisible: false,
      reason: {},
       params: {},
      total: 0,
      pagination: {
        size: 10,
        num: 1,
      },
      selectedRow:{},
      DealdialogVisible: false,
      radio: 3
    }
  },
  created() {
    this.test()
  },
  methods: {
    exceptionCause() {
      if (this.reason.region == '其他') {
        this.play = true
      } else {
        this.play = false
      }
    },
   deal(row) {
     this.selectedRow=row
     this.DealdialogVisible=true
      // this.form.eventStatus = 1;
      
    },
    dealReason(){
      // console.log(this.reason.region)
      let reason_=this.reason.region;
      if(this.reason.region==null){
         this.$message({
          message: this.$t("tips.createTips"),
          type: "error",
        })
        return
      }
      if(this.reason.region == '其他'){//其他原因文本框非空校验
      if(this.reason.other==null){
          this.$message({
          message: this.$t("tips.createTips"),
          type: "error",
        })
        return
      }else{
        reason_=this.reason.region+"-"+this.reason.other
      }
      }
     this.$post("/demp/info/alarmEvent/finishEvent",{ 
            id: this.selectedRow.id,
            reason:reason_,
            deviceId:this.selectedRow.deviceId,
            sensorId:this.selectedRow.sensorId,
            start:this.selectedRow.alarmTime,
            end:this.selectedRow.finishTime
            }).then(() => {
              this.$message({
              message: this.$t("tips.executeSuccess"),
              type: "success",
        });
        this.DealdialogVisible=false
        this.test();
      })
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize); // 每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); // 点击第几页
    },
    test() {
      this.params.pageSize = this.pagination.size;
      this.params.pageNum = this.pagination.num;
      this.$get("/demp/info/alarmEvent/list", { ...this.params }).then((r) => {
        // console.log(r.data.data.rows)
        this.tableData = r.data.data.rows;
        this.total = r.data.data.total;
      });
    },
  },
}
</script>
<style>
h1 {
  text-align: center;
}
.buttons {
  margin: auto;
  margin-top: 20px;
}
</style>
