<template lang="pug">
    el-container(style="height:77vh")
        el-aside( width="18vw" 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="height:77vh")
            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( type="primary" style='float:right;margin-top: 6px;margin-right:20px;' icon="el-icon-plus" size="mini" :disabled="flag" v-if="isAuth('sys:event:save')" @click="addOrUpdateHandle" ) 新增
            el-main().box_main
              el-card()
                drag-table( :data="eventData" :header="checkList" :isToLine='true' :option="tableOption"  @getDataList="getEvent" :operationNum="2"  :isShowOperate="true")
                  //- -- 插槽
                  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='eventLevel' slot-scope='scope')
                          span(v-if='scope.row.eventLevel == 1') 特别重大
                          span(v-if='scope.row.eventLevel == 2') 重大
                          span(v-if='scope.row.eventLevel == 3') 一般

                  //- 操作项
                  template.operation( slot-scope="scope")
                        el-button(v-if="isAuth('sys:event:update')" size="mini" type="text" @click="addOrUpdateHandle(scope.row)") 编辑
                        el-button(v-if="isAuth('sys:event:delete')" size="mini" type="text" @click="handleDelete(scope.row.id)") 删除
            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")
</template>

<script>
import AddOrUpdate from './add-or-update'
import dragTable from '../../components/tab'

export default {
  data() {
    return {
      flag: true,
      resourceType: '',
      leftLoading: false,
      rightLoading: false,
      stationId: localStorage.getItem('stationId'),
      resourceData: [],
      eventData: [],
      addOrUpdateVisible: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      checkList: [], //筛选数据
      tableHeader: [
        { label: '报警类型编码', prop: 'eventCode', sort: false },
        { label: '报警类型名称', prop: 'eventName', sort: false },
        { label: '报警类型等级', prop: 'eventLevel', 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.adornUrl(`/linkEvent/pageList`),
        method: 'post',
        data: {
          page: this.pageIndex,
          rows: this.pageSize,
          resourceType: this.resourceType,
        },
      }).then((data) => {
        if (data && data.code === 0) {
          console.log('--data--', data.page.rows)
          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) => {
          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(id) {
      var ids = [id]
      this.$confirm('确认删除该报警类型?', '删除报警类型', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false,
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrlAlarm(`/linkEvent/deleteByFlag`),
            method: 'post',
            data: this.$http.adornData(ids, false),
          }).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>
