<template>
  <app-container>
    <el-row>
      <!--左半部分-->
      <el-col :span="5">
        <div class="dept-div">
          <el-card class="box-card" shadow="always">
            <el-scrollbar ref="deptScroll" class="user-dept-scroll">
              <el-input
                v-model="filterText"
                clearable
                placeholder="请输入项目名称"
              />
              <el-tree
                ref="tree"
                v-loading="treeLoading"
                :filter-node-method="filterNode"
                :data="deptTree"
                :props="defaultProps"
                :default-expand-all="expandAllNode"
                :expand-on-click-node="expandNodeClick"
                @node-click="handleNodeClick"
              />
            </el-scrollbar>
          </el-card>
        </div>
      </el-col>
      <el-col :span="19">
        <div>
          <el-row class="table-title">
            <el-col :span="6">
              <div class="title-header">
                <i class="el-icon-menu" />数据列表
              </div>
            </el-col>
            <el-col :span="12" :offset="6" class="edit_btns">
              <el-button class="edit_btn" size="small" @click="add">
                新增
              </el-button>
            </el-col>
          </el-row>
          <el-table v-loading="listLoading" :data="list" class="table" border>
            <el-table-column :index="indexMethod" align="center" type="index" />
            <el-table-column
              v-for="column in columns"
              :key="column.value"
              :label="column.text"
              :width="column.width"
              :align="column.align"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span v-if="column.type!='Button'" :class="column.class">{{ scope.row[column.value] }}</span>
                <el-button v-if="column.type=='Button'" type="text" @click="showWellDetail(scope.row)">
                  {{ scope.row[column.value] }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="160">
              <template slot-scope="scope">
                <el-button v-if="hasPerm('/device/update')" type="text" @click="edit(scope.row)">
                  编辑
                </el-button>
                <el-button type="text" @click="detail(scope.row)">
                  详情
                </el-button>
                <el-button type="text" @click="datalist(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--分页-->
        <div class="pagination-container">
          <el-pagination
            v-show="total>listQuery.limit"
            :current-page="listQuery.offset"
            :page-sizes="[20,30,50]"
            :page-size="listQuery.limit"
            :total="total"
            align="center"
            layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
    </el-row>
  </app-container>
</template>

<script>
import { getDeptTreeList } from '@/api/system/dept'
import { toTreeList } from '@/utils/structure'
export default {
  data() {
    return {
      listQuery: {
        offset: 1,
        limit: 20
      }, // 查询条件
      columns: [
        {
          text: '监控指标',
          value: 'id',
          align: 'center'
        },
        {
          text: '设备类型',
          value: 'modelName',
          align: 'center'
        },
        {
          text: '开启报警',
          value: 'deviceTypeName',
          align: 'center'
        },
        {
          text: '开启工单',
          value: 'communNameGroup',
          align: 'center'
        }
      ], // 显示列
      list: [], // 列表数据
      listLoading: true, // 加载动画
      treeLoading: false,
      deptTree: null,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      filterText: '',
      expandAllNode: true,
      expandNodeClick: false
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.fetchDeptTree()
  },
  methods: {
    // 序号计算
    indexMethod(index) {
      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
    },
    // 改变页容量
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.fetchData()
    },
    // 改变当前页
    handleCurrentChange(val) {
      this.listQuery.offset = val
      this.fetchData()
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 获取组织结构树
    fetchDeptTree() {
      this.treeLoading = true
      getDeptTreeList(this.listQuery).then(response => {
        this.deptTree = toTreeList(response.data, '0', true)
        this.treeLoading = false
      })
    },
    // 点击左侧组织结构项触发
    handleNodeClick(val) {
      console.log(val)
      this.headerValue = val.name
      this.listQuery.deptId = val.id
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .titleHeadStyle{
    font-weight: 600;
    margin: 20px 0;
  }
  .titleStyle{
    margin: 20px;
    font-weight: 600;
  }
  .buttonGroup{
    margin: 20px;
  }
  .dept-div{
    padding-right: 12px;
    .box-card{
      width:100%;
      .user-dept-scroll{
        width:100%;
        height: calc(100vh - 204px);
      }
      .el-input{
        margin-bottom: 20px;
      }
    }
  }
  $tableTitleHeight:46px;
  .table{
    margin-bottom: 20px;
  }
  .pagination-container{
    margin-bottom: 50px;
  }
  .table-title{
    background-color:rgba(243, 243, 243, 1);
    height: $tableTitleHeight;
    .title-header{
      line-height:$tableTitleHeight;
      color: #606266;
      font-size: 15px;
      i{
        margin-left: 5px;
        margin-right: 5px;
      }
    }
  }
  .edit_btns{
    .edit_btn{
      float:right;
      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
    }
  }
</style>