<%@ page language="java" pageEncoding="UTF-8"
         contentType="text/html; charset=UTF-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
    String basePath = request.getContextPath();
    String resourcePath = basePath + "/resource";
%>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="../common/head.jsp"></jsp:include>
</head>
<body>
<jsp:include page="../common/body_header.jsp"></jsp:include>
<div class="datalistbanner">
    <div class="banner"></div>
</div>
<div class="liebiao">
    <div class="liebiao1">
        <span class="liebiao02"><a href="<%=basePath%>/open/data/index.htm" class="xuanxiangfont">数据</a></span>
        <span class="liebiao01"><a href="<%=basePath%>/open/api/list.htm" class="xuanxiangfont xuanxiangfont-active">API</a> </span>
        <span class="liebiao01"><a href="<%=basePath%>/open/microapp/openList.action" class="xuanxiangfont">微应用</a></span>
    </div>
</div>
<div class="mid">
    <div class="main">
        <div class="shuju">
            <div class="api-xuanze">
                <span class="xuanze1  <c:if test="${empty searchModel.apiServiceType}">xuanze1-active</c:if>" onclick="apiServiceType('')">不限</span>
                <c:if test="${dicAPIServiceType.size()>0}">
                    <c:forEach items="${dicAPIServiceType}" var="apiServiceType">
                        <span class="xuanze11 <c:if test="${searchModel.apiServiceType eq apiServiceType.value}">xuanze1-active</c:if>" onclick="apiServiceType('${apiServiceType.value}')">${apiServiceType.name}</span>
                    </c:forEach>
                </c:if>
            </div>

            <div class="filter">
                <div id="themeItem" style="height: 60px" class="item">
                    <div class="zhuti">主题：</div>
                    <ul   class="item1">
                        <li class="li">
                            <a  onclick="themeSearch('')" class="a<c:if test="${ empty searchModel.catelogThemeCode}">0</c:if>4">不限</a>
                        </li>
                        <c:if test="${themes.size()>0}">
                            <c:forEach items="${themes}" var="theme">
                                <li class="li">
                                    <a  onclick="themeSearch('${theme.catelogCode}')" class="a<c:if test="${searchModel.catelogThemeCode eq theme.catelogCode}">0</c:if>4"
                                       >${theme.cateLogName}</a>
                                </li>
                            </c:forEach>
                        </c:if>
                    </ul>
                    <div id="themeDown" class="icon2"><a onclick="showThemeTag()"><img src="<%=resourcePath%>/images/icon_down.png"></a></div>
                    <div id="themeTop" class="icon2"><a onclick="hiddenThemeTag()"><img src="<%=resourcePath%>/images/icon_top.png"></a></div>
                </div>
                <div class="item" id="sectorItem" style="height: 60px">
                    <div class="zhuti">部门：</div>
                    <ul class="item1">
                        <li class="li">
                            <a  onclick="sectorSearch('')" class="a<c:if test="${empty searchModel.sectorCode}">0</c:if>4">不限</a>
                        </li>
                        <c:if test="${sectors.size()>0}">
                            <c:forEach items="${sectors}" var="sector">
                                <li class="li">
                                    <a  onclick="sectorSearch('${sector.sectorCode}')" class="a<c:if test="${searchModel.sectorCode==sector.sectorCode}">0</c:if>4"
                                       >${sector.sectorName}</a>
                                </li>
                            </c:forEach>
                        </c:if>
                    </ul>
                    <div id="sectorDown" class="icon2"><a onclick="showSectorShow()"><img src="<%=resourcePath%>/images/icon_down.png"></a></div>
                    <div id="sectorTop" class="icon2"><a onclick="hiddenSectorHidden()"><img src="<%=resourcePath%>/images/icon_top.png"></a></div>
                </div>
                <div  class="item">
                    <div class="zhuti">类型：</div>
                    <ul class="item1">
                        <li class="li">
                            <a href="##" onclick="chargeMethodSearch('')" class="a<c:if test="${empty searchModel.chargeMethod}">0</c:if>4">不限</a>
                        </li>
                        <c:if test="${chargeMethods.size()>0}">
                            <c:forEach items="${chargeMethods}" var="chargeMethod">
                                <li class="li">
                                    <a href="##" onclick="chargeMethodSearch('${chargeMethod.key}')" class="a<c:if test="${searchModel.chargeMethod eq chargeMethod.key}">0</c:if>4"
                                       class="a4">${chargeMethod.key}</a>
                                </li>
                            </c:forEach>
                        </c:if>
                    </ul>
                </div>
            </div>
            <div class="shuju0">
                <div id="sortType">
                    <span <c:if test="${empty searchModel.sortType||searchModel.sortType == 0}">class="paixu paixu-active"</c:if>
                          <c:if test="${searchModel.sortType> 0}">class='paixu'</c:if>
                    ><a>默认排序</a></span>
                    <span ${searchModel.sortType == 1 ? 'class="paixu paixu-active"' : "class='paixu'"}><a>最新开放</a></span>
                    <span ${searchModel.sortType == 2 ? 'class="paixu paixu-active"' : "class='paixu'"}<a>访问数量</a></span>
                    <span ${searchModel.sortType == 3 ? 'class="paixu paixu-active"' : "class='paixu'"}><a>申请数量</a></span>
                    <span class="xiangshu">(共${apiCount}项)</span>
                </div>

                <div id="mainContent">
                    <c:if test="${lists.size()>0}">
                    <c:forEach items="${lists}" var="list">
                        <c:if test="${lists.indexOf(list) % 5 == 0}"><div class="shuju01"></c:if>
                        <div class="div1">
                            <div class="div_icon1" title="${list.resourceName}">
                                    <a alt="${list.resourceName}" href="<%=basePath%>/open/api/view.htm?id=${list.id}&settingId=${list.settingId}"><img src="${imageContextPath}${list.resourceImg}"></a>
                            </div>
                            <div class="h1" title="${list.resourceName}"><a alt="${list.resourceName}" class="qxbm" href="<%=basePath%>/open/api/view.htm?id=${list.id}&settingId=${list.settingId}">${list.resourceName}</a></div>

                            <div ${list.chargeMethod eq '免费'?'class="mianfei"':'class="shoufei"'}>${list.chargeMethod}</div>
                            <div class="api-foot1">
                                            <span class="liulan" title="浏览量:<c:if test="${empty list.viewTimes}">0</c:if><c:if test="${not empty list.viewTimes}">${list.viewTimes}</c:if>">
                                                <img src="<%=resourcePath%>/images/icon_chakan.png" class="liulan-icon">
                                                <c:if test="${empty list.viewTimes}">(0)</c:if>
                                                <c:if test="${not empty list.viewTimes}">(${list.viewTimes})</c:if>
                                            </span>
                                <span class="xiazai" title="下载量：0">
                                                <img src="<%=resourcePath%>/images/icon_xiazai.png" class="xiazai-icon">(0)
                                            </span>
                                <div class="line-w"></div>
                                <div class="line-h"></div>
                            </div>
                        </div>
                        <c:if test="${lists.indexOf(list) % 5 == 4}"></div></c:if>
                    </c:forEach>
                    <c:if test="${lists.size()%4!=0}">
                </div>
                </c:if>
                </c:if>
            </div>
            <jsp:include page="../common/pager.jsp">
                <jsp:param name="pageNo" value="${pager.pageNo}"/>
                <jsp:param name="pageSize" value="${pager.pageSize}"/>
                <jsp:param name="total" value="${pager.total}"/>
            </jsp:include>
            <input type="hidden" name="theme" id="theme" value="${searchModel.catelogThemeCode}">
            <input type="hidden" name="sector" id="sector" value="${searchModel.sectorCode}">
            <input type="hidden" name="chargeMethod" id="chargeMethod" value="${searchModel.chargeMethod}">
            <input type="hidden" name="apiServiceType" id="apiServiceType" value="${searchModel.apiServiceType}">
        </div>
    </div>

