(function () {
    // 请求远程数据
    $.ajax({
            url: 'http://chst.vip:1902/students/getstulist'
        })
        .then(res => {
            console.log(res);
            let newData = [...res.data]
            let page = ''
            let count = 1
            newData.forEach(item => {
                count++
                if (count > 8) {
                    return false
                }
                let tiao = item.id.substr(item.id.length - 4)
                // 动态创建结构
                page += `
            <div class="tip${count} suiji" hid="${item.id}">
                <div class="tip_h" title="双击关闭纸条">
                    <div class="num">第[${tiao}]条${item.time}</div>
                    <div class="close" title="关闭纸条">×</div>
                    <div class="clr"></div>
                </div>
                <div class="tip_c">
                    ${item.content}
                </div>
                <div class="tip_f">
                    <div class="icon">
                        <img src="images/bpic_1.gif" alt="" title="">
                    </div>
                    <div class="name">${item.name}</div>
                    <div class="clr"></div>
                </div>
            </div>
            `
            })
            $('#content').append(page)

            for (let i = 0; i <= $('.suiji').length; i++) {
                let zuo = Math.floor(Math.random() * 733);
                let shang = Math.floor(Math.random() * 447);
                $('.suiji').eq(i).css({
                    'left': `${zuo}px`,
                    'top': `${shang}px`
                })
            }

            // 点击x删除小纸条
            $('.close').click(function () {
                // console.log('111');
                let cfm = confirm('是否删除小纸条') // 让用户确认是否删除小纸条
                if (cfm) {
                    let hid = $(this).parent().parent().attr('hid')
                    $.ajax({
                        url: `http://chst.vip:1902/students/del?id=${hid}`
                    })
                    .then(res=>{
                        // 删除成功提示
                        if (res.msg) {
                            alert(res.msg) 
                            // 删除成功移除本地图层
                            $(this).parent().parent().remove()
                        } else {
                            alert(res.errormsg) // 删除失败提示
                        }
                    })
                    
                }else{
                    return
                }

            })

            // 双击小纸条的header删除小纸条
            $(".tip_h").dblclick(function () {
                let cfm = confirm('是否删除小纸条') // 让用户确认是否删除小纸条
                if (cfm) {
                    let hid = $(this).parent().attr('hid')
                    $.ajax({
                        url: `http://chst.vip:1902/students/del?id=${hid}`
                    })
                    .then(res=>{
                        // 删除成功提示
                        if (res.msg) {
                            alert(res.msg)
                            // 删除成功移除本地图层
                            $(this).parent().remove()
                        } else {
                            alert(res.errormsg) // 删除失败提示
                        }
                    })
                }else{
                    return
                }
            });
            // 点击小纸条的时候,让小纸条到最前面,层级最高
            let cengji = 1
            $('.suiji').click(function () {
                cengji++
                $(this).css("z-index", `${cengji}`);
            })
            // 拖拽小纸条可以移动
            $('.suiji').mousedown(function (e) {
                let ofx = e.offsetX
                let ofy = e.offsetY
                let sj = $(this)
                $('#content').mousemove(function (e) {
                    // 限制在中间区域
                    let left = e.pageX-$('#content').offset().left-ofx
                    let top = e.pageY-ofy-45-20-35
                    if (left <= 0) {
                        left = 0
                    }
                    if(top<=0){
                        top = 0
                    }
                    if(left > $('#content').width()-sj.width()){
                        left = $('#content').width()-sj.width()
                    }
                    if(top> $('#content').height()-sj.height()){
                        top = $('#content').height()-sj.height()
                    }
                    // 设置样式
                    sj.css({
                        'left': `${left}px`,
                        'top': `${top}px` //减去padding与margin的值
                    })

                })
            })
            // 鼠标放开 结束事件
            $('.suiji').mouseup(function () {
                // console.log('11');
                $('#content').unbind()
            })

            // 点击按钮,将本地评论提交到远程服务器
            // 1. 输入框没有值的时候禁用按钮,有值是解禁
            // 2. 可以按回车提交
            // 3. 错误处理=>提交成功的提示/提交失败的提示
            $('#submit').click(function () { // 点击提交
                if ($('textarea').val() == false) {
                    alert('您没有输入内容')
                }
                let txa = $('textarea').val()
                let name = prompt('请输入姓名')
                $.ajax({
                        type: 'POST',
                        url: `http://chst.vip:1902/students/addlist`,
                        data: {
                            content: txa,
                            name: name
                        }
                    })
                    .then(res => { //提交成功的提示/提交失败的提示
                        if (res.msg) {
                            alert(res.msg)
                            $('textarea').val(null) // 添加成功之后清除文本域的内容
                        } else {
                            alert(res.errormsg)
                        }
                    })
            })
            // 按下enter键提交
            $('textarea').keypress(function (e) {
                if (e.keyCode === 13) {
                    if ($('textarea').val() == false) {
                        alert('您没有输入内容')
                    }
                    let txa = $('textarea').val()
                    let name = prompt('请输入姓名')
                    $.ajax({
                            type: 'POST',
                            url: `http://chst.vip:1902/students/addlist`,
                            data: {
                                content: txa,
                                name: name
                            }
                        })
                        .then(res => { //提交成功的提示/提交失败的提示
                            if (res.msg) {
                                alert(res.msg)
                                $('textarea').val(null) // 添加成功之后清除文本域的内容
                            } else {
                                alert(res.errormsg)
                            }
                        })
                }
            })

        })
})()