<template lang="pug">
    el-container(style="padding:0px;" )
        el-aside( width="18vw" :style="{height:currentHeight-65+'px'}" v-loading="leftLoading" style="z-index:1000;box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.2);")
            el-table(v-loading="leftLoading" ref="resourceTable" highlight-current-row :data="resourceData" style="width: 100%;" @row-click="chooseResource" :header-cell-style="{height:'42px',padding:'0',background:'#EEF8FF',color:'#333333','text-align':'left'}")
                el-table-column( prop="name" label="资源类型" align='center' )
                    template( slot="header" slot-scope="scope")
                        div.title-bold(style="margin-left:10px") 资源类型
        el-container(style="padding:0px;" :style="{height:currentHeight-65+'px'}")
            el-header(style='height:42px;line-height:42px;background: #f4f4f4;z-index:1001;border:1px solid rgba(196, 196, 196, 1);')
                template()
                    span.title-bold.title-left-color 报警类型列表
                    el-popover( placement="bottom" width="150")
                      el-button( slot="reference" size='mini' type="primary" icon="el-icon-s-tools" style='float:right;transform:translateY(6px)')  筛选
                      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}}
                    //- el-button(v-if="isAuth('linkage:baseEvent:save')" style="float:right;margin-right:2rem;margin-top: .3rem;" type="primary" size='mini' icon="el-icon-plus" :disabled="flag"  @click="addOrUpdateHandle") 新增
            el-main().box_main
              el-card()
                drag-table( :data="eventData" :header="checkList" :isToLine='true' :option="tableOption"  @getDataList="getEvent"   :operationNum="2"  :isShowOperate="false")
                  //- -- 插槽
                  el-table-column(slot="fixed"  fixed  prop=""  label="序号"  width='80'  header-align="center" align="center")
                      template( slot-scope="scope")
                        span   {{scope.$index+(pageIndex - 1) * pageSize + 1}}

                  template(slot='event_level' slot-scope='scope')
                          span(v-if='scope.row.event_level == 1') 特别重大
                          span(v-if='scope.row.event_level == 2') 重大
                          span(v-if='scope.row.event_level == 3') 一般

                  //- 操作项
                  //- template.operation( slot-scope="scope")
                  //-       el-button(v-if="isAuth('linkage:baseEvent:update')" size="mini" type="text" @click="addOrUpdateHandle(scope.row)") 编辑
                  //-       el-button(v-if="isAuth('linkage:baseEvent:delete')" size="mini" type="text" @click="handleDelete(scope.$index, scope.row)") 删除
            el-footer.box_footer
                el-pagination(background  @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"  :total="totalPage" layout="total, sizes, prev, pager, next, jumper")
            add-or-update(v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshdatalist="getEvent")
            edit-resource-event(v-if="editResourceEventVisible" ref="editResourceEvent" @refreshdatalist="getEvent")
</template>

<script>
import AddOrUpdate from './event-add-or-update'
import { isAuth } from '../../../util'
import dragTable from '../../components/tab'

export default {
  computed: {
    currentHeight() {
      return this.$store.state.d2admin.currentHeight.height
    }
  },
  data() {
    return {
      flag: true,
      selResourceType: '',
      resourceType: '',
      leftLoading: false,
      rightLoading: false,
      stationId: localStorage.getItem('stationId'),
      resourceData: [],
      eventData: [],
      addOrUpdateVisible: false,
      editResourceEventVisible: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataIds: [],
      multipleSelection: [],
      checkList: [], //筛选数据
      tableHeader: [
        { label: '报警类型编码', prop: 'event_code', sort: false },
        { label: '报警类型名称', prop: 'event_name', sort: false },
        { label: '报警类型等级', prop: 'event_level', sort: false, slot: true }
      ],
      tableOption: {
        border: false, //是否边框
        maxHeight: 500 //高度
      }
    }
  },
  components: {
    AddOrUpdate,
    dragTable
  },
  watch: {
    totalPage() { //注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
      let pages = Math.ceil(this.totalPage / this.pageSize)//新数据总页数
      //总页数小于当前页数则重新加载列表数据
      if (pages < this.pageIndex) {
          this.pageIndex = pages || 1
          this.getEvent()//获取表格数据的方法
      }
    }
  },
  created () {
    this.checkList = [...this.tableHeader]
  },
  mounted() {
    this.getResource()
  },
  methods: {
    // 新增或修改
    addOrUpdateHandle(row) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(row, this.resourceType)
      })
    },
    chooseResource(row) {
      // if (!isAuth('linkage:baseEvent:distribution')) {
      //   this.$message({
      //     type: 'warning',
      //     message: '没有权限操作！',
      //     duration: 500
      //   })
      //   return
      // }
      this.flag = false
      this.resourceType = row.id
      this.getEvent()
    },
    getEvent() {
      if (!this.resourceType) {
        return
      }
      this.rightLoading = true
      this.$http({
        url: this.$http.adornUrlAlarm(
          `/linkResourceEvent/getPageEventByResourceType`
        ),
        method: 'post',
        data: {
          page: this.pageIndex,
          rows: this.pageSize,
          resourceType: this.resourceType
        }
      }).then((data) => {
        if (data && data.code === 0) {
          this.eventData = data.page.rows
          this.totalPage = data.page.total
        }
        this.rightLoading = false
      })
    },
    getResource() {
      this.leftLoading = true
      this.$http({
        url: this.$http.adornUrl(`/sysDictionary/getResourceTypeDicList`),
        method: 'get',
        params: { stationId: this.stationId }
      }).then((data) => {
        // console.log('resourceData', data)
        if (data && data.code === 0) {
          this.resourceData = data.list
          if (this.resourceData && this.resourceData.length > 0) {
            this.$refs.resourceTable.setCurrentRow(this.resourceData[0])
            this.resourceType = this.resourceData[0].id
            this.flag = false
          }
        }
        this.leftLoading = false
      }).then(() => {
          this.getEvent()
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getEvent()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getEvent()
    },
    handleDelete(index, row) {
      // console.log('delete', index, row)
      this.$confirm('确认删除该报警类型?', '删除报警类型', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrlAlarm(`/linkEvent/deleteEvent`),
            method: 'post',
            params: { id: row.event_id
                    }
          }).then((data) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getEvent()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="scss"></style>
