<template>
  <div class="app-container">
    <el-card class="box-carde">
      <div slot="header" class="clearfix">
        <span>系统告警</span>
        <el-button style="float: right;padding:3px 10px 3px 3px;" type="text" :loading="btnLonding"
                   @click="exportDataEvent">导出数据
        </el-button>
      </div>
      <div>
        <span>根据问题类型查询：</span>
        <el-select v-model="alarmTypeEnum" @change="searchEmp" clearable :filterable="true" placeholder="请选择"
                   size="mini" prefix-icon="el-icon-search"
        >
          <el-option
            v-for="item in this.alarmTypeEnumList"
            :key="item.key"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <div style="height: 10px"></div>
      <vxe-table
        align="center"
        :loading="loading"
        ref="xTable"
        auto-resize
        highlight-current-row
        border
        resizable
        show-overflow
        :data="tableData"
        v-show="showTable"
        :edit-config="{trigger: 'manual', mode: 'row',autoClear: false,icon:'none'}"
      >
        <vxe-table-column title="告警信息">
          <vxe-table-column field="errorInfo" title="错误信息"></vxe-table-column>
          <vxe-table-column field="alarmTypeEnum" title="问题类型"></vxe-table-column>
          <vxe-table-column field="name" title="问题名称"></vxe-table-column>
          <vxe-table-column field="describe" title="问题描述"></vxe-table-column>
          <vxe-table-column field="alarmStatusEnum" title="问题状态"></vxe-table-column>
          <vxe-table-column field="solution" title="处理办法"
                            :edit-render="{name: '$input', props: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="pritority" title="问题优先级"></vxe-table-column>
          <vxe-table-column field="createTime" :formatter="dateFormat" title="告警时间"></vxe-table-column>
          <vxe-table-column width="15%" align="center" title="操作">
            <template v-slot="{ row }">
              <template v-if="$refs.xTable.isActiveByRow(row)">
                <el-button
                  style="padding: 3px 4px 3px 4px;margin: 2px"
                  size="mini"
                  icon="el-icon-edit"
                  @click="saveRowEvent(row)"
                  :loading="saveLoding">确定
                </el-button>
                <el-button
                  style="padding: 3px 4px 3px 4px;margin: 2px"
                  size="mini"
                  icon="el-icon-edit"
                  @click="cancelRowEvent(row)">取消
                </el-button>
              </template>
              <template v-else>
                <el-button
                  v-show="row.alarmStatusEnum=='未处理'"
                  style="padding: 3px 4px 3px 4px;margin: 2px"
                  size="mini"
                  icon="el-icon-edit"
                  @click="editRowEvent(row)"
                  :loading="btnLonding">处理
                </el-button>
                <el-button
                  style="padding: 3px 4px 3px 4px;margin: 2px"
                  size="mini"
                  icon="el-icon-document"
                  @click="showErrorInfo(row)">查看错误信息
                </el-button>
              </template>
            </template>
          </vxe-table-column>
        </vxe-table-column>
      </vxe-table>

      <vxe-pager
        perfect
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :total="total"
        :page-sizes=[10,50,100]
        :layouts="['PrevJump', 'PrevPage','JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
        @page-change="handlePageChange"
        v-show="!btnLonding"
      >
      </vxe-pager>
    </el-card>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogVisibleErrorInfo"
      title="异常信息"
      style="padding: 0px;"
      label-width="1px"
      width="1000px">
      <el-input
        v-model="emp.errorInfo"
        readonly
        :rows="20"
        type="textarea"
        style="width: 100%" />
      <span
        slot="footer"
        class="dialog-footer">
            <el-button
              size="mini"
              @click="cancelEidtEI">关 闭</el-button>
          </span>
    </el-dialog>

  </div>

