<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>{{ config('app.name') }} | Task</title> 

  <link rel="stylesheet" href="{{ asset('static/home/css/swiper-bundle.min.css') }}"> 
  <link rel="stylesheet" href="{{ asset('static/home/css/reset.css') }}"> 
  <link rel="stylesheet" href="{{ asset('static/home/css/style.css') }}"> 
  <link rel="stylesheet" href="{{ asset('static/home/layui/css/layui.css') }}"> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.5.7/css/layui.min.css">
</head> 
<body class="huiBg"> 

  <div class="top"> 
    <a href="{{ url('/') }}" class="topLeft"> <i class="layui-icon layui-icon-left"></i> </a> 
    <div class="topTit">Task</div> 
  </div> 

  <div class="home-news"> 
    <div class="home-new-list"> 
      <ul></ul> 
    </div> 
    <div class="dropload-down">
      <div class="dropload-load">
        <span class="loading"></span>loading...
      </div>
    </div>
  </div> 

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="{{ asset('static/home/layui/layui.js') }}"></script>
  <script src="{{ asset('static/home/js/dropload.min.js') }}"></script>

  <script type="text/javascript">
    var page = 0;
    var _token = "{{ csrf_token() }}";

    layui.use(['form', 'layer'], function () {
        var form = layui.form, layer = layui.layer;
        $('body').on('click', '.mask-float-btn', function () {
            $(".z-mask").hide();
        });
    });

    $(function () {
        var page = 0;
        $('.home-news').dropload({
            scrollArea: window,
            domDown: {
                domClass: 'dropload-down',
                domRefresh: '<div class="dropload-refresh">↑ pull up to load more</div>',
                domLoad: '<div class="dropload-load"><span class="loading"></span>loading...</div>',
                domNoData: '<div class="dropload-nodata">no more</div>'
            },
            loadDownFn: function (me) {
                page++;
                var html = '';
                $.post("{{ route('task') }}", {page: page, _token: _token}, function (result) {
                    if (result.code == 201) {
                        layer.msg('login invalid', {icon: 16, time: 1000, shade: [0.5, '#393D49']}, function () {
                            location.href = "{{ route('login') }}";
                        });
                        return false;
                    }
                    if (result.code == 200) {
                        var dataLen = result.data.length;
                        for (var i = 0; i < dataLen; i++) {
                            html += '<li>';
                            html += '<a href="' + result.data[i].link + '">';
                            html += '<img src="' + result.data[i].img + '" alt="">';
                            html += '<dl>';
                            html += '<dt>' + result.data[i].title + '</dt>';
                            html += '<dd class="desc">' + result.data[i].content + '</dd>';
                            html += '<dd>' + result.data[i].createTime + '</dd>';
                            html += '</dl>';
                            html += '</a>';
                            html += '</li>';
                        }
                        me.noData(false);
                    } else {
                        me.lock();
                        me.noData(true);
                    }
                    $('.home-new-list ul').append(html);
                    me.resetload();
                }, "json");
            }
        });
    });
  </script> 
</body>
</html>
