<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: wxTouchScreenHeader('正定自贸区')"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,height=device-height,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.1/mescroll.min.css">
    <script src="/touchscreenstyle/actionsheet/build/action-sheet.js"></script>
    <style>
        .mescroll {
            position: fixed;
            top: 44px;
            bottom: 0;
            height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
        }
    </style>
    <style>
        #dialog1 {
            position: fixed;
            left: 3%;
            top: 170px;
            width: 94%;
            height: 780px;
            background: rgba(94, 110, 141, .9)
        }

        .popup {
            margin-top: 240px !important;
        }

        .popup li {
            float: none;
            width: 100%;
        }

        .popup li a {
            width: 40%;
            margin-left: 30%;
            padding-left: 0;
            text-align: center;
        }

        .img-replace {
            display: block;
            width: 40px;
            color: #fff;
            font-size: 40px;
            height: 40px;
            float: right;
            margin-right: 1em;
            margin-top: 40px;
            background: url(/touchscreenstyle/images/close.png);
            background-size: 100%;
        }

        .popup li:nth-child(2) a {
            box-shadow: inset 0 -4px 0 #1a87bb;
            background: #2ea7e0;
            border-color: #249ad2;
        }
    </style>
</head>
<body style="background-color: #EEEEEE">
<div class="header">
    <h1 class="title fl" id="KSName">[[${guidance.guidanceName}]]</h1>
</div>
<div style="bottom: 0px;top: 45px;overflow: hidden; width:100%;">
    <div id="mescroll" class="mescroll">
        <div>
            <div class="bd" id="favList"></div>
        </div>
    </div>
