<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: landaiqing
  Date: 2023/6/8
  Time: 19:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>--%>
<%--<%@ taglib uri= "http://java.sun.com/jsp/jstl/core" prefix="c" %>--%>

<html>
<head>
    <title>留言本</title>
    <%-- Lay-ui组件库--%>
    <%--    <script type="text/javascript" src="./static/layui/layui.js"></script>--%>
    <%--    &lt;%&ndash;    Lay-ui样式&ndash;%&gt;--%>
    <%--    <link rel="stylesheet" type="text/css" href="./static/layui/css/layui.css">--%>
    <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">

        // <link rel="stylesheet" href="./static/css/index.css" type="text/css">

        // <script language=JavaScript type="text/javascript" src="static/js/index.js"></script>

    <style type="text/css">
        @IMPORT url("./static/css/index.css");

        .submit {
            width: 100px;
            height: 40px;
            border-radius: 20px;
            background-color: #1dc48c;
        }

        .layui-icon-down {
            color: black;
        }

        .layui-nav .layui-nav-more {
            position: absolute;
            top: -13px;
            right: 3px;
            left: auto !important;
            margin-top: 0;
            font-size: 12px;
            cursor: pointer;
            transition: all .2s;
            -webkit-transition: all .2s;
        }
    </style>

</head>

<body>

<div class="main">
    <div class="header">
        <div style="display: flex;position: fixed;flex-direction: row;flex-wrap: nowrap;align-items: center;z-index: 99999;background-color: white">
            <div style="width: 570px;height: 45px;">
                <span style="font-size: 2rem;font-weight: 700;font-family: FZShuTi;color:coral;">留 &nbsp;&nbsp;言&nbsp;&nbsp; 本</span>
            </div>
            <button type="button" class="layui-btn layui-btn-warm layui-btn-radius" lay-on="wrap">
                <i class="layui-icon layui-icon-edit"></i>
                发布留言
            </button>
            <!-- <button type="button" class="layui-btn layui-btn-radius" lay-on="admin">
                <i class="layui-icon layui-icon-set-fill"></i>
                管理
            </button> -->
            <div>
                <ul class="layui-nav" style="background: transparent;">
                    <li class="layui-nav-item" lay-unselect>
                        <a href="javascript:;">
                            <img src="./static/img/touxiang.png" class="layui-nav-img">
                        </a>
                        <dl class="layui-nav-child">
                            <button type="button" class="layui-btn layui-btn-radius" lay-on="admin">
                                <i class="layui-icon layui-icon-set-fill"></i>
                                管理
                            </button>
                        </dl>
                    </li>
                </ul>
            </div>

        </div>
    </div>

    <blockquote style="margin-top: 6%" class="layui-elem-quote layui-text">
        留言列表
    </blockquote>

    <!-- 管理员登陆 -->
    <div class="layui-form" id="adminform" lay-filter="filter-test-layer" style="margin: 16px;display: none;">
        <form action="/MessageBook2_war_exploded/login" method="post">
            <div class="demo-login-container">
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="username" value="" lay-verify="required" placeholder="用户名"
                               lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i>
                        </div>
                        <input type="password" name="password" value="" lay-verify="required" placeholder="密   码"
                               lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-xs7">
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-vercode"></i>
                                </div>
                                <input type="text" name="code" value="" lay-verify="required" placeholder="验证码"
                                       lay-reqtext="请填写验证码" autocomplete="off" class="layui-input"
                                       lay-affix="clear">
                            </div>
                        </div>
                        <div class="layui-col-xs5">
                            <div style="margin-left: 10px;">
                                <img src=VerifycodeServlet
                                     onclick="this.src='VerifycodeServlet?'+ new Date().getTime();">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
                </div>
                <div class="layui-form-item">
                    <input class="submit" type="submit" value="登录"/>
                </div>
            </div>
        </form>

    </div>


    <!-- 发布留言的主体 -->
    <div class="wrap" id="warp" style="display: none;">
        <div class="userIfo">
            <div class="layui-panel">
                <div style="padding: 32px;" class="panel">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" id="name" name="name" placeholder="昵称" class="layui-input">
                    </div>

                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-login-qq"></i>
                        </div>
                        <input type="text" id="qq" name="qq" placeholder="QQ" class="layui-input">
                    </div>

                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-email"></i>
                        </div>
                        <input type="text" id="email" name="email" placeholder="Email" class="layui-input">
                    </div>

                </div>
            </div>
        </div>
        <div class="layui-panel">
            <div class="wrap-head">
                <div class="head-logo">
                    <img src="./static/img/留言.png" style="height: 20px;width: 20px;"/>
                </div>
                <div class="head-txt">
                    <a class="title-txt"
                       href="javascript:void(0)">言无有善恶也，苟有得乎吾心而言也，则其辞不索而获。</a>
                </div>
            </div>
            <div class="main-txt">
                <textarea name="content" id="content" rows="" cols="" class="main-area"></textarea>

            </div>
            <div class="warp-footer">
                <div class="warp-icon-cont">
                    <ul>
                        <li><img src="./static/img/发表情.png" alt=""/>
                            <a href="javascript:void(0)">表情</a>
                        </li>
                        <li><img src="./static/img/图片_填充.png" alt=""/>
                            <a href="javascript:void(0)">图片</a>
                        </li>
                        <li><img src="./static/img/视频_填充.png" alt=""/>
                            <a href="javascript:void(0)">视频</a>
                        </li>
                        <li><img src="./static/img/话题选中.png" alt=""/>
                            <a href="javascript:void(0)">话题</a>
                        </li>
                        <li><img src="./static/img/文章.png" alt=""/>
                            <a href="javascript:void(0)">文章</a>
                        </li>
                    </ul>
                </div>
                <div class="warp-footer-btns">
                    <div class="release-btn">
                        <a href="javascript:publish()">发布</a>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 显示留言的主体 -->
    <c:forEach items="${list}" var="list" varStatus="i">
    <div class="show">
        <div class="show-content">
            <div class="show-name">
                <div class="avtors"><img src="./static/img/头像修改.png" alt=""
                                         style="width: 40px;height: 40px;border-radius: 50%;"></div>
                <span style="margin-left: 10px;font-size: 1rem;">${list.nickName}</span>
            </div>
            <div class="show-txt">
                <p class="">${list.content}</p>
            </div>
            <div class="show-time">${list.dateTime}</div>
            <!-- <button type="button" class="layui-btn layui-btn-xs" lay-on="wrap">
                <i class="layui-icon layui-icon-release"></i> 回复
            </button> -->
            <div class="layui-panel">
                <c:choose>
                <c:when test="${not empty list.replyContent && !(list.replyContent eq null)}">
                <div class="comment-wrap">
                    <div class="photo">
                        <div class="avatar" style="background-image: url('./static/img/头像修改.png')"></div>
                    </div>
                    <div class="comment-block">
                        <p class="comment-text">${list.replyContent}</p>
                        <div class="bottom-comment">
                            <div class="comment-date">${list.replyDateTime}</div>
                        </div>
                    </div>
                </div>
