<template>
  <div class="container">
    <el-row type="flex" :gutter="40">
      <el-col style="border-right:1px solid #ccc;min-height:calc(100vh - 160px)" :span="10">
        <slot name="add"></slot>
        <el-table
          :data="list"
          style="width: 100%"
          size="small"
           highlight-current-row
          border
          :header-cell-style="{background:'#f1f2f3',color:'#333'}"
          @row-click="rowClick">
          <el-table-column
            prop="remarks"
            label="角色描述">
          </el-table-column>
          <el-table-column
            prop="rolename"
            label="角色名称">
          </el-table-column>
          <!-- <el-table-column
            label="操作"
            width="150">
            <template slot-scope="scope">
              <slot name="auth" :data="scope.row"></slot>
              <el-divider direction="vertical"></el-divider>
              <slot name="edit" :data="scope.row"></slot>
              <el-divider direction="vertical"></el-divider>
              <slot name="del" :data="scope.row"></slot>
            </template>
          </el-table-column> -->
        </el-table>
        <div style="margin:20px 0">
          <el-pagination
            background
            small
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="param.content.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
      <el-col :span="14">
        <slot name="details"></slot>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      param:{
        "classname": "webmanage.role.role",
        "method": "query_roleList",
        "content": {
            "pageNumber": 1,
            "pageSize": 20,
            "where":{
                "condition":"",
                "siteid":""
            }
        }
      },
      list:[],
      total:0,
      currentPage:0,
    }
  },
  methods:{
    listData (callback) {
      this.$api.requested(this.param).then(res=>{
        this.list = res.data
        this.total = res.total
        this.currentPage = res.pageNumber
        callback?callback():''
      })
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData()
    },
    rowClick (row) {
      this.$emit('onRowClick',row)
    },
    deleteClick (row) {
      this.$emit('deleteClick',row)
    }
  },
  mounted () {
   this.listData(()=>this.rowClick(this.list[0]))
  }
}

</script>
<style>
</style>
<style scoped>
.container{
  padding: 20px;
  /* background: #f1f2f3; */
}
</style>