</div>

</div>
<jsp:include page="../common/body_footer.jsp"></jsp:include>
</body>
<script type="text/javascript">
    var str1 = "";
    var str2 = "";
    var str3 = "";
    var str4 = "";
    var str5 = "";
    function themeSearch(code) {
        if (code != null&& code != '' && code != undefined ) {
            str2 = "catelogThemeCode=" + code;
        }
        if ($("#sector").val() != null && $("#sector").val() != '' && $("#sector").val() != undefined) {
            str1 = "&sectorCode=" + $("#sector").val();
        }
        if ($("#chargeMethod").val() != null && $("#chargeMethod").val() != '' && $("#chargeMethod").val() != undefined) {
            str3 = "&chargeMethod=" + $("#chargeMethod").val();
        }
        if ($("#apiServiceType").val() != null && $("#apiServiceType").val() != '' && $("#apiServiceType").val() != undefined) {
            str5 = "&apiServiceType=" + $("#apiServiceType").val();
        }
        window.location.href = "<%=basePath%>/open/api/list.htm?" + str2 + str1+str3 + str5;
    }

    function sectorSearch(code) {
        if (code != null&& code != '' && code != undefined ) {
            str2 = "sectorCode=" + code;
        }
        if ($("#theme").val() != null && $("#theme").val() != '' && $("#theme").val() != undefined) {
            str1 = "&catelogThemeCode=" + $("#theme").val();
        }
        if ($("#chargeMethod").val() != null && $("#chargeMethod").val() != '' && $("#chargeMethod").val() != undefined) {
            str3 = "&chargeMethod=" + $("#chargeMethod").val();
        }
        if ($("#apiServiceType").val() != null && $("#apiServiceType").val() != '' && $("#apiServiceType").val() != undefined) {
            str5 = "&apiServiceType=" + $("#apiServiceType").val();
        }
        window.location.href = "<%=basePath%>/open/api/list.htm?" + str2 + str1 + str3 + str5;
    }

    function chargeMethodSearch(str) {
        if (str != null && str != '' && str != undefined) {
            str2 = "chargeMethod="+str ;
        }
        if ($("#theme").val() != null && $("#theme").val() != '' && $("#theme").val() != undefined) {
            str3 = "&catelogThemeCode=" + $("#theme").val();
        }
        if ($("#sector").val() != null && $("#sector").val() != '' && $("#sector").val() != undefined) {
            str1 = "&sectorCode=" + $("#sector").val();
        }
        if ($("#apiServiceType").val() != null && $("#apiServiceType").val() != '' && $("#apiServiceType").val() != undefined) {
            str5 = "&apiServiceType=" + $("#apiServiceType").val();
        }
        window.location.href = "<%=basePath%>/open/api/list.htm?" + str2 +str3+str1+str5;
    }

    function pageSearch(pageNo) {
        if (pageNo != null && pageNo != '' && pageNo != undefined) {
            str1 = "pageNo=" + pageNo;
        }
        if ($("#theme").val() != null && $("#theme").val() != '' && $("#theme").val() != undefined) {
            str2 = "&catelogThemeCode=" + $("#theme").val();
        }
        if ($("#sector").val() != null && $("#sector").val() != '' && $("#sector").val() != undefined) {
            str3 = "&sectorCode=" + $("#sector").val();
        }
        if ($("#apiServiceType").val() != null && $("#apiServiceType").val() != '' && $("#apiServiceType").val() != undefined) {
            str5 = "&apiServiceType=" + $("#apiServiceType").val();
        }
        if ($("#chargeMethod").val() != null && $("#chargeMethod").val() != '' && $("#chargeMethod").val() != undefined) {
            str4 = "&chargeMethod=" + $("#chargeMethod").val();
        }
        window.location.href = "<%=basePath%>/open/api/list.htm?" + str1 +str2 + str3 + str4+str5;
    }

    function apiServiceType(apiServiceType) {
        if (apiServiceType != null && apiServiceType != '' && apiServiceType != undefined) {
            str5 = "apiServiceType=" + apiServiceType;
        }
        if ($("#theme").val() != null && $("#theme").val() != '' && $("#theme").val() != undefined) {
            str2 = "&catelogThemeCode=" + $("#theme").val();
        }
        if ($("#sector").val() != null && $("#sector").val() != '' && $("#sector").val() != undefined) {
            str3 = "&sectorCode=" + $("#sector").val();
        }
        if ($("#chargeMethod").val() != null && $("#chargeMethod").val() != '' && $("#chargeMethod").val() != undefined) {
            str4 = "&chargeMethod=" + $("#chargeMethod").val();
        }
        window.location.href = "<%=basePath%>/open/api/list.htm?" + str5 +str2 + str3 + str4;
    }

    $("#pager a").not(".disabled").click(function () {
        var pageNo = $(this).attr("page");
        pageSearch(pageNo);
    });

    //排序
    $(function(){
        var spans = $('#sortType').children();
        console.info(spans);
        for(var i=0;i<spans.length;i++){
            (function(j){
                spans[j].onclick=function() {
                    window.location.href = "<%=basePath%>/open/api/list.htm?sortType="+j+"&catelogThemeCode=${searchModel.catelogThemeCode}"+
                        "&sectorCode=${searchModel.sectorCode}&chargeMethod=${searchModel.chargeMethod}";
                };
            })(i)
        }
    });

    function showThemeTag() {
        $("#themeItem").removeAttr("style");
        $("#themeDown").hide() ;
        $("#themeTop").show() ;
    }

    hiddenThemeTag() ;

    function hiddenThemeTag() {
        $("#themeItem").attr("style","height:60px");
        $("#themeDown").show() ;
        $("#themeTop").hide() ;
    }

    function showSectorShow() {
        $("#sectorItem").removeAttr("style");
        $("#sectorDown").hide() ;
        $("#sectorTop").show() ;
    }

    hiddenSectorHidden() ;

    function hiddenSectorHidden() {
        $("#sectorItem").attr("style","height:60px");
        $("#sectorDown").show() ;
        $("#sectorTop").hide() ;
    }

    // 根据选中项展开
    function expandCriteria(parentDiv, selectedValue, expandFunction){
        var selectedLi;
        $(parentDiv + " ul li a").each(function (index, element) {
            if (selectedValue && selectedValue != "" && $(element).attr("onclick").indexOf(selectedValue) > -1){
                selectedLi = $(element).parent();
            }
        });
        if (selectedLi && selectedLi.position().top > 0){
            expandFunction();
        }
    }

    $(function () {
        expandCriteria("#themeItem", "${searchModel.catelogThemeCode}", showThemeTag);
        expandCriteria("#sectorItem", "${searchModel.sectorCode}", showSectorShow);
    });
</script>
</html>