</template>
<script>
  import request from '@/utils/request'

  export default {
    data() {
      return {
        name:'',
        alarmTypeEnum:'',
        dialogTitle:'',
        dialogVisibleErrorInfo:false,
        emp: {
          id: '',
          type: '',
          name: '',
          describe: '',
          status: '',
          solution: '',
          pritority: '',
          errorInfo: ''
        },
        alarmStatusEnumList:[],
        alarmTypeEnumList:[],
        loading: false,
        saveLoding: false,
        showTable: true,
        btnLonding: false,
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    },
    created() {
      this.getAll()
    },
    methods: {
      searchEmp(){
        this.loading = true
        this.saveLoding = false
        this.$axios.get('/SysAlarm/' + this.currentPage + '/' + this.pageSize +'/'+ this.alarmTypeEnum).then(response => {

          this.showTable = true


          this.tableData = response.data.content
          for (let i = 0; i < this.tableData.length; i++) {
            for (let j = 0; j < this.alarmTypeEnumList.length; j++) {
              if (this.tableData[i].alarmTypeEnum == this.alarmTypeEnumList[j]["value"]) {
                this.tableData[i].alarmTypeEnum = this.alarmTypeEnumList[j]["label"]
              }
            }
            for (let j = 0; j < this.alarmStatusEnumList.length; j++) {
              if (this.tableData[i].alarmStatusEnum == this.alarmStatusEnumList[j]["value"]) {
                this.tableData[i].alarmStatusEnum = this.alarmStatusEnumList[j]["label"]
              }
            }
          }
          this.total = response.data.totalElements
          this.loading = false
        })
      },
      getAll() {
        this.$axios.get('/SysAlarm/getAlarmTypeEnum').then(res => {
          this.alarmTypeEnumList = res.data
        })
        this.$axios.get('/SysAlarm/getAlarmStatusEnum').then(res => {
          this.alarmStatusEnumList = res.data
        })
        this.loading = true
        this.saveLoding = false
        this.$axios.get('/SysAlarm/' + this.currentPage + '/' + this.pageSize).then(response => {

          this.showTable = true


          this.tableData = response.data.content
          for (let i = 0; i < this.tableData.length; i++) {
            for (let j = 0; j < this.alarmTypeEnumList.length; j++) {
              if (this.tableData[i].alarmTypeEnum == this.alarmTypeEnumList[j]["value"]) {
                this.tableData[i].alarmTypeEnum = this.alarmTypeEnumList[j]["label"]
              }
            }
            for (let j = 0; j < this.alarmStatusEnumList.length; j++) {
              if (this.tableData[i].alarmStatusEnum == this.alarmStatusEnumList[j]["value"]) {
                this.tableData[i].alarmStatusEnum = this.alarmStatusEnumList[j]["label"]
              }
            }
          }
          this.total = response.data.totalElements
          this.loading = false
        })
      },
      editRowEvent(row) {
        row.batteryModel = 2
        this.isEdit = true
        this.loadButton = true
        this.$refs.xTable.setActiveRow(row)
      },
      //设计有判断是否批量添加，批量添加弹窗表明添加条数，然后批量生成保存
      saveRowEvent(row) {
        for (let j = 0; j < this.alarmTypeEnumList.length; j++) {
          if (row.alarmTypeEnum == this.alarmTypeEnumList[j]["label"]) {
            row.alarmTypeEnum = this.alarmTypeEnumList[j]["value"]
          }
        }
        row.alarmStatusEnum = 'E2'
        this.$refs.xTable.validate(valid => {

            this.$axios.put('/SysAlarm',row).then(res => {
              this.$message({
                message: '处理成功',
                type: 'success'
              })
              this.btnLonding = false;
              this.getAll()
            }).catch((error) => {
              this.$refs.xTable.setActiveRow(row)
              this.$message.error('处理告警信息出错' + error)
            })

        })


      },
      showErrorInfo (row) {
        this.dialogTitle = '处理告警'
        this.emp = row
        this.emp.id = row.id
        this.emp.type = row.type
        this.emp.name = row.name
        this.emp.describe = row.describe
        this.dialogVisibleErrorInfo = true
      },
      cancelEidtEI () {
        this.dialogVisibleErrorInfo = false
      },

      cancelRowEvent(row) {

        const xTable = this.$refs.xTable
        xTable.clearActived().then(() => {
          // 还原行数据
          if (this.isEdit) {
            //编辑
            xTable.revertData(row)
          } else {
            //新增
            xTable.remove(row)

          }
          this.loadButton = false;
        })
      },
      handlePageChange({currentPage, pageSize}) {
        this.currentPage = currentPage
        this.pageSize = pageSize
        this.getAll()
      },
      exportDataEvent() {
        this.loading = true
        this.$axios.get('/SysAlarm').then(res => {
          const data = res.data.content
          this.$refs.xTable.exportData({
            filename: '系统告警信息',
            type: 'csv',
            isHeader: true,
            isFooter: true,
            data
          })
          this.loading = false
        }).catch(e => {
          this.loading = false
        })
      },
      dateFormat(row, column) {
        var date = row.cellValue

        if (date == undefined || date == null) {
          return ''
        }
        return this.$moment(date).format('YYYY-MM-DD HH:mm:ss')// 使用moment插件进行日期格式化
      },
    }
  }
</script>

<style lang="scss" scoped>
  .app-container {
    /*left: 0;*/
    /*width: 100%;*/
    /*min-height: 100%;*/
    /*height: auto;*/
    /*background-image: linear-gradient(25deg, #05362d, #145d44, #24875d, #35b477)*/
  }

  .pagination {
    margin: 20px 0;
    text-align: right;
  }
</style>
