<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: touchScreenHeader('办事指南')"/>
    <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>
<th:block th:include="include :: touchscreenHeader"/>
<div class="main">
    <!--<div class="zhanshi">
        <img src="images/a1.png"/>
    </div>-->
    <div>
        <!--<p class="pingtit">办事指南——社会事务审批处</p>-->
        <div class="con">
            <ul class="news tz_box" id="bsznList">
                <div th:if="${guidanceList.isEmpty()}">
                    <li class="tz_bt_box">
                        <i class="jia"></i>
                        <p style="float:left;">暂无内容</p>
                    </li>
                    <div>
                        <li class="tz_bt_box er-list">
                            <p>暂无内容</p>
                        </li>
                    </div>
                </div>
                <div th:if="${!guidanceList.isEmpty()}" th:each="guidance:${guidanceList}">
                    <li class="tz_bt_box">
                        <div th:if="${guidance.children.size()>0}"
                             th:onclick="'showItem('+${guidance.tsGuidanceId}+')'">
                            <i class="jian" th:id="'i'+${guidance.tsGuidanceId}"></i>
                            <p style="float:left;">
                                [[${guidance.guidanceName.length()>54?#strings.substring(guidance.guidanceName,0,54)+"...":guidance.guidanceName}]]</p>
                        </div>
                        <i class="dian" th:if="${guidance.children.size()==0}" th:id="'i'+${guidance.tsGuidanceId}"></i>
                        <a style="float:left;" th:if="${guidance.children.size()==0}"
                           th:onclick="openSec([[${guidance.tsGuidanceId}]])">[[${guidance.guidanceName.length()>54?#strings.substring(guidance.guidanceName,0,54)+"...":guidance.guidanceName}]]</a>
                    </li>
                    <div th:id="${guidance.tsGuidanceId}" style="display: none;">
                        <li class="tz_bt_box er-list" th:each="item:${guidance.children}">
                            <a th:if="${item.docUrl!=null}"
                               th:href="${'/touchscreen/guidanceList/viewdoc/'+item.tsGuidanceId}">
                                <p>
                                    [[${item.guidanceName.length()>54?#strings.substring(item.guidanceName,0,54)+"...":item.guidanceName}]]</p>
                            </a>
                            <p th:if="${item.docUrl==null}">
                                [[${item.guidanceName.length()>54?#strings.substring(item.guidanceName,0,54)+"...":item.guidanceName}]]</p>
                        </li>
                    </div>
                </div>
            </ul>
        </div>
    </div>
    <ul class="an">
        <li class="fan"><a href="javascript:history.back(-1)"><img src="/touchscreenstyle/images/or.png"></a></li>
    </ul>
</div>
<div class="weui_tabbar">
    <a href="/touchscreen/index" class="weui_tabbar_item ">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-map"></i>
        </div>
        <p class="weui_tabbar_label">指引地图</p>
    </a>
    <a href="/touchscreen/jieshao" class="weui_tabbar_item">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-star-o"></i>
        </div>
        <p class="weui_tabbar_label">中心介绍</p>
    </a>
    <!--<a href="/touchscreen/search" class="weui_tabbar_item">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-search"></i>
        </div>
        <p class="weui_tabbar_label">办件查询</p>
    </a>-->
    <a href="/touchscreen/nan" class="weui_tabbar_item weui_bar_item_on">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-telegram"></i>
        </div>
        <p class="weui_tabbar_label">办事指南</p>
    </a>
    <a href="/touchscreen/notice" class="weui_tabbar_item">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-list"></i>
        </div>
        <p class="weui_tabbar_label">公示公告</p>
    </a>
    <a href="/touchscreen/hao" class="weui_tabbar_item">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-bullhorn"></i>
        </div>
        <p class="weui_tabbar_label">叫号统计</p>
    </a>
    <a href="/touchscreen/tong" class="weui_tabbar_item ">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-pie-chart"></i>
        </div>
        <p class="weui_tabbar_label">办件统计</p>
    </a>
</div>
<div id="dialog1" style="display:none;">
    <p><a class="img-replace" id="btn_close"></a></p><!--cd-popup-close-->
    <ul class="zhinan-btn popup">
        <li><a class="btn btn-lg" id="sxblzn">事项办理指南</a></li>
        <!--        <li><a class="btn btn-lg" id="sxsfwb">事项示范文本</a></li>-->
        <!--        <li><a class="btn btn-lg" id="kbwb">空白文本</a></li>-->
    </ul>
</div>
<th:block th:include="include :: touchScreenFooter"/>
<script>
    shijian();

    function showItem(id) {
        var obj = $('#i' + id);
        var objItem = $('#' + id);
        var className = document.getElementById('i' + id).className;
        if (className == "jian") {
            objItem.show();
            obj.attr("class", "jia");
        } else {
            obj.attr("class", "jian");
            objItem.hide();
        }
    }

    function openSec(obj) {
        console.log(obj);
        $("#sxblzn").attr("href", "/touchscreen/guidanceList/viewdoc/Z/" + obj);
        $("#sxsfwb").attr("href", "/touchscreen/guidanceList/viewdoc/S/" + obj);
        $("#kbwb").attr("href", "/touchscreen/guidanceList/viewdoc/K/" + obj);
        $("#dialog1").show();
    }

    $("#btn_close").on("click", function () {
        $("#dialog1").hide();
    })
</script>
</body>
</html>
