<template>
  <div class="dashboard-container">
      <div class="table-content">
          <div style="width: 100%;height: 30px;">
              <div class="btn" style="margin-right: -3px;" @click="addBtn">新增</div>
          </div>
          <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
              <el-table-column type="index" label="序号" width="60px">
              </el-table-column>
              <el-table-column prop="alarmTime" label="报警时间">                    
              </el-table-column>
              <el-table-column prop="alarmRailway" label="报警线路编码">
              </el-table-column>
              <el-table-column prop="railwayName" label="报警线路">
              </el-table-column>
              <el-table-column label="报警行别">
                <template slot-scope="scope">
                  {{ scope.row.lineDir == 1 ? '上行' : '下行' }}
                </template>
              </el-table-column>
              <el-table-column prop="alarmMiles" label="报警里程位置">
              </el-table-column>
              <el-table-column label="报警附件">
                  <template slot-scope="scope" v-if="scope.row.fileUrl">
                      <img :src="scope.row.fileUrl" style="width: 100px;height: 100px;"/>
                  </template>
                  <template slot-scope="scope" v-else></template>
              </el-table-column>
              <el-table-column label="报警类型" width="160px" prop="alarmTypeName">                  
              </el-table-column>
              <el-table-column prop="alarmLevel" label="报警级别">
              </el-table-column>
              <el-table-column prop="alarmConfidence" label="报警置信度">
              </el-table-column>
              <el-table-column prop="content" show-overflow-tooltip="true" label="报警内容">
              </el-table-column>
              <el-table-column label="模拟状态">
                <template slot-scope="scope">
                  {{ scope.row.stareName }}
                </template>
              </el-table-column>
              <el-table-column label="模拟生效">
                <template slot-scope="scope">
                  <div class="operateBtn">
                    <div v-if="scope.row.stareName == '未生效'" @click="sendingAlarms(scope.row)">发送报警</div>
                  </div>                    
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200px">
                  <template slot-scope="scope">
                      <div class="operateBtn">                            
                          <!-- <div>删除</div> -->
                          <div @click="lookDetails(scope.row)">详情查看</div>
                          <div v-if="scope.row.stareName != '已生效'" @click="editBtn(scope.row)">修改</div>                            
                          <div v-if="scope.row.stareName == '已生效'" @click="disarmingBtn(scope.row)">解除报警</div>
                      </div>
                  </template>
              </el-table-column>
          </el-table>
          <div class="pagination">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15, 20]"
              :page-size="searchData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
              </el-pagination>
          </div>
          <addDialog v-if="addDialogData.dialogVisible" :addDialogData="addDialogData" @addImitateData="addImitateData"></addDialog>
          <detailsDialog v-if="detailsDialogData.dialogVisible" :detailsDialogData="detailsDialogData"></detailsDialog>
          <editDialog v-if="editDialogData.dialogVisible" :editDialogData="editDialogData" @editImitateData="editImitateData"></editDialog>
          <disarmingAlarmDialog v-if="disarmingAlarmData.dialogVisible" :disarmingAlarmData="disarmingAlarmData" @disarmingAlarm="disarmingAlarm"></disarmingAlarmDialog>
        </div>
  </div>