<%--                <div class="comments">--%>
<%--                    <div class="comment-wrap">--%>
<%--                        <div class="photo">--%>
<%--                            <div class="avatar" style="background-image: url('./static/img/头像修改.png')"></div>--%>
<%--                        </div>--%>
<%--                        <div class="comment-block">--%>
<%--                            <form action="">--%>
<%--                                        <textarea name="content" id="replyContent" cols="30" rows="3" placeholder="Say somthing..."--%>
<%--                                                  style="resize:none"></textarea>--%>
<%--                                <button type="button" class="layui-btn layui-btn-xs" onclick="reply(${list.userId})">--%>
<%--                                    <i class="layui-icon layui-icon-release"></i> 回复--%>
<%--                                </button>--%>
<%--                            </form>--%>
<%--                        </div>--%>
<%--                    </div>--%>
                    </c:when>
                    <c:otherwise>
                    <div class="comments">
                        <div class="comment-wrap">
                            <div class="photo">
                                <div class="avatar" style="background-image: url('./static/img/头像修改.png')"></div>
                            </div>
                            <div class="comment-block">
                                <form action="">
                                        <textarea name="" id="replyContent"  cols="30" rows="3" placeholder="Say somthing..."
                                                  style="resize:none"></textarea>
                                    <button type="button" class="layui-btn layui-btn-xs" onclick="reply(${list.userId})">
                                        <i class="layui-icon layui-icon-release"></i> 回复
                                    </button>
                                </form>
                            </div>
                        </div>
                        </c:otherwise>
                        </c:choose>
                        <div class="show-close">x</div>
                    </div>
                </div>
            </div>
            </c:forEach>


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

            <script>
                layui.use(function () {
                    var $ = layui.$;
                    var layer = layui.layer;
                    var util = layui.util;
                    var form = layui.form;

                    util.on('lay-on', {

                        'wrap': function () {
                            layer.open({
                                type: 1,
                                resize: true,
                                title: '发表留言',
                                shade: false, // 不显示遮罩
                                content: $('#warp'), // 捕获的元素
                                end: function () {
                                    // layer.msg('关闭后的回调', {icon:6});
                                }
                            });
                        },
                        'admin': function () {
                            layer.open({
                                type: 1,
                                area: '350px',
                                resize: false,
                                shadeClose: true,
                                title: '管理员登录',
                                content: $('#adminform'),
                            },)
                        }

                    })

                })
                // 发布评论
                function publish() {
                    var name = document.getElementById('name').value;
                    var qq = document.getElementById('qq').value;
                    var email = document.getElementById('email').value;
                    var content = document.getElementById('content').value;
                    console.log(name + qq + email + content);
                    axios({
                        // 请求方式
                        method: 'post',
                        // 请求的地址
                        url: 'http://localhost:8080${pageContext.request.contextPath}/publish',
                        // URL 中的查询参数
                        params: {
                            name: name,
                            qq: qq,
                            email: email,
                            content: content
                        }
                    }).then(function (result) {
                        //定位 span  id 名称 error 修改
                        // console.log(result);
                        window.location.reload();
                    })

                }
                // 回复
                function reply(userId){
                    var content = document.getElementById('replyContent').value;
                    axios({
                        // 请求方式
                        method: 'post',
                        // 请求的地址
                        url: 'http://localhost:8080${pageContext.request.contextPath}/reply',
                        // URL 中的查询参数
                        params: {
                            userId: userId,
                            replyContent:content
                        }
                    }).then(function (result) {
                        //定位 span  id 名称 error 修改
                        // console.log(result);
                        window.location.reload();
                    })

                }

                $(function () {
                    // 还能输入的字得个数
                    var able_count = 140;
                    // 是否可以发布留言
                    var release_able = false;
                    // 右上角文字
                    var $title_txt = $('.title-txt');
                    // 留言框
                    var $main_area = $('.main-area');
                    // 发布按钮
                    var $release_btn = $('.release-btn');

                    // 输入框获取焦点
                    $main_area.focus(function () {
                        console.log("获取焦点");
                        $(this).parent().addClass('outline');
                        $title_txt.addClass('title');
                        if (able_count >= 0) {
                            $title_txt.html("还可以输入" + able_count + "个字");
                        } else {
                            $title_txt.html("你以超出" + (-able_count) + "个字");
                        }
                    })

                    // 输入框失去焦点
                    $main_area.blur(function () {
                        console.log("失去焦点");
                        $(this).parent().removeClass('outline');
                        $title_txt.removeClass('title');
                        $title_txt.html("言无有善恶也，苟有得乎吾心而言也，则其辞不索而获。");
                    })

                    // 输入框文本修改
                    $main_area.on('input', function () {
                        console.log("文本修改");
                        // 剩余可输入的字个数
                        able_count = 140 - $main_area.val().length;
                        // console.log(able_count);
                        // 根据可输入字的个数决定右上角文本的提示 与 是否能发布的状态
                        if (able_count >= 0 && able_count <= 140) {
                            $title_txt.html("还可以输入" + able_count + "个字");
                            if (able_count != 140) {
                                release_able = true;
                            } else {
                                release_able = false;
                            }
                        } else {
                            $title_txt.html("你以超出" + (-able_count) + "个字");
                            release_able = false;
                        }
                        // 根据发布状态决定发布按钮的样式
                        if (release_able) {
                            $release_btn.css({
                                backgroundColor: "orange",
                                borderColor: "orange"
                            })
                        } else {
                            $release_btn.css({
                                backgroundColor: "#ffc09f",
                                borderColor: "#ffc09f"
                            })
                        }

                    })

                    // 发布事件
                    // $release_btn.click(function () {
                    //   console.log("发布");
                    //   if (release_able) {
                    //     console.log('可以发布');
                    //     // 创建show对象的各个部位
                    //     var $showContent = $('<div class="show-content"></div>'),
                    //             $showName = $('<div class="show-name"></div>'),
                    //             $showTxt = $('<div class="show-txt"></div>'),
                    //             $showTime = $('<div class="show-time"></div>'),
                    //             $showClose = $('<div class="show-close"></div>'),
                    //             $showP = $('<p class=""></p>');
                    //
                    //     var date = new Date();
                    //     // 设置，对象结构内内容
                    //     $showName.text("XxXx");
                    //     $showP.text($main_area.val());
                    //     $showTime.text(date);
                    //     $showClose.text("x");
                    //     // 添加进入主结构
                    //     $showTxt.append($showP);
                    //     $showContent.append($showName);
                    //     $showContent.append($showTxt);
                    //     $showContent.append($showTime);
                    //     $showContent.append($showClose);
                    //
                    //     // 向所有匹配元素内部的开始处插入内容
                    //     $('.show').prepend($showContent);
                    //
                    //     // 添加动画
                    //     // 位置从输入框处下移
                    //     $showContent.css({
                    //       top: '-150px'
                    //     })
                    //     $showContent.animate({
                    //       top: 0
                    //     }, 200)
                    //
                    //     // 删除事件
                    //     $showClose.click(function () {
                    //       // 显示插入的索引位置
                    //       // console.log($(this).parent().index());
                    //       // console.log($showContent.index());
                    //
                    //
                    //       // 删除操作为顺便
                    //       // $showContent.remove();
                    //
                    //       // 使用删除动画，创建效果
                    //       $showContent.animate({
                    //         height: 0
                    //       }, 200, function () {
                    //         // 动画结束后将自身从dom中移除
                    //         $showContent.remove();
                    //       })
                    //
                    //
                    //     })
                    //
                    //     // 发布成功后收尾工作
                    //     $main_area.val(""); //输入框清空
                    //     able_count = 140;  //输入框可输入内容数重置
                    //     release_able = false;
                    //     $release_btn.css({
                    //       backgroundColor: '#ffc09f',
                    //       borderColor: '#ffc09f'
                    //     })  //按钮点击事件重置
                    //
                    //   }
                    // })


                })


            </script>


</body>
</html>
