<template>
    <div class="bodyBoxs">
        <div class="boxs">
            <div class="titles">权限管理</div>
            <el-table
                :data="tableData"
                style="width:100%;margin:0 auto;"
                :cell-style="rowStyle"
                :header-cell-style="headerStyle"
                 v-loading="loading"
                >
                <el-table-column
                prop="title"
                label="名称"
                width="180">
                </el-table-column>
                <el-table-column
                prop="account"
                label="账户"
                width="180">
                </el-table-column>
                <el-table-column
                prop="dispalyPassword"
                label="密码">
                </el-table-column>
                <el-table-column
                prop="action"
                label="操作">
                    <template slot-scope="scope">
                        <el-button style="background:#ff7200;color:#fff;border:none" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
        </div>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
    data(){
        return{
            tableData: [
            //     {
            //     name:"成功登录系统",
            //     admin:"13111111111",
            //     password:"2022-05-12",
            // }, {
            //     name:"成功登录系统",
            //     admin:"13111111111",
            //     password:"2022-05-12",
            // }, {
            //     name:"成功登录系统",
            //     admin:"13111111111",
            //     password:"2022-05-12",
            // }, {
            //     name:"成功登录系统",
            //     admin:"13111111111",
            //     password:"2022-05-12",
            // }
            ],
            loading:false,
        }
    },
    created(){
        this.getListData();
    },
    methods:{
        getListData(){
            this.loading=true;
            this.$api.adminRight({}).then((res) => {
                if(res.code==0){
                    this.tableData = res.data;
                    this.loading=false;
                }else{
                    this.$message(res.message);
                }
               
            }).catch((res) => {
                 this.loading=false;
            });
        },
        handleEdit(i,r){
            this.$router.replace({
                path:"/jurisdictionmodify",
                query: {
                    id: r.id
                }
            })
        },
        rowStyle() {
            return "text-align:center;border:none;color:#727272";
        },
        headerStyle(){
            return "text-align:center;background:#3f88bb;font-weight:blod;color:#fff"
        }
    }
}
</script>
<style scoped>
 .bodyBoxs{
        padding: 40px;
    }
    .boxs{
        width: 100%;
        background: #fff;
        border-radius: 15px;
    }
    .titles{
        width: 100%;
        height: 90px;
        border-bottom: 1px solid #ababab;
        line-height: 90px;
        font-size: 26px;
        color: #1b1b1b;
        padding-left: 20px;
        font-weight: bold;
    }
      .demo-ruleForm{
         width: 100%;
         box-sizing: border-box;
         padding: 24px 60px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         border-bottom: 1px solid #ababab;
     }
     .demo-ruleForm-box{
         display: flex;
         justify-content: flex-start;
         align-items: center;
     }
     .el-form-item{
         margin: 0 15px 0 0;
     }
     .formDiv{
         margin-right: 10px;
     }
     .tatle_title{
         width: 100%;
         text-align: center;
         font-size: 30px;
         color: #5d5d5d;
         margin: 20px 0;
     }
     .demo-ruleForm2{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: calc(100% - 120px);
        margin: 0 auto;
     }
     .formItemBox{
        display: flex;
        justify-content: space-between;
        align-content: flex-start;
        width: 850px;
        flex-wrap: wrap;

     }
     .formItem{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
     }
     .formItem .formDiv{
        width: 100px;
     }
     .btnBox2,.btnBox1{
         margin-top: 20px;
     }
</style>