<template>
    <div style="width:100%;">
      <el-main>
        <div class="tou">权限管理</div>
        <div>
            <div style="margin:20px 0px">
                <div style="float:left;margin:3px 5px" >管理员类型</div>
                <el-dropdown trigger="click"  split-button size="mini">
                <span class="el-dropdown-link">
                    学生
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-plus">家庭教育</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-circle-plus">家庭教育1</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-circle-plus-outline">家庭教育2</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-check">家庭教育3</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-circle-check">家庭教育4</el-dropdown-item>
                </el-dropdown-menu>
                </el-dropdown>
            </div>
            <!-- <div>Banner管理</div>      -->
            <el-table
              :data="tableData"
              stripe
              border
              :header-cell-style="{background: '#f1f1f1', 'text-align':'center' }"
              :cell-style="{'text-align':'center'}"
              style="width: 100%">
              <el-table-column
                prop="account"
                label="管理员账号"
                min-width="25">
              </el-table-column>
              <el-table-column
                prop="type"
                label="管理员类型"
                min-width="25">
              </el-table-column>
              <el-table-column
                prop="time"
                label="创建时间"
                min-width="25">
              </el-table-column>
              <el-table-column
                prop="do"
                label="操作"
                min-width="25">
                <el-button
                    size="mini"                   
                    type="primary"
                    @click="dialogVisible1=true">修改权限</el-button>
                <el-button
                    size="mini"                   
                    type="primary"
                    @click="dialogVisible=true">删除</el-button>
              </el-table-column>
              
            </el-table>
          
           </div>
        </el-main>
        <el-dialog
        title="删除管理员"
        :visible.sync="dialogVisible"
        width="500px"     
        :before-close="handleClose"  
        class="dialog_diy"     
        center>
        <div style="font-size:20px;width:100%;text-align:center">确定删除管理员？</div>
    <span slot="footer" class="dialog-footer" >
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    <el-button @click="dialogVisible = false">取 消</el-button>
    
    </span>
</el-dialog>

<el-dialog
        title="修改权限"
        :visible.sync="dialogVisible1"
        width="600px"     
        :before-close="handleClose"    
        class="dialog_diy"   
        center>
        <el-checkbox-group v-model="checkList" class="group" >
    <el-checkbox label="首页管理" ></el-checkbox>
    <el-checkbox label="课程管理"></el-checkbox>
    <el-checkbox label="通知管理"></el-checkbox>
    <el-checkbox label="家校区"></el-checkbox>
    <el-checkbox label="分组管理"></el-checkbox>
    <el-checkbox label="权限管理"></el-checkbox>
    
  </el-checkbox-group>
    <span slot="footer" class="dialog-footer" >
    
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
    </span>
</el-dialog>
    </div>
</template>

<script>
export default {
  data() {
    return {
        checkList: ['选中且禁用','复选框 A'],
        dialogVisible:false,
        dialogVisible1:false,
         tableData: [{
          account:"15649753520",
          type:"学生",
          time:"2020-12-28 10:18"
        },{
          account:"15649753520",
          type:"学生",
          time:"2020-12-28 10:18"
        },{
          account:"15649753520",
          type:"学生",
          time:"2020-12-28 10:18"
        },{
          account:"15649753520",
          type:"学生",
          time:"2020-12-28 10:18"
        },{
          account:"15649753520",
          type:"学生",
          time:"2020-12-28 10:18"
        },],
    }
  }
}
</script>

<style scoped>
.tou{
    border-bottom:1px solid #c9c9c9;
    height:50px;
    font-size:30px
  }
  .group label{
      margin: 30px 80px
  }
  .dialog_diy >>> .el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn {
  top: 19px;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}
</style>