</div>
<th:block th:include="include :: wxTouchScreenFooter"/>
<script src="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.1/mescroll.min.js" charset="utf-8"></script>
<script>
    var prefix = "/wx/touchscreen/itemlist/" + "[[${guidance.tsGuidanceId}]]";
    var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)
        //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
        //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
        up: {
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            callback: upCallback, //上拉加载的回调
            clearEmptyId: "favList",
            //以下是一些常用的配置,当然不写也可以的.
            page: {
                num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                size: 10 //每页数据条数,默认10
            },
            htmlNodata: '<p class="upwarp-nodata">-- 没有更多数据了 --</p>',
            noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
            toTop: {
                //回到顶部按钮
                src: "../img/mescroll-totop.png", //图片路径,默认null,支持网络图
                offset: 1000 //列表滚动1000px才显示回到顶部按钮
            },
            empty: {
                //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
                warpId: "main", //父布局的id (1.3.5版本支持传入dom元素)
                // icon: "../img/mescroll-empty.png", //图标,默认null,支持网络图
                tip: "暂无相关数据~" //提示
            },
            lazyLoad: {
                use: false, // 是否开启懒加载,默认false
                attr: 'imgurl' // 标签中网络图的属性名 : <img imgurl='网络图  src='占位图''/>
            }
        }
    });

    //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
    function upCallback(page) {
        var pageNum = page.num; // 页码, 默认从1开始 如何修改从0开始 ?
        var pageSize = page.size; // 页长, 默认每页10条
        $.ajax({
            url: prefix + '?pageSize=' + pageSize + '&pageNum=' + pageNum + '&orderByColumn=submitTime&isAsc=desc',
            method: 'post',
            success: function (data) {
                var curPageData = data.rows; // 接口返回的当前页数据列表
                if (data.total % 10 > 0) {
                    var totalPage = (data.total / 10) + 1;// 接口返回的总页数 (比如列表有210个数据,每页10条,共3页; 则totalPage值为3)
                } else {
                    var totalPage = data.total / 10;
                }
                var totalSize = data.total; // 接口返回的总数据量(比如列表有210个数据,每页10条,共3页; 则totalSize值为210)
                var hasNext = totalSize > pageNum * 10; // 接口返回的是否有下一页 (true/false)

                //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空,显示empty配置的内容;
                //列表如果无下一页数据,则提示无更多数据,(注意noMoreSize的配置)

                //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                //必传参数(当前页的数据个数, 总页数)
                // mescroll.endByPage(curPageData.length, totalPage);

                //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
                //必传参数(当前页的数据个数, 总数据量)
                mescroll.endBySize(curPageData.length, totalSize);
                //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
                //必传参数(当前页的数据个数, 是否有下一页true/false)
                // mescroll.endSuccess(curPageData.length, hasNext);
                console.log(hasNext);
                if (curPageData != null) {
                    //设置列表数据
                    setListData(curPageData);//自行实现 TODO
                } else {
                    mescroll.endErr();
                }
                //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.
                //如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
                //如果传了hasNext,则翻到第二页即可显示无更多数据.
                //mescroll.endSuccess(curPageData.length);

                //结束下拉刷新的 mescroll.endSuccess()无参.
                //结束上拉加载 curPageData.length必传的原因:
                //1.使配置的noMoreSize 和 empty生效
                //2.判断是否有下一页的首要依据: 当传的值小于page.size时,则一定会认为无更多数据.
                //    比传入的totalPage, totalSize, hasNext具有更高的判断优先级
                //3.当传的值等于page.size时,才会取totalPage, totalSize, hasNext判断是否有下一页
                //传totalPage, totalSize, hasNext主要目的是避免方法四描述的小问题
            },
            error: function (e) {
                //联网失败的回调,隐藏下拉刷新和上拉加载的状态
                mescroll.endErr();
            }
        });
    }

    function setListData(data) {
        if (data.length > 0) {
            for (var i = 0; i < data.length; i++) {
                if (data[i].children.length > 0) {
                    $('#favList').append(getMoreChildHtml(data[i]));
                } else {
                    $('#favList').append(getChildHtml(data[i]), false);
                }

            }
        } else {
            var str = '<div class="weui_cells" style="margin-top:10px;" id="">';
            str += '    <div class="item-info-hd clearFix">';
            str += '        <a style="width: 100%;">无数据</a>';
            str += '    </div>';
            str += '    </div>';
            $('#favList').append(str);
        }
    }

    function getChildHtml(obj, isChild) {
        var str = '<div class="weui_cells" style="margin-top:10px;" id="">';
        if (isChild) {
            str += '    <div class="item-info-hd clearFix" style="background:#f5fbff;" id="' + obj.tsGuidanceId + '">';
        } else {
            str += '    <div class="item-info-hd clearFix" id="' + obj.tsGuidanceId + '">';
        }
        // str += '        <a style="width: 100%;" href="viewDoc/' + obj.tsGuidanceId + '">' + obj.guidanceName + '</a>';
        str += '        <a style="width: 100%;" onclick="openSec(\'' + obj.tsGuidanceId + '\')">' + obj.guidanceName + '</a>';
        str += '    </div>';
        str += '    </div>';
        return str;
    }

    function getMoreChildHtml(obj) {
        var str = '<div class="weui_cells" style="margin-top:10px;" id="">';
        str += '       <div class="item-info-hd clearFix jia" id="div' + obj.tsGuidanceId + '" onclick="showChild(' + obj.tsGuidanceId + ')">' + obj.guidanceName + '</div>';
        str += '    </div>';
        str += '<div class="tab1" style="display: none;" id="t' + obj.tsGuidanceId + '">';
        var list = obj.children;
        for (var i = 0; i < list.length; i++) {
            str += getChildHtml(list[i], true);
        }
        str += '</div>';
        return str;
    }

    function showChild(id) {
        if ($("#t" + id).css('display') == 'none') {
            $('#div' + id).attr("class", "item-info-hd clearFix jian");
            $("#t" + id).show();
        } else {
            $('#div' + id).attr("class", "item-info-hd clearFix jia");
            $("#t" + id).hide();
        }
    }

    function openSec(obj) {
        console.log(obj);
        var as = new ActionSheet({
            buttons: {
                '事项办理指南': '/wx/touchscreen/itemlist/viewdoc/Z/' + obj,
                '事项示范文本': '/wx/touchscreen/itemlist/viewdoc/S/' + obj,
                '空白文本': '/wx/touchscreen/itemlist/viewdoc/K/' + obj,
                '取消': function (e) {
                    this.hide();
                },
            }
        });
        as.show();
    }

</script>
</body>
</html>