<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="typeTable" highlight-current-row :data="typeData" style="width: 100%;" @row-click="chooseType" :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:threshold:save')" @click="addOrUpdateHandle" ) 新增
            el-main().box_main
              el-card()
                drag-table( :data="thresholdData" :header="checkList" :isToLine='true' :option="tableOption"  @getDataList="getThreshold"  :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='unit' slot-scope="scope")
                     font(v-if='scope.row.unit===1') MPa
                     font(v-if='scope.row.unit===2') %RH
                     font(v-if='scope.row.unit===3') °C
                     font(v-if='scope.row.unit===4') PPM
                     font(v-if='scope.row.unit===5') m3/h
                     font(v-if='scope.row.unit===6') cm
                     font(v-if='scope.row.unit===7') m/s
                     font(v-if='scope.row.unit===8') pa
                  //- 操作项
                  template.operation( slot-scope="scope")
                        el-button(v-if="isAuth('sys:threshold:update')" size="mini" type="text"  @click="addOrUpdateHandle(scope.row)") 编辑
                        el-button(v-if="isAuth('sys:threshold: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="getThreshold")
</template>

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

export default {
  data() {
    return {
      flag: true,
      typeId: '',
      leftLoading: false,
      rightLoading: false,
      stationId: localStorage.getItem('stationId'),
      typeData: [],
      thresholdData: [],
      addOrUpdateVisible: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      checkList: [], //筛选数据
      tableHeader: [
        { label: '类型', prop: 'typeName', sort: false },
        { label: '编码', prop: 'code', sort: false },
        { label: '最小值', prop: 'minValue', sort: false },
        { label: '最大值', prop: 'maxValue', sort: false },
        { label: '单位', prop: 'unit', 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.getType()
  },
  methods: {
    // 新增或修改
    addOrUpdateHandle(row) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(row, this.typeId)
      })
    },
    chooseType(row) {
      // if (!isAuth('linkage:baseEvent:distribution')) {
      //   this.$message({
      //     type: 'warning',
      //     message: '没有权限操作！',
      //     duration: 500
      //   })
      //   return
      // }
      this.flag = false
      this.typeId = row.id
      this.getThreshold()
    },
    getThreshold() {
      if (!this.typeId) {
        return
      }
      this.rightLoading = true
      this.$http({
        url: this.$http.adornUrl(`/sysThreshold/pageList`),
        method: 'post',
        data: {
          page: this.pageIndex,
          rows: this.pageSize,
          dicId: this.typeId
        }
      }).then((data) => {
        if (data && data.code === 0) {
          this.thresholdData = data.page.rows
          this.totalPage = data.page.total
        } else {
          this.thresholdData = []
          this.totalPage = 0
        }
        this.rightLoading = false
      })
    },
    getType() {
      this.leftLoading = true
      this.$http({
        url: this.$http.adornUrl(`/sysDictionary/getResourceTypeDicList`),
        method: 'get',
        params: this.$http.adornParams({
          stationId: this.stationId
        })
      })
        .then((data) => {
          if (data && data.code === 0) {
            this.typeData = data.list
            if (this.typeData && this.typeData.length > 0) {
              this.$refs.typeTable.setCurrentRow(this.typeData[0])
              this.typeId = this.typeData[0].id
              this.flag = false
            }
          }
          this.leftLoading = false
        })
        .then(() => {
          this.getThreshold()
        })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getThreshold()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getThreshold()
    },
    handleDelete(id) {
      var ids = [id]
      this.$confirm('确认删除该阈值?', '删除阈值', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl(`/sysThreshold/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.getThreshold()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

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