</template>
<script>
import { getAnalogData ,addAlarmTemporary,sendAlarm,editAlarmTemporary,disarmingAlarm} from "@/api/analogData";
import addDialog from './components/addDialog.vue';
import detailsDialog from './components/detailsDialog.vue'
import editDialog from './components/editDialog.vue'
import disarmingAlarmDialog from './components/disarmingAlarmDialog.vue'
export default {
  name :'simulatedUpload',
  components:{
      addDialog,
      detailsDialog,
      editDialog,
      disarmingAlarmDialog
  },
  data() {
      return {
          tableData:[],
          searchData:{
              pageNum: 1,
              pageSize: 10,                
          },
          total:0,
          addDialogData:{
            dialogVisible: false,
            data: {}  
          },
          detailsDialogData:{
            dialogVisible: false,
            data: {} 
          },
          editDialogData:{
            dialogVisible: false,
            data: {} 
          },
          disarmingAlarmData:{
            dialogVisible: false,
            data: {} 
          }
      }
  },
  created() {
      this.getList(this.searchData)
  },
  methods:{
      getList(params) {
          getAnalogData(params).then(res => {                
              if(res.code == 200) {
                  this.tableData = res.data.records
                  this.total = res.data.total
              }
          })
      },
      handleSizeChange(val) {
          this.searchData.pageSize = val
          this.getList(this.searchData)
      },
      handleCurrentChange(val) {
          this.searchData.pageNum = val
          this.getList(this.searchData)
      },
      addBtn() {
          this.addDialogData.dialogVisible = true
      },
      addImitateData(payload) {
          addAlarmTemporary(payload).then(res => {                
              if(res.code == 200) {
                  this.$message({
                      type: 'success',
                      message: '新增成功!'
                  });
                  this.getList(this.searchData)
                  this.addDialogData.dialogVisible = false
              }else{
                  this.$message({
                      type: 'error',
                      message: res.msg
                  }); 
              }
          })
      },  
      lookDetails(row) {
          row.alarmType = row.alarmType.toString()
          row.alarmLevel = row.alarmLevel.toString()
          row.lineDir = row.lineDir.toString()
          if(row.source) row.source = row.source.toString()            
          this.detailsDialogData.data = row
          this.detailsDialogData.dialogVisible = true
      },
      editBtn(row) {
        row.alarmType = row.alarmType.toString()
          row.alarmLevel = row.alarmLevel.toString()
          row.lineDir = row.lineDir.toString()
          if(row.source) row.source = row.source.toString()
          this.editDialogData.data = row
          this.editDialogData.dialogVisible = true
      }, 
      disarmingBtn(val) {          
        this.disarmingAlarmData.dialogVisible = true
        this.disarmingAlarmData.data.alarmId = val.alarmId
        this.disarmingAlarmData.data.releaseTime = ''
        this.disarmingAlarmData.data.releaseContent = ''
      },
      disarmingAlarm(payload) {         
        disarmingAlarm(payload).then(res => {            
          if(res.code == 200) {
            this.$message({
                      type: 'success',
                      message: '解除报警成功!'
                  });
                  this.getList(this.searchData)
                  this.disarmingAlarmData.dialogVisible = false    
          }else{
            this.$message({
                      type: 'error',
                      message: res.msg
                  });
          }
        })
      },
      editImitateData(payload){          
        editAlarmTemporary(payload).then(res => {            
          if(res.code == 200) {
            this.$message({
                      type: 'success',
                      message: '修改成功!'
                  });
              this.getList(this.searchData) 
              this.editDialogData.dialogVisible = false  
          }else{
            this.$message({
                      type: 'error',
                      message: res.message
                  });
          }
        })
      },  
      sendingAlarms(scope) {          
        this.$confirm('确定要发送报警吗?', '信息提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sendAlarm(scope.id).then(res => {
            if(res.code == 200) {
              this.$message({
                type: 'success',
                message: '发送报警成功!'
              });
              this.getList(this.searchData)
            }else{
              this.$message({
                type: 'error',
                message: res.msg
              });
            }
            
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        })
      }
  }
}
</script>
<style lang="scss" scoped>
.dashboard {
&-container {
  margin: 30px;
}

&-text {
  font-size: 30px;
  line-height: 46px;
}
}
.dashboard-container {
.search-content {
  width: 100%;
  height: 74px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding-left: 10px;

  .el-input {
    margin: 0 10px;
  }

  .el-select {
    margin: 0 10px;
  }

  .search-btn {
    display: flex;
    align-items: center;
    height: 100%;      
    margin-left: 10px;

    div {
      // margin: 0 6px;
      display: inline-block;
      width: 80px;
      height: 40px;
      border-radius: 2px;
      font-size: 14px;
      line-height: 40px;
      text-align: center;
    }

    div:hover {
      cursor: pointer;
    }

    .search {
      margin-right: 10px;
      background-color: #2766DD;
      color: #F7F8FB;
    }

    .search:hover {
      background-color: #4D85F4;
    }

    .reset {
      color: #333334;
      border: 1px solid #D7D7D7;
    }

    .reset:hover {
      color: #1F9FFF;
      border: 1px solid #1F9FFF;
    }
  }
}

.table-content {
  margin-top: 15px;
  width: 100%;
  background-color: #fff;
  padding: 0 20px 20px;

  .btn {
    margin: 15px 20px 15px 0;
    cursor: pointer;
    float: left;
    text-align: center;
    width: 98px;
    height: 34px;
    border-radius: 2px;
    border: 1px solid #ABC7FD;
    line-height: 34px;
    font-weight: 400;
    font-size: 14px;
    color: #2250C8;
    background-color: #E7EEFF;
  }

  .btn:hover {
    color: #FFFFFF;
    background-color: #2250C8;
    border: 1px solid #2250C8;
  }

  .btn:active {
    color: #FFFFFF;
    background-color: #194DA4;
    border: 1px solid #194DA4;
  }

  .startUsing {
      width: 54px;
      height: 24px;
      margin: 14.5px auto 0;
      line-height: 24px;
      text-align: center;
      font-size: 12px;
      color: #00974D;
      border-radius: 4px;
      background-color: #E7FAF0;
      border: 1px solid #BEFDDD;
    }

    .Deactivate {
      width: 54px;
      height: 24px;
      margin: 14.5px auto 0;
      line-height: 24px;
      text-align: center;
      font-size: 12px;
      color: #FF9933;
      border-radius: 4px;
      background-color: #FFF3E8;
      border: 1px solid #FDE6CF;
    }

  .operateBtn {
    display: flex;
    justify-content: center;
    color: #2866DD;

    div {
      font-size: 14px;
      margin: 0 5px;
      cursor: pointer;
    }
  }

  .pagination {
    margin: 10px 0;
    width: 100%;
    height: 20px;

    .el-pagination {
      float: right;
      margin: 10px 0;
    }
  }
}

}
</style>