<template>
  <app-container>
    <el-row>
      <el-col :span="4">
        <div class="dept-div">
          <el-card class="box-card" shadow="always" header="项目">
            <el-scrollbar ref="deptScroll" class="user-dept-scroll">
              <div tabIndex="1">
                燃气集团项目
              </div>
              <div tabIndex="2">
                亦庄项目
              </div>
            </el-scrollbar>
          </el-card>
        </div>
      </el-col>
      <el-col :span="20">
        <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 @selection-change="handleSelectionChange">
            <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>
export default {
  data() {
    return {}
  },
  methods: {}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dept-div{
    padding-right: 12px;
    .box-card{
      width:100%;
      .user-dept-scroll{
        width:100%;
        height: 300px;
        div{
          text-align: center;
          margin: 20px 0;
          cursor: pointer;
          padding: 10px;
          i {
            margin-right: 10px;
          }
        }
      }
    }
  }
  .user-dept-scroll div:focus{
    color: gray;
    background: rgb(242, 238, 238);
  }
  .user-dept-scroll div:hover{
    color: gray;
    background: rgb(242, 238, 238);
  }
  .headerTeam{
    font-size: 20px;
  }
</style>