<%--
  Created by IntelliJ IDEA.
  User: LDQ
  Date: 2023/6/9
  Time: 16:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">

    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.8.0/dist/layui.js"></script>
</head>
<body>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addAdmin">添加管理员</button>
    </div>
</script>







<table class="layui-hide" id="ID-table-demo-data"></table>

<script type="text/html" id="ID-table-demo-templet-switch">
    <!-- 这里的 checked 的状态值判断仅作为演示 -->
    <input type="checkbox" id="checkbox" name="status" value="{{= d.adminId }}" title="开启|关闭" lay-skin="switch" lay-filter="status" {{= d.isValid == '1' ? "checked" : "" }}>
</script>

<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="more">
            更多
            <i class="layui-icon layui-icon-down"></i>
        </a>
    </div>
</script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

    function getDate(){
        axios({
            // 请求方式
            method: 'get',
            // 请求的地址
            url: 'http://localhost:8080${pageContext.request.contextPath}/adminList',
            // URL 中的查询参数
            params: {

            }
        }).then(function (result) {
            layui.use('table', function(){
                var table = layui.table;
                var form = layui.form;
                var dropdown = layui.dropdown;
                // 已知数据渲染
                var inst = table.render({
                    elem: '#ID-table-demo-data'
                    ,toolbar: '#toolbarDemo'
                    ,cols: [[ //标题栏
                        {field: 'adminId', title: 'ID', width: 80, sort: true}
                        ,{field: 'adminUserName', title: '管理员', width: 180}
                        ,{field: 'adminPassword', title: '密码', width: 200}
                        ,{field: 'isValid', title: '是否有效', width: 150,templet: function(d){
                                if(d.isValid === 1){
                                    return '<span style="color: green" title="有效">●</span>';
                                } else {
                                    return '<span style="color: red" title="无效">●</span>';
                                }
                            }},
                        {title: '状态', width:100, templet: '#ID-table-demo-templet-switch'},
                        {fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}

                    ]],done:function (){
                        form.on('switch(status)', function (obj) {
                            var id = obj.value;
                            if(this.checked){
                                OpenAdmin(id);

                            }else{
                                CloseAdmin(id);
                            }

                        });

                        table.on('toolbar(ID-table-demo-data)', function(obj){
                            var id = obj.config.id;
                            var checkStatus = table.checkStatus(id);
                            var othis = lay(this);
                            switch(obj.event){
                                case 'addAdmin':
                                    layer.open({
                                        title: '添加管理员',
                                        type: 1,
                                        area: ['50%','80%'],
                                        content: `<div id="warp">
    <div  style="display: flex;flex-direction: column;align-content: center;align-items: center;justify-content: center">
            <div class="layui-form-item">
                <label class="layui-form-label">管理员</label>
                <div class="layui-input-block">
                    <input type="text" name="admin" id="adminUserName" autocomplete="off" class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" id="adminPassword"  lay-verify="required"  class="layui-input"  >
                </div>
            </div>
            <div class="layui-form-item" pane>
                <label class="layui-form-label">是否有效</label>
                <div class="layui-input-block">
                    <input type="text" id="isValid" placeholder="1 为有效/0为无效" name="open" lay-filter="required" class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" onclick="addAdmin()">确认</button>
<!--                <button type="close" class="layui-btn layui-btn-primary" onclick="close()">关闭</button>-->
            </div>
    </div>
</div>`,

                                    });
                                    break;
                                // case 'getData':
                                //     var getData = table.getData(id);
                                //     console.log(getData);
                                //     layer.alert(layui.util.escape(JSON.stringify(getData)));
                                //     break;
                                // case 'LAYTABLE_TIPS':
                                //     layer.alert('自定义工具栏图标按钮');
                                //     break;
                            };
                        });

                        // 触发单元格工具事件
                        table.on('tool(ID-table-demo-data)', function(obj){ // 双击 toolDouble
                            var data = obj.data; // 获得当前行数据
                            // console.log(obj)
                            if(obj.event === 'edit'){
                                layer.open({
                                    title: '编辑 - id:'+ data.adminId,
                                    type: 1,
                                    area: ['50%','80%'],
                                    content: `<div id="warp">
    <div  style="display: flex;flex-direction: column;align-content: center;align-items: center;justify-content: center">
            <div class="layui-form-item">
                <label class="layui-form-label">ID</label>
                <div class="layui-input-block">
                    <input type="text" name="id" id="ID" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">管理员</label>
                <div class="layui-input-block">
                    <input type="text" name="admin" id="adminUserName" autocomplete="off" class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" id="adminPassword"  lay-verify="required"  class="layui-input"  >
                </div>
            </div>
            <div class="layui-form-item" pane>
                <label class="layui-form-label">是否有效</label>
                <div class="layui-input-block">
                    <input type="text" id="isValid" placeholder="1 为有效/0为无效" name="open" lay-filter="required" class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" onclick="upAdateAdmin()">确认</button>
<!--                <button type="close" class="layui-btn layui-btn-primary" onclick="close()">关闭</button>-->
            </div>
    </div>
</div>`,

                                });

                            } else if(obj.event === 'more'){
                                // 更多 - 下拉菜单
                                dropdown.render({
                                    elem: this, // 触发事件的 DOM 对象
                                    show: true, // 外部事件触发即显示
                                    data: [{
                                        title: '查看',
                                        id: 'detail'
                                    },{
                                        title: '删除',
                                        id: 'del'
                                    }],
                                    click: function(menudata){
                                        if(menudata.id === 'detail'){
                                            layer.msg('ID:'+ data.adminId
                                                       +'\n管理员:'+data.adminUserName
                                                       +"\n密 码:"+data.adminPassword
                                                        +"\n是否有效:"+data.isValid);
                                        } else if(menudata.id === 'del'){
                                            layer.confirm('真的删除行 [id: '+ data.adminId +'] 么', function(){
                                                obj.del(); // 删除对应行（tr）的DOM结构
                                                // layer.close(index);
                                                deleteAdmin(data.adminId);
                                                // 向服务端发送删除指令
                                            });
                                        }
                                    },
                                    align: 'right', // 右对齐弹出
                                    style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                                })
                            }
                        });
                    }
                    ,data: result.data
                    //,skin: 'line' // 表格风格
                    //,even: true
                    ,page: true // 是否显示分页
                    ,limits: [5, 10, 15]
                    ,limit: 5 // 每页默认显示的数量
                });




            });
        })
    }
    getDate();

    function OpenAdmin(id){
        axios({
            // 请求方式
            method: 'get',
            // 请求的地址
            url: 'http://localhost:8080${pageContext.request.contextPath}/openAdmin',
            // URL 中的查询参数
            params: {
                id:id
            }
        }).then(function (result) {
            layer.msg('开启成功'), {
                offset: '6px'
            }
            window.location.reload();
        })
    }

    function CloseAdmin(id){
        axios({
            // 请求方式
            method: 'get',
            // 请求的地址
            url: 'http://localhost:8080${pageContext.request.contextPath}/closeAdmin',
            // URL 中的查询参数
            params: {
                id:id
            }
        }).then(function (result) {
            layer.msg('关闭成功'), {
                offset: '6px'
            }
            window.location.reload();
        })

    }

    function upAdateAdmin(){
        var id=document.getElementById('ID').value;
        var adminUserName=document.getElementById('adminUserName').value;
        var adminPassword=document.getElementById('adminPassword').value;
        var isValid=document.getElementById('isValid').value;
        axios({
            // 请求方式
            method: 'post',
            // 请求的地址
            url: 'http://localhost:8080${pageContext.request.contextPath}/updateAdmin',
            // URL 中的查询参数
            params: {
                id:id,
                adminUserName:adminUserName,
                adminPassword:adminPassword,
                isValid:isValid
            }
        }).then(function (result) {
            layer.msg('修改成功!'), {
                offset: '6px'
            }
            window.location.reload();
        })
    }

    function deleteAdmin(id){
        axios({
            // 请求方式
            method: 'get',
            // 请求的地址
            url: 'http://localhost:8080${pageContext.request.contextPath}/deleteAdmin',
            // URL 中的查询参数
            params: {
                id:id,
            }
        }).then(function (result) {
            layer.msg('删除成功!'), {
                offset: '6px'
            }
            window.location.reload();
        })
    }
    function addAdmin()
    {
        var adminUserName=document.getElementById('adminUserName').value;
        var adminPassword=document.getElementById('adminPassword').value;
        var isValid=document.getElementById('isValid').value;
        axios({
            // 请求方式
            method: 'post',
            // 请求的地址
            url: 'http://localhost:8080${pageContext.request.contextPath}/addAdmin',
            // URL 中的查询参数
            params: {
                adminUserName:adminUserName,
                adminPassword:adminPassword,
                isValid:isValid
            }
        }).then(function (result) {
            layer.msg('添加成功!'), {
                offset: '6px'
            }
            window.location.reload();
        })
    }

</script>

</body>
</html>
