<%@ page import="com.lightinit.hsdataportal.model.LoginUser" %>
<%@ 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="shiro" uri="http://shiro.apache.org/tags" %>
<%
    String basePath = request.getContextPath();
    String resourcePath = basePath + "/resource";
    LoginUser loginUser = (LoginUser) session.getAttribute(LoginUser.SESSION_KEY_LOGIN_USER);
%>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="../common/head.jsp"></jsp:include>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/resource/css/open/index.css">
    <link rel="stylesheet" href="<%=resourcePath%>/plugins/swiper/swiper-4.3.3.min.css">
    <style>
        .swiper-container {
            width: 100%;
            height: 100%;

        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>
<body>
<jsp:include page="../common/body_header1.jsp"></jsp:include>
<jsp:include page="../common/body_header_search.jsp"></jsp:include>
<div class="clearfix"></div>
<div id="caidan" class="caidan">
    <a id="tagApi" onclick="tagApi()" class="caidan-api">
        API
    </a>
    <a id="tagMic" onclick="tagMic()" class="caidan-weiyingyong">
        微应用
    </a>
    <jsp:include page="../common/body_header_menu.jsp"></jsp:include>
    <ul id="ulHomeApiCatalog" class="ul-1" style="display: none;">
        <c:if test="${tagsSearch.lists.size()>0}">
            <c:forEach items="${tagsSearch.lists}" var="tag" varStatus="status">
                <li class="tabList">
                    <img src="<%=resourcePath%>/images/icon_shenghuo.png" class="tabList-icon">
                    <span id="tabList_0" class="tabList1">${tag.mainTag}</span>
                </li>
            </c:forEach>
        </c:if>
        <li onclick="tagApiMore()" class="tabList">
            <img  src="<%=resourcePath%>/images/icon_gengduo.png" class="tabList-icon">
            <span class="tabList1">更多</span>
        </li>
    </ul>


    <ul id="ulHomeMicCatalog" class="ul-1" style="display: none;">
        <c:if test="${tagsMicSearch.lists.size()>0}">
            <c:forEach items="${tagsMicSearch.lists}" var="tag" varStatus="status">
                <li class="tabList">
                    <img src="<%=resourcePath%>/images/icon_shenghuo.png" class="tabList-icon">
                    <span class="tabList1">${tag.mainTag}</span>
                </li>
            </c:forEach>
        </c:if>
        <li onclick="tagMicMore()" class="tabList">
            <img src="<%=resourcePath%>/images/icon_gengduo.png" class="tabList-icon">
            <span class="tabList1">更多</span>
        </li>
    </ul>
</div>
<div id="layout" class="top-banner">


    <div class="lunbotu">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="lunbotu"
                         style=" background: url(<%=resourcePath%>/images/open/home/banner05.png) center no-repeat;"></div>
                </div>
                <div class="swiper-slide">
                    <div class="lunbotu"
                         style=" background: url(<%=resourcePath%>/images/open/home/banner02.png) center no-repeat;"></div>
                </div>
                <div class="swiper-slide">
                    <div class="lunbotu"
                         style=" background: url(<%=resourcePath%>/images/open/home/banner03.png) center no-repeat;"></div>
                </div>
                <div class="swiper-slide">
                    <div class="lunbotu"
                         style=" background: url(<%=resourcePath%>/images/open/home/banner01.png) center no-repeat;"></div>
                </div>
                <div class="swiper-slide">
                    <div class="lunbotu"
                         style=" background: url(<%=resourcePath%>/images/open/home/banner04.png) center no-repeat;"></div>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <%--<div class="swiper-button-next"></div>--%>
            <%--<div class="swiper-button-prev"></div>--%>
        </div>
    </div>


    <div class="layout">
        <c:if test="${tagsMicSearch.lists.size()>0}">
            <c:forEach items="${tagsMicSearch.lists}" var="tag" varStatus="status">
                <div hidden class="tanchucaidan tanchucaidan1">
                    <c:if test="${tag.minorList.size()>0}">
                        <c:forEach items="${tag.minorList}" var="minor">
                            <ul>
                                <li>
                                    <a href="<%=basePath%>/open/microapp/view.htm/${minor.settingId}">${minor.resourceName}</a>
                                </li>
                            </ul>
                        </c:forEach>
                    </c:if>
                </div>
            </c:forEach>
        </c:if>

        <c:if test="${tagsSearch.lists.size()>0}">
            <c:forEach items="${tagsSearch.lists}" var="tag" varStatus="status">
                <div hidden class="tanchucaidan tanchucaidan0">
                    <c:if test="${tag.minorList.size()>0}">
                        <c:forEach items="${tag.minorList}" var="minor">
                            <ul>
                                <li>
                                    <a href="<%=basePath%>/open/api/view.htm?id=${minor.id}&settingId=${minor.settingId}">${minor.resourceName}</a>
                                </li>
                            </ul>
                        </c:forEach>
                    </c:if>
                </div>
            </c:forEach>
        </c:if>


        <div class="huanying1">
            <div class="tu1">
                <div class="huangyingimg">
                    <img src="<%=resourcePath%>/images/touxiang1.png" class="touxiang1">
                </div>
                <shiro:guest>
                    <div class="huanyingfont ">
                        欢迎您来到衡水大数据
                    </div>
                </shiro:guest>
                <shiro:authenticated>
                    <div class="huanyingfont ">
                        Hi~<%=loginUser.getUsername()%> </br>欢迎您来到衡水大数据
                    </div>
                </shiro:authenticated>
            </div>
            <div class="tu2">

                <div class="luyanhd">
                    <a class="a2" href="##">路演活动</a>
                </div>
                <div class="luyanhd1">多领域的路演活动</div>
                <div class=" luyanicon">
                    <img src="<%=resourcePath%>/images/icon_luyan.png">
                </div>
                <div class="but">
                    发布路演
                </div>
                <img src="<%=resourcePath%>/images/youxuan.png" class="youxuan1">
            </div>
            <div class="tu2">
                <div class="luyanhd">
                    <a class="a2" href="##">API开发</a>
                </div>
                <div class="luyanhd1">方便快捷的开发流程</div>
                <div class=" luyanicon">
                    <img src="<%=resourcePath%>/images/icon_api.png">
                </div>
                <div onclick="apiOpenUp()" class="but1">
                    立即开发
                </div>
                <img src="<%=resourcePath%>/images/youxuan.png" class="youxuan1">
            </div>
        </div>
    </div>


</div>
<div id="layout1" class="img0">
    <div>
        <div class="img00">
            <img src="<%=resourcePath%>/images/img_7.png" class="img1">
            <img src="<%=resourcePath%>/images/img_6.png" class="img1">
            <img src="<%=resourcePath%>/images/img_5.png" class="img2">
            <img src="<%=resourcePath%>/images/img_4.png" class="img3">
        </div>
    </div>
</div>

</div>
</div>
    <div class="jingxuantuijian">
        <div class="jingxuantuijian0">
            <div class="jingxuantuijian-top">
                <div class="jingxuan">
                    精选推荐
                </div>
                <div class="jingxuan1">
                    为你推荐最热门的数据资源
                </div>
                <div class="api">
                    API
                </div>
                <a class="gengduo" href="<%=basePath%>/open/api/list.htm">
                    更多
                </a>
            </div>
            <div class="clearfix"></div>
            <div class="api-main"><!-----api---->
                <div class="api-left">
                   <img src="<%=resourcePath%>/images/img_8.png" class="apiimg">
                </div>
                <div class="api-right ">
                    <c:if test="${apiList.size()>0}">
                    <c:forEach items="${apiList}" var="api">
                        <c:if test="${apiList.indexOf(api)  == 0}"> <div class="api-right1"></c:if>
                        <c:if test="${apiList.indexOf(api)  == 4}"> <div class="api-right2"></c:if>
                        <div class="div">
                            <div class="h" title="${api.resourceName}"><a class="qxbm" alt="${api.resourceName}"
                                              href="<%=basePath%>/open/api/view.htm?id=${api.id}&settingId=${api.settingId}">${api.resourceName}</a>
                            </div>
                            <div class="div_icon" title="${api.resourceName}">
                                <a alt="${api.resourceName}" href="<%=basePath%>/open/api/view.htm?id=${api.id}&settingId=${api.settingId}"><img src="${imageContextPath}${api.resourceImg}"></a>
                            </div>
                            <p>${api.openType}</p>
                            <div class="api-foot">
							<span class="liulan" title="浏览量： <c:if test="${empty api.viewTimes}">0</c:if><c:if test="${not empty api.viewTimes}">${api.viewTimes}</c:if>">
								<img src="<%=resourcePath%>/images/icon_chakan.png"
                                     class="liulan-icon">
                                <c:if test="${empty api.viewTimes}">(0)</c:if>
                                 <c:if test="${not empty api.viewTimes}">(${api.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>
                                <c:if test="${api.chargeMethod eq free}">
                                    <img src="<%=resourcePath%>/images/img_mianfei.png" class="icon">
                                </c:if>
                            </div>
                        </div>
                        <c:if test="${apiList.indexOf(api)  == 3}"> </div></c:if>
                        <c:if test="${apiList.indexOf(api)  == 7}"> </div></c:if>
                    </c:forEach>
                    <c:if test="${apiList.size()<4}"></div>
                </c:if>
                <c:if test="${apiList.size()<8&&apiList.size()>4}"></div>
            </c:if>
            </c:if>
        </div>
    </div>
    <p style="font-size: 20px; color: #222222;float: left; margin-top: 20px;">
        微应用
    </p>
    <a href="<%=basePath%>/open/microapp/openList.action"
       style="font-size: 20px;color: #666666; float: right;margin-top: 20px; padding-left: 0px;margin-right: 20px;">
        更多
    </a>
    <div class="weiyingyong-main"><!--微应用-->
        <c:if test="${microappList.size()>0}">
        <c:forEach items="${microappList}" var="microapp">
        <c:if test="${microappList.indexOf(microapp)  == 0}">
        <div class="weiyingyong-main0">
            <div class="weiyingyong-main0">
                <div class="div">
                    <div>
                        <img src="<%=resourcePath%>/images/img_10.png" class="weiyingyongimg1">
                    </div>
                </div>
                </c:if>
                <c:if test="${microappList.indexOf(microapp)  == 4}">
                <div class="weiyingyong-main2">
                    <div class="div">
                        <div>
                            <img src="<%=resourcePath%>/images/img_9.png" class="weiyingyongimg1">
                        </div>
                    </div>
                </c:if>

                    <div class="div">

                        <div class="h" title="${microapp.resourceName}" ><a class="qxbm"  alt = "${microapp.resourceName}"
                                          href="<%=basePath%>/open/microapp/view.htm/${microapp.settingId}">${microapp.resourceName}</a>
                        </div>
                        <div class="div_icon" title="${microapp.resourceName}">
                            <a alt="${microapp.resourceName}"  href="<%=basePath%>/open/microapp/view.htm/${microapp.settingId}"><img src="${imageContextPath}${microapp.resourceImg}"></a>
                        </div>
                        <p>${microapp.openType}</p>
                        <div class="api-foot">
						<span class="liulan" title="浏览量： <c:if test="${empty microapp.viewTimes}">0</c:if><c:if test="${not empty microapp.viewTimes}">${microapp.viewTimes}</c:if>">
							<img src="<%=resourcePath%>/images/icon_chakan.png"
                                 class="liulan-icon">
                                <c:if test="${empty microapp.viewTimes}">(0)</c:if>
                                <c:if test="${not empty microapp.viewTimes}"> (${microapp.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>
                        <c:if test="${microapp.chargeMethod eq free}">
                            <img src="<%=resourcePath%>/images/img_mianfei.png" class="icon">
                        </c:if>
                    </div>

                    <c:if test="${microappList.indexOf(microapp)  == 3}"> </div>
                </c:if>
                <c:if test="${microappList.indexOf(microapp)  == 7}"> </div>
            </c:if>
            </c:forEach>
            <c:if test="${microappList.size()<4}"></div>
        </c:if>
        <c:if test="${microappList.size()<8&&microappList.size()>4}"></div>
    </c:if>
    </c:if>
</div>
<div class="clearfix"></div>
<p style="font-size: 20px; color: #222222;float: left; margin-top: 20px;margin-left: 2px;">
    数据
</p>
<a href="<%=basePath%>/open/data/index.htm"
   style="font-size: 20px;color: #666666; float: right;margin-top: 20px; padding-left: 0px;margin-right: 20px;">
    更多
</a>
<div class="shuju07"><!---数据-->

    <c:if test="${dataList.size()>0}">
    <c:forEach items="${dataList}" var="data">
        <c:if test="${dataList.indexOf(data)  == 0}">
            <div class="shuju1"><!---数据1-->
        </c:if>
        <c:if test="${dataList.indexOf(data)  == 4}">
            <div class="shuju-foot"><!---数据2-->
        </c:if>


        <div class="shuju7">
            <div>
                <div class="shuju7-img" title="${data.resourceName}">
                    <a alt="${data.resourceName}"  href="<%=basePath%>/open/data/detail.htm/${data.publishSettingId}"><img  src="${imageContextPath}${data.resourceImg}" class="shuju-icon"></a>
                </div>
                <div class="shuju70">
                    <div href="<%=basePath%>/open/data/detail.htm/${data.publishSettingId}" title="${data.resourceName}"><a class="h7"
                       alt="${data.resourceName}"    href="<%=basePath%>/open/data/detail.htm/${data.publishSettingId}">${data.resourceName}</a>
                    </div>
                    <div class="clearfix"></div>
                    <div class="biaoqian0">
                        <span class="biaoqian1">${data.dataTag}</span>
                    </div>
                    <div class="clearfix"></div>
                    <div class="gongxiang">${data.openType}</div>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="dibu1">
									<span class="dibu_mas3-1" title="浏览量：<c:if test="${empty data.viewTimes}">0</c:if><c:if test="${not empty data.viewTimes}">${data.viewTimes}</c:if>">
										<img  src="<%=resourcePath%>/images/icon_chakan.png"
                                             class="liulan2"><c:if test="${empty data.viewTimes}">(0)</c:if>
                                          <c:if test="${not empty data.viewTimes}">(${data.viewTimes})</c:if>
									</span>
                <span class="dibu_mas3-2" title="下载量：0">
										<img src="<%=resourcePath%>/images/icon_xiazai.png" class="liulan2">(0)
									</span>
                <span class="dibu_mas3-3">
										<img src="<%=resourcePath%>/images/icon_wenben.png" class="liulan2">
                                            <c:if test="${empty data.resourceFollowCount}">(0)</c:if>
                                                    <c:if test="${not empty data.resourceFollowCount}">(${data.resourceFollowCount})</c:if>
									</span>
                <div class="line-d1"></div>
                <div class="line-d2"></div>
            </div>
        </div>

        <c:if test="${dataList.indexOf(data)  == 3}"> </div></c:if>
        <c:if test="${dataList.indexOf(data)  == 7}"> </div></c:if>
    </c:forEach>
    <c:if test="${dataList.size()<4}"></div>
</c:if>
<c:if test="${dataList.size()<8&&dataList.size()>4}"></div></c:if>
</c:if>
</div>
</div>
</div>
</div>
<%--<div class="clearfix"></div>--%>
<div class="fuwu">
    <div class="fuwu-main">
        <div class="fuwu0">
            <div class="jingxuan">
                创客工场
            </div>
            <div class="jingxuan1">
                为开发者提供工具快速发布应用
            </div>
        </div>

        <div class="fuwu1">

            <div class="kaifazhe" onclick="skip('1')" >
                <div class="kaifazhe1">
                   <div class="kaifazhe2">服务开发环境</div>
                    <div class="kaifazhe3">
                        为开发者提供丰富的开发资源及模板
                        <br/>
                        包括环境配置、状态监控、代码托管和持续集成
                    </div>
                </div>
            </div>

            <%--<a href="https://echarts.baidu.com/theme-builder/" target="_blank">--%>
                <div class="kaifazhe" style="background:url(<%=resourcePath%>/images/img_12.png);margin-left: 15px;" onclick="skip('2')">
                    <div class="kaifazhe1">
                        <div class="kaifazhe2">数据可视化开发</div>
                        <div class="kaifazhe3">
                            利用数据仓库、数据挖掘技术进行数据管理
                            <br/>
                            通过数据分析工具进行数据可视化开发
                        </div>
                    </div>
                </div>
           <%-- </a>--%>

           <%-- <a  href="http://121.17.30.198:8097/" target="_blank">--%>
                <div class="kaifazhe" style="background:url(<%=resourcePath%>/images/img_13.png);margin-left: 15px;" onclick="skip('3')">
                    <div class="kaifazhe1">
                        <div class="kaifazhe2">大数据分析建模</div>
                        <div class="kaifazhe3">
                            平台提供丰富的建模方式以及灵活的操作方法。
                        </div>
                    </div>
                </div>
            <%--</a>--%>
        </div>
    </div>
</div>
<jsp:include page="../common/body_footer.jsp"></jsp:include>
<script src="<%=resourcePath%>/plugins/swiper/swiper-4.3.3.min.js"></script>
<script type="text/javascript">
    var swiper = new Swiper('.swiper-container', {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

    $(document).ready(function () {
        $("#ulHomeApiCatalog li").hover(function () {
            var popDivs = $(".layout .tanchucaidan0");
            popDivs.hide();
            var index = $(this).parent().children().index($(this));
            popDivs.eq(index).show();
        }, function () {
            var popDivs = $(".layout .tanchucaidan0");
            var li = this;
            var index = $(li).parent().children().index($(this));
            var popDiv = popDivs.eq(index);
            popDiv.hover(function () {
                $(this).show();
                $("#ulHomeApiCatalog li").eq(index).addClass("tabList-active");
            }, function () {
                $(this).hide();
                $("#ulHomeApiCatalog li").eq(index).removeClass("tabList-active");
            })
            var popDivs = $(".layout .tanchucaidan0");
            popDivs.hide();
        });
    });

    $(document).ready(function () {
        $("#ulHomeMicCatalog li").hover(function () {
            var popDivs = $(".layout .tanchucaidan1");
            popDivs.hide();
            var index = $(this).parent().children().index($(this));
            popDivs.eq(index).show();
        }, function () {
            var popDivs = $(".layout .tanchucaidan1");
            var li = this;
            var index = $(li).parent().children().index($(this));
            var popDiv = popDivs.eq(index);
            popDiv.hover(function () {
                $(this).show();
                $("#ulHomeMicCatalog li").eq(index).addClass("tabList-active");
            }, function () {
                $(this).hide();
                $("#ulHomeMicCatalog li").eq(index).removeClass("tabList-active");
            })
            var popDivs = $(".layout .tanchucaidan1");
            popDivs.hide();
        });
    });
    tagApi();

    function tagApi() {
        $("#tagApi").addClass("caidan-active");
        $("#tagMic").removeClass("caidan-active");
        $("#ulHomeApiCatalog").show();
        $("#ulHomeMicCatalog").hide();
    }

    function tagMic() {
        $("#tagApi").removeClass("caidan-active");
        $("#tagMic").addClass("caidan-active");
        $("#ulHomeMicCatalog").show();
        $("#ulHomeApiCatalog").hide();
    }

    function tagApiMore() {
        window.location.href = "<%=basePath%>/open/api/list.htm";
    }

    function tagMicMore() {
        window.location.href = "<%=basePath%>/open/data/index.htm";
    }

    function apiOpenUp() {
        window.location.href = "<%=basePath%>/open/apiDemand/list.htm"
    }

    function skip(id) {
        window.location.href = "<%=basePath%>/open/makerspace/index.htm?id="+id
        //window.open("http://39.105.210.5:5151/devops-web/")
    }
</script>
</body>
</html>
