<%--
  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="upadte">修 改</button>
    </div>
</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>

<table class="layui-hide" id="ID-table-demo-data"></table>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    function getDate(){
        axios({
// 请求方式
            method: 'get',
// 请求的地址
            url: 'http://localhost:8080${pageContext.request.contextPath}/listManage',
// URL 中的查询参数
            params: {

            }
        }).then(function (result) {
            console.log(result);
            layui.use('table', function(){
                var table = layui.table;
                var form = layui.form;
                var dropdown = layui.dropdown;
                var laydate = layui.laydate;
                var util = layui.util;
                // 已知数据渲染
                var inst = table.render({
                    elem: '#ID-table-demo-data'
                    ,toolbar: '#toolbarDemo'
                    ,cols: [[ //标题栏
                        {field: 'userId', title: 'ID', width: 80, sort: true}
                        ,{field: 'nickName', title: '昵称', width: 130}
                        ,{field: 'qQ', title: 'QQ', width: 130}
                        ,{field: 'email', title: '邮箱', width: 180},
                        {field:'content', title: '评论内容', width:250, },
                        {field:'dateTime', title: '评论时间', width:130, },
                        {field:'replyContent', title: '回复内容', width:200, },
                        {field:'replyDateTime', title: '回复时间', width:130, },
                        {fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
                        // {fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}

                    ]],done:function (){
                        // 触发单元格工具事件
                        table.on('tool(ID-table-demo-data)', function(obj){ // 双击 toolDouble
                            var data = obj.data; // 获得当前行数据
                            // console.log(obj)
                           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.userId
                                                +'\n昵称:'+data.nickName
                                                +"\nQ Q:"+data.qQ
                                                +"\nEmail:"+data.email
                                                +"\n评论内容:"+data.content
                                                +"\n评论时间:"+data.dateTime
                                                +"\n回复内容:"+data.replyContent
                                                +"\n回复时间:"+data.replyDateTime
                                            );
                                        } else if(menudata.id === 'del'){
                                            layer.confirm('真的删除行 [id: '+ data.userId +'] 么', function(){
                                                obj.del(); // 删除对应行（tr）的DOM结构
                                                // layer.close(index);
                                                // deleteAdmin(data.adminId);
                                                deleteUser(data.userId);
                                                // 向服务端发送删除指令
                                            });
                                        }
                                    },
                                    align: 'right', // 右对齐弹出
                                    style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                                })
                            }
                        });


                        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 'upadte':
                                    layer.open({
                                        title: '修改',
                                        type: 1,
                                        area: ['80%','80%'],
                                        content: `<div id="warp">
    <div  style="display: flex;flex-direction: column;align-content: center;align-items: center;justify-content: center">
<form class="layui-form" lay-filter="scoreRuleForm">
            <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" placeholder="被修改数据ID">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">昵 称</label>
                <div class="layui-input-block">
                    <input type="text" id="nickName" name="nickName"  class="layui-input"  >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">QQ</label>
                <div class="layui-input-block">
                    <input type="text" id="qq"  name="qq"  class="layui-input"  >
                </div>
            </div>
            <div class="layui-form-item" pane>
                <label class="layui-form-label">Email</label>
                <div class="layui-input-block">
                    <input type="text" id="email"  name="email" lay-filter="required" class="layui-input" >
                </div>
            </div>
           <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">评论内容</label>
                <div class="layui-input-block">
                  <textarea placeholder="请输入评论内容" id="content" name="content" class="layui-textarea"></textarea>
                </div>
              </div>

            <div class="layui-inline">
                  <label class="layui-form-label">评论日期</label>
                  <div class="layui-input-inline layui-input-wrap">
                    <div class="layui-input-prefix">
                      <i class="layui-icon layui-icon-date"></i>
                    </div>
                    <input type="text" name="dateTime" id="dateTime" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                  </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">回复内容</label>
                <div class="layui-input-block">
                  <textarea placeholder="请输入回复内容" id="replyContent" name="replyContent" class="layui-textarea"></textarea>
                </div>
              </div>
            <div class="layui-inline">
                  <label class="layui-form-label">回复日期</label>
                  <div class="layui-input-inline layui-input-wrap">
                    <div class="layui-input-prefix">
                      <i class="layui-icon layui-icon-date"></i>
                    </div>
                    <input type="text" name="replyDateTime" id="replyDateTime" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                  </div>
            </div>

            <div class="layui-form-item">
               <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
               <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
</form>
    </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;
                            };
                        });
// 日期


                        form.on('submit(demo1)', function(data){
                            var field = data.field; // 获取表单字段值
                            // 显示填写结果，仅作演示用
                            layer.alert(JSON.stringify(field), {
                                title: '当前填写的字段值'
                            });
                            $.ajax({
                                url:"http://localhost:8080${pageContext.request.contextPath}/update",
                                async:false,
                                type:"POST",
                                dataType:"text",
                                data:field,
                                success:function(){
                                    window.location.reload();
                                }
                            })
                            layer.alert(JSON.stringify(data.field), {
                            })
                            return false; // 阻止默认 form 跳转
                        });

                    }
                    ,data: result.data
                    //,skin: 'line' // 表格风格
                    //,even: true
                    ,page: true // 是否显示分页
                    ,limits: [5, 10, 15]
                    ,limit: 5 // 每页默认显示的数量
                });




            });
          })
        }
    getDate();
    function deleteUser(id){
        axios({
            // 请求方式
            method: 'get',
            // 请求的地址
            url: 'http://localhost:8080${pageContext.request.contextPath}/deleteUser',
            // URL 中的查询参数
            params: {
                id:id,
            }
        }).then(function (result) {
            layer.msg('删除成功!'), {
                offset: '6px'
            }
        })
    }

    layui.use('laydate', function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#dateTime',
        });
        laydate.render({
            elem: '#replyDateTime',
        });
    });


    <%--function update(){--%>
    <%--    var id=document.getElementById('id').value;--%>
    <%--    var nickName=document.getElementById('nickName').value;--%>
    <%--    var qq=document.getElementById('qq').value;--%>
    <%--    var email=document.getElementById('email').value;--%>
    <%--    var content=document.getElementById('content').value;--%>
    <%--    var replyContent=document.getElementById('replyContent').value;--%>
    <%--    var dateTime=document.getElementById('dateTime').value;--%>
    <%--    var ReplyDateTime=document.getElementById('ReplyDateTime').value;--%>
    <%--    axios({--%>
    <%--        // 请求方式--%>
    <%--        method: 'post',--%>
    <%--        // 请求的地址--%>
    <%--        url: 'http://localhost:8080${pageContext.request.contextPath}/update',--%>
    <%--        // URL 中的查询参数--%>
    <%--        params: {--%>
    <%--            id:id,--%>
    <%--            nickName:nickName,--%>
    <%--            qq:qq,--%>
    <%--            email:email,--%>
    <%--            content:content,--%>
    <%--            replyContent:replyContent,--%>
    <%--            dateTime:dateTime,--%>
    <%--            ReplyDateTime:ReplyDateTime--%>
    <%--        }--%>
    <%--    }).then(function (result) {--%>
    <%--        layer.msg('修改成功!'), {--%>
    <%--            offset: '6px'--%>
    <%--        }--%>
    <%--        window.location.reload();--%>
    <%--    })--%>
    <%--}--%>

</script>


</body>
</html>
