<template lang="pug">
    el-container(style="height:71.6vh")
        el-main.box_main(style="margin-top: 0 !important;")
            el-card()
                div.tableCard()
                    el-form( :inline="true" :model="dataForm" size="mini" @keyup.enter.native="getDataList()")
                        el-form-item(label="")
                            el-input(v-model="dataForm.params" style="width:180px" placeholder="报警编号/报警名称/资源点名称" clearable)
                        el-form-item(label="报警等级:")
                            el-select(v-model="dataForm.eventLevel" style="width:150px" placeholder="请选择" clearable multiple)
                                el-option(label="特别重大" value=1)
                                el-option(label="重大" value=2)
                                el-option(label="一般" value=3)
                        el-form-item(v-if="systemType === '0'" label="报警类型:")
                            el-select(v-model="dataForm.eventType" style="width:150px" placeholder="请选择" clearable)
                                el-option(v-for="(item,index) in alarmOption" :label="item.eventName" :value="item.id" :key="index")
                        el-form-item(label="报警状态:")
                            el-select(v-model="dataForm.status" style="width:150px" placeholder="请选择" clearable)
                                el-option(label="未处理" value=1)
                                el-option(label="处理中" value=2)
                                el-option(label="已处理" value=3)
                        el-form-item(label="发生时间")
                            el-date-picker(v-model="dataForm.startTime" style="width:180px" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" clearable)
                            font &nbsp;至&nbsp;
                            el-date-picker(v-model="dataForm.endTime" style="width:180px" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" clearable)
                        el-button(@click="getDataList()" size='mini' icon="el-icon-search" type="primary") 查询
                        el-button(@click="reSet()" icon="el-icon-refresh-right" size='mini' type="primary") 重置
                        el-popover( placement="bottom" width="150")
                            el-button( slot="reference" size='mini' type="primary" icon="el-icon-s-tools" style='float:right;')  筛选
                            el-checkbox-group( v-model="checkList")
                                el-col( :span="24")
                                    el-checkbox( v-for="(item,index) in tableHeader" :label="item" :key="index" )
                                        span {{item.label}}
                drag-table( :data="dataList" :header="checkList"  :option="tableOption"  @getDataList="getDataList" v-loading="dataListLoading"  :operationNum="2"  :isShowOperate="true")
                    //- -- 插槽
                    el-table-column(slot="fixed"  fixed  prop=""  label="序号"   header-align="center" align="center" width=80)
                        template( slot-scope="scope")
                            span   {{scope.$index+(pageIndex - 1) * pageSize + 1}}

                    template( slot='eventLevel' slot-scope="scope")
                        <div v-if='scope.row.eventLevel==1'><el-badge is-dot class="item1"></el-badge>特别重大</div>
                        <div v-if='scope.row.eventLevel==2'><el-badge is-dot class="item2"></el-badge>重大</div>
                        <div v-if='scope.row.eventLevel==3'><el-badge is-dot class="item3"></el-badge>一般</div>
                    template( slot='status' slot-scope="scope")
                        <div v-if='scope.row.status==1'><el-badge is-dot class="item1"></el-badge>未处理</div>
                        <div v-if='scope.row.status==2'><el-badge is-dot class="item2"></el-badge>处理中</div>
                        <div v-if='scope.row.status==3'><el-badge is-dot class="item3"></el-badge>已处理</div>
                    template( slot='eventNumber' slot-scope="scope")
                        font(:title="scope.row.eventNumber") {{scope.row.eventNumber}}
                    template( slot='eventName' slot-scope="scope")
                        font(:title="scope.row.eventName") {{scope.row.eventName}}
                    template( slot='occurrenceTime' slot-scope="scope")
                        font(:title="scope.row.occurrenceTime") {{scope.row.occurrenceTime}}
                    //- 操作项
                    template( slot-scope="scope" )
                        el-button(type="text" @click="detailHandle(scope.row)" style="font-weight:400;font-family:Microsoft YaHei;font-size:14px;") 详情
                        el-button(type="text" @click="disposeHandle(scope.row)" style="font-weight:400;font-family:Microsoft YaHei;font-size:14px;" v-if="isAuth('alarms:untreated:task') && scope.row.status != 3" ) 处理
        el-footer.box_footer
            el-pagination(@size-change="sizeChangeHandle" background @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"  :total="totalPage" layout="total, sizes, prev, pager, next, jumper")
            alarm-detail(v-if="detailVisible" ref="alarmDetail" @refreshdatalist="getDataList")
</template>
<script>
import AlarmDetail from './alarm-detail'
import dragTable from '../../components/tab'

export default {
  data() {
    return {
      alarmOption: [],
      dataListLoading: false,
      disposeInfoVisible: false,
      detailVisible: false,
      dataForm: {},
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      sort: '',
      order: '',
      checkList: [],
      tableHeader: [
        { label: '报警编号', prop: 'eventNumber', width: 220, slot: true },
        { label: '报警名称', prop: 'eventName', width: 220, slot: true },
        { label: '报警类型', prop: 'eventTypeName' },
        { label: '报警等级', prop: 'eventLevel', slot: true, width: 120 },
        { label: '资源点名称', prop: 'resourceName' },
        { label: '发生时间', prop: 'occurrenceTime', slot: true },
        { label: '发生地点', prop: 'occurrenceSite' },
        { label: '处理状态', prop: 'status', slot: true, width: 120 },
      ],
      tableOption: {
        border: false, //是否边框
        maxHeight: 500, //高度
      },
    }
  },
  components: {
    dragTable,
    AlarmDetail,
  },
  watch: {
    totalPage() {
      //注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
      let pages = Math.ceil(this.totalPage / this.pageSize) //新数据总页数
      //总页数小于当前页数则重新加载列表数据
      if (pages < this.pageIndex) {
        this.pageIndex = pages || 1
        this.getDataList() //获取表格数据的方法
      }
    },
  },
  created() {
    this.checkList = [...this.tableHeader]
    this.initEventType()
  },
  methods: {
    init() {
      this.getDataList()
    },
    getDataList(sort, order) {
      if (sort === 'event_type_name' || sort === 'eventTypeName') {
        sort = 'event_type'
      }
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrlAlarm(`/alarmsInfo/list`),
        method: 'post',
        data: {
          status: this.dataForm.status,
          stationId: localStorage.getItem('stationId'),
          params: this.dataForm.params,
          levelList: this.dataForm.eventLevel,
          startTime: this.dataForm.startTime,
          endTime: this.dataForm.endTime,
          eventType: this.dataForm.eventType,
          page: this.pageIndex,
          rows: this.pageSize,
          sort: sort,
          order: order,
        },
      }).then((data) => {
        if (data && data.code === 0) {
          this.dataList = data.page.rows
          this.totalPage = data.page.total
          console.log('dataList:', this.dataList)
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    indexMethod(index) {
      return (this.pageIndex - 1) * this.pageSize + index + 1
    },
    initEventType() {
      this.$http({
        url: this.$http.adornUrl(`/linkEvent/list`),
        method: 'post',
        params: {},
      }).then((data) => {
        if (data && data.code === 0) {
          this.alarmOption = data.list
        }
      })
    },
    reSet() {
      this.pageIndex = 1
      this.dataForm = {}
      this.getDataList()
    },
    sortChange(column) {
      if (column.order === 'descending') {
        this.order = 'desc'
      } else {
        this.order = 'asc'
      }
      if (column.column.columnKey) {
        this.sort = column.column.columnKey
      } else {
        this.sort = column.prop
      }
      this.getDataList()
    },
    //处理
    disposeHandle(bean) {
      bean.status = 3
      this.$http({
        url: this.$http.adornUrlAlarm(`/alarmsInfo/update`),
        method: 'post',
        data: bean,
      }).then((data) => {
        if (data && data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getDataList()
            },
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    //查看
    detailHandle(bean) {
      this.detailVisible = true
      this.$nextTick(() => {
        this.$refs.alarmDetail.init(bean)
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.item1 {
  margin-top: 10px;
  margin-right: 5px;

  /deep/ .el-badge__content.is-dot {
    background-color: #ff3823 !important;
  }
}

.item2 {
  margin-top: 10px;
  margin-right: 5px;

  /deep/ .el-badge__content.is-dot {
    background-color: #e2a80c !important;
  }
}

.item3 {
  margin-top: 10px;
  margin-right: 5px;

  /deep/ .el-badge__content.is-dot {
    background-color: #21acfc !important;
  }
}
</style>
