<template>
    <div class="box">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="num_key" label="ID" width="180">
            </el-table-column>
            <el-table-column prop="user" label="用户名" width="180">
            </el-table-column>
            <el-table-column width="180" prop="pwd" label="密码">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="del(scope.row.num_key)"
                        >删除</el-button
                    >
                    <el-button size="mini" @click="up(scope.row.num_key,scope.$index)"
                        >修改</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
        >
        
            <div>
                <p>用户名：</p>
                <el-input v-model="user" placeholder="请输入用户名"></el-input>
            </div>
            <div>
                <p>密码：</p>
                <el-input
                    v-model="pwd"
                    show-password
                    placeholder="请输入密码"
                ></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="set"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>
<style scoped>
.box{
    width: 100%;
}
</style>
<script>
export default {
    data() {
        return {
            tableData: [],
            dialogVisible: false,
            user:"",
            pwd:"",
            id:""
        };
    },
    mounted() {
        this.getlist();
    },
    methods: {
        del(id) {
            this.axios
                .get("/deluser", {
                    params: {
                        id,
                    },
                })
                .then((res) => {
                    console.log(res.data);
                    this.getlist();
                });
        },
        getlist() {
            this.axios.get("/getlist").then((res) => {
                console.log(res.data);
                this.tableData = res.data.data;
            });
        },
        up(id,index){
            this.dialogVisible = true
            this.id = id
            this.pwd = this.tableData[index].pwd
            this.user = this.tableData[index].user

        },
        set(){
            this.axios.post("/update",{
                user: this.user,
                pwd: this.pwd,
                id: this.id
            }).then((res)=>{
                console.log(res.data)
                this.getlist()
            this.dialogVisible = false
                
            })
        }
    },
};
</script>