<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>领淘报价网</title>
    <link href="${pageContext.request.contextPath}/static/layui/css/layui.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/jquery-ui.min.css" rel="stylesheet"/>
    <link href="${pageContext.request.contextPath}/static/css/swiper-bundle.min.css" rel="stylesheet"/>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/jquery-ui.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/swiper-bundle.min.js"></script>
    <style>
        /* 搜索框位置 */
        .search {
            position: absolute;
            right: 205px;
            top: -45px;
        }

        .layui-input-block {
            min-height: 0px;
        }

        .ui-menu {
            z-index: 999;
        }

        .layui-tab-card > .layui-tab-title {
            background-color: #009688;
        }

        .layui-tab-content {
            padding: 0px;
        }

        .layui-show {
            height: 100%;
        }

        .layui-tab-title li .layui-tab-close {
            margin-left: 30px;
        }

        a.site-demo-active {
            cursor: pointer;
        }

        p {
            font-size: 16px;
            line-height: 30px;
        }

        .middle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            user-select: none;
        }

        .label {
            font-size: 2.2rem;
        }

        .time {
            color: #d99c3b;
            text-transform: uppercase;
            display: flex;
            justify-content: center;
        }

        .happiness {
            font-family: 'fangsong';
        }

        .happiness img {
            height: 30px;
        }

        .happiness > p {
            color: black;
            font-weight: both;
            font-size: 28px;
            background-image: -webkit-linear-gradient(left, red, yellow, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            -webkit-background-size: 200% 100%;
            /* -webkit-animation:  maskedAnimation 4s infinite linear; */
            animation: san 3s linear, happiness2 3s linear, maskedAnimation 4s infinite linear;
            /* animation-iteration-count:1 */
        }

        .happiness > p:nth-child(1) {
            /* background: rgba(222,20,58,0.7);
            box-shadow: inset 10px 10px 10px rgba(222,20,58,0.7); */
            animation-delay: 1s;
        }

        .happiness > p:nth-child(2) {
            /* background: rgba(242,112,45,0.7);
            box-shadow: inset 10px 10px 10px rgba(222,85,14,0.7); */
            animation-delay: 1.2s;
        }

        .happiness > p:nth-child(3) {
            /* background: rgba(242,194,58,0.7);
            box-shadow: inset 10px 10px 10px rgba(234,177,15,0.7); */
            animation-delay: 1.4s;
        }

        .happiness > p:nth-child(4) {
            /* background: rgba(102,252,85,0.7);
            box-shadow: inset 10px 10px 10px rgba(102,252,85,0.7); */
            animation-delay: 1.6s;
        }

        .happiness > p:nth-child(5) {
            /* background: rgba(0,255,255,0.7);
            box-shadow: inset 10px 10px 10px rgba(0,255,255,0.7); */
            animation-delay: 1.8s;
        }

        .happiness > p:nth-child(6) {
            /* background: rgba(30,144,255,0.7);
            box-shadow: inset 10px 10px 10px rgba(30,144,255,0.7); */
            animation-delay: 2s;
        }

        .happiness > p:nth-child(7) {
            /* background: rgba(148,0,211,0.7);
            box-shadow: inset 10px 10px 10px rgba(148,0,211,0.7); */
            animation-delay: 2.2s;
        }

        .happiness > p:nth-child(8) {
            /* background: rgba(255, 130, 171,0.7);
            box-shadow: inset 10px 10px 10px rgba(255, 130, 171,0.7); */
            animation-delay: 2.4s;
        }

        .happiness > p:nth-child(9) {
            /* background: rgba(144, 238, 144,0.7);
            box-shadow: inset 10px 10px 10px rgba(144, 238, 144,0.7); */
            animation-delay: 2.6s;
        }

        .happiness > p:nth-child(10) {
            /* background: rgba(255, 246, 143,0.7);
            box-shadow: inset 10px 10px 10px rgba(255, 246, 143,0.7); */
            animation-delay: 2.8s;
        }

        @keyframes san {
            0%, 100% {
                color: rgb(1, 231, 247);
                text-shadow: 0 0 500px rgb(1, 231, 247);
            }
            20%, 80% {
                background: transparent;
                color: transparent;
                box-shadow: none;
                text-shadow: none;
            }
        }

        @keyframes happiness2 {
            100% {
                transform: rotate(360deg) translate(0, 0);
            }
        }

        /* 气球样式 */
        :root {
            --w: 140px;
            --half: calc(var(--w) / 2);
        }

        #wrap {
            height: 100vh;
            display: flex;
            justify-content: center;
            padding-top: 20px;
            box-sizing: border-box;
            overflow: hidden;
        }

        .balloon {
            width: var(--w);
            height: var(--w);
            background: green;
            border-radius: var(--half) var(--half) 0 var(--half);
            /* transform是从后往前执行 */
            transform: rotate(45deg) translate(100vh, 100vh);
            /* transform: translate(10vh,10vh) rotate(45deg); */
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .balloon h2 {
            color: #fff;
            font-size: 50px;
            transform: rotate(-45deg);
        }

        .balloon:before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            bottom: -10px;
            right: -10px;
            transform: rotate(45deg);

            border: 20px solid;
            border-color: transparent #000 transparent transparent;
        }

        .balloon:nth-child(1) {
            background: rgba(182, 15, 97, 0.5);
            box-shadow: inset 10px 10px 10px rgba(135, 11, 72, 0.5);

            /* animation-fill-mode: forwards; */
            animation: rise 2s forwards, fly1 6s 4s ease-in-out infinite;
        }

        .balloon:nth-child(1):before {
            border-color: transparent rgba(182, 15, 97, 0.7) transparent transparent;
        }

        .balloon:nth-child(2) {
            background: rgba(45, 181, 167, 0.7);
            box-shadow: inset 10px 10px 10px rgba(35, 140, 129, 0.7);

            animation: rise 3s forwards, fly4 6s 3s ease-in-out infinite;
        }

        .balloon:nth-child(2):before {
            border-color: transparent rgba(45, 181, 167, 0.7) transparent transparent;
        }

        .balloon:nth-child(3) {
            background: rgba(190, 61, 244, 0.7);
            box-shadow: inset 10px 10px 10px rgba(173, 14, 240, 0.7);

            animation: rise 3.5s forwards, fly1 3s 3s ease-in-out infinite;
        }

        .balloon:nth-child(3):before {
            border-color: transparent rgba(190, 61, 244, 0.7) transparent transparent;
        }

        .balloon:nth-child(4) {
            background: rgba(180, 224, 67, 0.7);
            box-shadow: inset 10px 10px 10px rgba(158, 206, 34, 0.7);

            animation: rise 5s forwards, fly3 5s 5s ease-in-out infinite;
        }

        .balloon:nth-child(4):before {
            border-color: transparent rgba(180, 224, 67, 0.7) transparent transparent;
        }

        .balloon:nth-child(5) {
            background: rgba(242, 194, 58, 0.7);
            box-shadow: inset 10px 10px 10px rgba(234, 177, 15, 0.7);

            animation: rise 4s forwards, fly2 4s 4s ease-in-out infinite;
        }

        .balloon:nth-child(5):before {
            border-color: transparent rgba(242, 194, 58, 0.7) transparent transparent;
        }

        .balloon:nth-child(6) {
            background: rgba(242, 112, 45, 0.7);
            box-shadow: inset 10px 10px 10px rgba(222, 85, 14, 0.7);

            animation: rise 3s forwards, fly2 6s 5s ease-in-out infinite;
        }

        .balloon:nth-child(6):before {
            border-color: transparent rgba(242, 112, 45, 0.7) transparent transparent;
        }

        /* 气球上升 */
        @keyframes rise {
            100% {
                transform: rotate(45deg) translate(0, 0);
            }
        }

        /* 气球运动轨迹，4种 */
        @keyframes fly1 {
            0%, 100% {
                transform: rotate(45deg) translateY(0);
            }
            50% {
                transform: rotate(53deg) translateY(-20px);
            }
        }

        @keyframes fly2 {
            0%, 100% {
                transform: rotate(45deg) translateY(0);
            }
            50% {
                transform: rotate(37deg) translateY(-30px);
            }
        }

        @keyframes fly3 {
            0%, 100% {
                transform: rotate(45deg) translateY(0);
            }
            50% {
                transform: rotate(37deg) translate(-20px, -30px);
            }
        }

        @keyframes fly4 {
            0%, 100% {
                transform: rotate(45deg) translateY(0);
            }
            50% {
                transform: rotate(55deg) translate(-15px, -10px);
            }
        }

        @keyframes maskedAnimation {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -100% 0;
            }
        }

        #tong {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url("../images/birthDay.png");
        }

        #view {
            position: absolute;
            left: 650px;
            top: 250px;
        }

        .swiper-slide {
            text-align: center;
        }
    </style>
</head>
<script id="happinessiInfo" type="text/html">
    <div style="display:inline-block;" class="layui-anim layui-anim-up layui-anim-rotate happiness">
        <p>{{d.data.userInfo.realname}}，今天是你加入领淘大家庭的第{{d.data.userInfo.entryDay}}天，</p>
        <p>同时，也是你的生日，<img src="../images/emoji/weibo/taikaixin.png"></p>
        <p>因为你的诞生，<img src="../images/emoji/tieba/太开心.png"></p>
        <p>使这一天别具意义，<img src="../images/emoji/newtieba/你懂的.png"></p>
        <p>因为你的加入，<img src="../images/emoji/newtieba/花心.png"></p>
        <p>使领淘别具意义。<img src="../images/emoji/newtieba/太阳.png"></p>
        <p>让我们点燃生日的烛光，点燃幸福的希望；</p>
        <p>品尝生日的蛋糕，品尝快乐的味道；</p>
        <p>接受生日的祝福，接受祝愿的美好；</p>
        <p><img src="../images/emoji/newtieba/蛋糕.png">祝 生日快乐， 幸福围绕！<img src="../images/emoji/tieba/彩虹.png"></p>
    </div>

    <audio loop id="vd">
        <source src="http://47.114.150.226:80/erp/abc/birthDay//20210706//生日快乐歌.mp3" type="audio/mp3"/>
    </audio>
</script>
<!-- 
	<video width="520" height="440" controls>
  		<source src="http://47.114.150.226:8080/erp/abc/birthDay//20210706//生日快乐.mkv" type="video/ogg">
	</video>-->
<body class="layui-layout-body">
<div id="tong" style="display:none">
    <div id="wrap" style="">
        <div class="balloon">
            <h2>！</h2>
        </div>
        <div class="balloon">
            <h2 style="color: #ADD8E6">生</h2>
        </div>
        <div class="balloon">
            <h2 style="color: #00BFFF">日</h2>
        </div>
        <div class="balloon">
            <h2 style="color: #FFE7BA">快</h2>
        </div>
        <div class="balloon">
            <h2 style="color: #EEAD0E">乐</h2>
        </div>
        <div class="balloon">
            <h2>！</h2>
        </div>
    </div>
    <div id="view" style="display:inline-block;"></div>
</div>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header" id="flake" style="background-color: #780f0f">
        <div class="layui-logo" style="font-weight: bolder;color: orange;font-family: STXingkai;z-index: 10"><span
                style="font-size: 25px;"><i>lingtao·领淘</i></span></div>
        <%-- <c:if test ="${ !sessionScope.USER_SESSION.role.contains('999')}"> --%>
        <!-- 雪花背景 -->
        <canvas id="canvas"></canvas>
        <!--<div class="middle">
            <h1 class="label">春节倒计时</h1>
            <div class="time">
                <span>
                    <span id="d">49</span>天&nbsp;
                </span> <span>
                    <span id="h">13</span>时&nbsp;
                </span> <span>
                    <span id="m">03</span>分&nbsp;
                </span> <span>
                    <span id="s">53</span>秒
                </span>
            </div>
        </div>-->
        <div style="width: 100%;height: 100%;display: flex;justify-content: center;position: absolute;left: 0;top: 0;">
            <!--向上轮播-->
            <div class="swiper" style="height: 100%;width: 800px;">
                <div class="swiper-wrapper">
                    <%--                    <div class="swiper-slide" data-swiper-autoplay="5000">【修改】即日起  uv烫镭射银/镭射金2点之前的订单当天出货 广州发货</div>--%>
                    <div class="swiper-slide" data-swiper-autoplay="5000"></div>
                </div>
            </div>
        </div>
        <style>
            .swiper-slide {
                color: orange;
                display: flex;
                font-weight: bold;
                font-size: 20px;
                align-items: center;
                justify-content: center;
            }
        </style>
        <%-- </c:if> --%>
        <div class="layui-input-block" style="z-index: 10">
            <input type="hidden" value="${sessionScope.USER_SESSION.readLogStatus}" id="readLogStatus">
            <input type="hidden" id="search-url">
            <!-- 答题通过显示 -->
            <c:if test="${sessionScope.USER_SESSION.sysStatus == 2}">
                <input type="text" name="proTypeLabel" id="proTypeLabel" style="width:350px;"
                       autocomplete="on" placeholder="搜索产品名称" class="layui-input search">
                <button type="button" onclick="searching()" class="layui-btn layui-btn-normal search">搜索</button>
            </c:if>
        </div>
        <ul class="layui-nav layui-layout-right" style="z-index: 10">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img"/>
                    <span>欢迎您 ！${sessionScope.USER_SESSION.realname}</span>
                    <input type="hidden" id="session" value="${sessionScope.USER_SESSION.realname}">
                </a>
                <dl class="layui-nav-child">
                    <dd>
                        <a data-url="system/bug/addBug.jsp" data-id="问题反馈" data-title="问题反馈" class="site-demo-active">问题反馈</a>
                    </dd>
                    <dd>
                        <a data-url="system/user/updatePassword.jsp" data-id="修改密码" data-title="修改密码"
                           class="site-demo-active">修改密码</a>
                    </dd>
                    <dd>
                        <a class="site-demo-active" href="${pageContext.request.contextPath}/SysUser/logout">退出</a>
                    </dd>
                </dl>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item">
                    <a data-url="readme.jsp" data-id="首页" data-title="首页" class="site-demo-active">使用前必读</a>
                    <!-- <a href="product/diploma.jsp" target="rightFrame">毕业证书</a> -->
                </li>
                <c:forEach items="${sessionScope.USERPERS_SESSION}" var="parent">
                    <!-- 答题通过显示 -->
                    <c:if test="${sessionScope.USER_SESSION.sysStatus == 2}">
                        <c:if test="${ parent.parentId == null}">
                            <li class="layui-nav-item layui-nav-itemed">
                                <a class="" href="javascript:;">${parent.perName}</a>
                                <dl class="layui-nav-child">
                                    <c:forEach items="${sessionScope.USERPERS_SESSION}" var="Schild">
                                        <c:if test="${Schild.parentId != null && Schild.parentId == parent.perId}">
                                            <c:if test="${Schild.parentId == 1}">
                                                <c:if test="${Schild.thirdOrderName != null}">
                                                    <dd>
                                                        <a href="javascript:;">${Schild.thirdOrderName}<span
                                                                class="layui-nav-more"></span></a>
                                                        <dl class="layui-nav-child">
                                                            <c:forEach items="${sessionScope.USERPERS_SESSION}"
                                                                       var="Tchild">
                                                                <c:if test="${Tchild.thirdParentId != null && Tchild.thirdParentId == Schild.perId}">
                                                                    <dd>
                                                                        <a data-url="${pageContext.request.contextPath}/${Tchild.url}"
                                                                           data-id="${Tchild.perName}"
                                                                           data-title="${Tchild.perName}"
                                                                           class="site-demo-active">${Tchild.perName}</a>
                                                                    </dd>
                                                                </c:if>
                                                            </c:forEach>
                                                        </dl>
                                                    </dd>
                                                </c:if>
                                                <c:if test="${Schild.thirdParentId == null}">
                                                    <dd><a data-url="${pageContext.request.contextPath}/${Schild.url}"
                                                           data-id="${Schild.perName}" data-title="${Schild.perName}"
                                                           class="site-demo-active">${Schild.perName}</a></dd>
                                                </c:if>
                                            </c:if>
                                            <c:if test="${Schild.parentId != 1}">
                                                <dd><a data-url="${pageContext.request.contextPath}/${Schild.url}"
                                                       data-id="${Schild.perName}" data-title="${Schild.perName}"
                                                       class="site-demo-active">${Schild.perName}</a></dd>
                                            </c:if>
                                        </c:if>
                                    </c:forEach>
                                </dl>
                            </li>
                        </c:if>
                    </c:if>
                </c:forEach>
            </ul>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true" style="height:100%">
                <ul class="layui-tab-title">
                    <li class="layui-this" id="fatherDiv" lay-id="test" style="display: none;"></li>
                </ul>
                <ul class="rightmenu layui-nav-item" style="display: none;position: absolute;color:red">
                    <li data-type="closeOthers">关闭其他</li>
                    <li data-type="closeRight">关闭右侧所有</li>
                    <li data-type="closeAll">关闭所有</li>
                </ul>
                <div class="layui-tab-content" style="height:95%">
                    <div class="layui-tab-item layui-show">
                        <iframe src="readme.jsp" width="100%" height="100%"></iframe>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            <div class="box">
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    window.onload = function () {
        setInterval("toggleSound()", 100);
    }

    function toggleSound() {
        var music = document.getElementById("vd");//获取ID
        if (music) {
            if (music.paused) { //判读是否播放
                music.paused = false;
                music.play(); //没有就播放
            }
        }
    }
</script>
<script>
    var mySwiper = new Swiper('.swiper', {
        direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: {
            delay: 5000,
        }
    })
</script>
<script>
    let shop_list = [1045, 1054, 1029];
    let shop_list_gai = [1045, 1061, 1029, 1054, 1053, 1055];
    let role_list = [${sessionScope.USER_SESSION.role}];
    var system_isPdd = false;
    var system_isGai = false;
    var system_isPddPrice = false;
    shop_list.forEach(shop_id => {
        if (role_list.includes(shop_id)) {
            system_isPdd = true;
        }
    })
    if (role_list.includes(1045)) {
        system_isPddPrice = true;
    }
    // shop_list_gai.forEach(shop_id => {
    //     if (role_list.includes(shop_id)) {
    //         system_isGai = false;
    //     }
    // })
    // 不给客服看
    /* if(${ !sessionScope.USER_SESSION.role.contains('999') }){ */
    // 春节倒计时
    // 2022年春节时间
    /* const comingdate = new Date("Feb 1, 2022 00:00:00");

    const d = document.getElementById("d");
    const h = document.getElementById("h");
    const m = document.getElementById("m");
    const s = document.getElementById("s");

    const countdown = setInterval(() => {
      const now   = new Date();
      const des   = comingdate.getTime() - now.getTime();
      const days  = Math.floor(des / (1000 * 60 * 60 * 24));
      const hours = Math.floor((des % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const mins  = Math.floor((des % (1000 * 60 * 60)) / (1000 * 60));
      const secs  = Math.floor((des % (1000 * 60)) / 1000);
      d.innerHTML = getTrueNumber(days);
      h.innerHTML = getTrueNumber(hours);
      m.innerHTML = getTrueNumber(mins);
      s.innerHTML = getTrueNumber(secs);
      var x;
      if (x <= 0) clearInterval(x);
    }, 1000);
    const getTrueNumber = x => (x < 10 ? "0" + x : x); */



    //	var width=window.innerWidth;//获取系统显示宽度;
    //	var height=window.innerHeight;//获取系统显示高度;
    var width = 1920;
    var height = 60;
    var canvas = document.querySelector("#canvas");
    var context = canvas.getContext("2d");
    var snowArray = [];		//声明一个数组，用于存放创建出来的雪花对象；

    canvas.width = width;		//设置画布的宽度为系统显示宽度;
    canvas.height = height;	//设置画布的高度为系统显示高度;

    cartoon();         	 	//调用动画;

    // 定义雪花类;
    class Snowflake {
        constructor() {
            this.init();					//构造函数，调用定义好的init()方法;
        }

        init() {
            this.position = {   				//雪花对象的位置;
                x: Math.random() * width,	//x坐标随机;
                y: Math.random() * height,	//y坐标随机;
            }
            this.speed = Math.random() * 10;	//雪花下落速度为0-10以内的随机数;
            this.r = Math.random() * 4;		//雪花的半径为0-6以内的随机数;
            this.transparency = Math.random();//设置雪花的透明度为随机;
            this.color = {
                r1: Math.random() * 255,		//雪花颜色随机;
                g: Math.random() * 255,
                b: Math.random() * 255,
            }
        }

        draw() {//雪花绘制方法;
            this.position.y++;			//y坐标每次递增1像素;
            this.position.x--;
            this.transparency -= 0.01;	//透明度每次递减0.01;
            if (this.transparency <= 0) {	//透明度小于0，即雪花消失，重新绘制雪花;
                this.init();
            }
            context.beginPath();		//开始一个新的图形绘制;
            //context.fillStyle="rgba("+this.color.r1+","+this.color.g+","+this.color.b+","+this.transparency+")";//根据类模型绘制圆形雪花;
            context.fillStyle = "#FFF";
            context.arc(this.position.x, this.position.y, this.r, 0, Math.PI * 2);//填充雪花的颜色;
            context.fill();
        }
    }

    for (var i = 0; i < 100; i++) {
        var snow = new Snowflake();	//实例化1000个雪花对象;
        snowArray.push(snow);	//将雪花对象添加到数组中;
    }
    // var length=snowArray.length;

    // 定义动画效果;
    function cartoon() {
        context.clearRect(0, 0, width, height);//动画完成一次进行清屏操作;
        for (var j = 0; j < snowArray.length; j++) {
            snowArray[j].draw();//将实例化好的每个雪花对象在画布上画出来;
        }
        requestAnimationFrame(cartoon);//递归调用动画效果;
    }

    /* } */


    // 搜索菜单
    $("#proTypeLabel").autocomplete({
        // 通过函数自定义处理数据源
        source: function (request, response) {
            // request对象只有一个term属性，对应用户输入的文本
            // response是一个函数，在你自行处理并获取数据后，将JSON数据交给该函数处理，以便于autocomplete根据数据显示列表
            $.ajax({
                url: '${pageContext.request.contextPath}/getSearchPro',
                dataType: 'json',
                data: {
                    'likeProTypeLabel': $("#proTypeLabel").val(),
                },
                success: function (dataObj) {
                    var data = []
                    for (var i = 0; i < dataObj.length; i++) {
                        var data1 = {}
                        //data.push(dataObj[i].proTypeLabel)
                        data1.label = dataObj[i].proTypeLabel
                        data1.value = dataObj[i].proTypeLabel
                        data1.url = dataObj[i].url
                        data.push(data1)
                    }
                    response(data); //将数据交给autocomplete去展示
                }
            });
        },
        // 选中菜单事件
        select: function (event, ui) {
            $("#search-url").val(ui.item.url);
        },
        _resizeMenu: function () {
            this.menu.element.outerWidth(500);
        }
    });


    // 搜索菜单
    function searching() {
        var proTypeLabel = $("#proTypeLabel").val();
        var url = $("#search-url").val();
        if (url == '') {
            return false;
        }
        //var address = $(this).attr("data-src");
        $("iframe").attr("src", url);
    }

    //JavaScript代码区域
    layui.use(['element', 'form', 'laytpl', 'layer'], function () {
        var element = layui.element,
            $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            laytpl = layui.laytpl;


        // 动态添加选项卡，关闭选项卡
        var active = {
            //在这里给active绑定几项事件，后面可通过active调用这些事件
            tabAdd: function (url, id, name) {
                //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                element.tabAdd('demo', {
                    title: name,
                    content: '<iframe src="' + url + '" style="width:100%;height:100%"></iframe>',

                    id: id // 规定好的id
                    // <iframe name="rightFrame" src="readme.jsp"  id="rightFrame" title="rightFrame" width="100%" height="100%"></iframe>
                })
                //通过鼠标mouseover事件  动态将新增的tab下的li标签绑定鼠标右键功能的菜单
                //下面的json.id是动态新增Tab的id，一定要传入这个id,避免重复加载mouseover数据
                $(".layui-tab-title li[lay-id=" + id + "]").mouseover(function () {
                    var tabId = $(this).attr("lay-id");
                    CustomRightClick(tabId); //给tab绑定右击事件
                    FrameWH(); //计算ifram层的大小
                });
                element.render('tab');

            },
            tabChange: function (id) {
                //切换到指定Tab项
                element.tabChange('demo', id); //根据传入的id传入到指定的tab项
            },
            tabDelete: function (id) {
                element.tabDelete("demo", id);//删除
            },
            tabDeleteAll: function (ids) {//删除所有
                $.each(ids, function (i, item) {
                    element.tabDelete("demo", item); //ids是一个数组，里面存放了多个id，调用tabDelete方法分别删除
                })
            }
        };

        //当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
        $('.site-demo-active').on('click', function () {
            var dataid = $(this);
            //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                //如果比零小，则直接打开新的tab项
                active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
            } else {
                //否则判断该tab项是否以及存在
                var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                $.each($(".layui-tab-title li[lay-id]"), function () {
                    //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                    if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                        isData = true;
                    }
                })
                if (isData == false) {
                    //标志为false 新增一个tab项
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                }
            }
            //最后不管是否新增tab，最后都转到要打开的选项页面上
            active.tabChange(dataid.attr("data-id"));
        });

        function CustomRightClick(id) {
            //取消右键  rightmenu属性开始是隐藏的 ，当右击的时候显示，左击的时候隐藏
            $('.layui-tab-title li').on('contextmenu', function () {
                return false;
            })
            $('.layui-tab-title,.layui-tab-title li').click(function () {
                $('.rightmenu').hide();
            });
            //单击取消右键菜单
            $('body,#aaa').click(function () {
                $('.rightmenu').hide();
            });
            //tab点击右键
            $('.layui-tab-title li').on('contextmenu', function (e) {
                var popupmenu = $(".rightmenu");
                popupmenu.find("li").attr("data-id", id); //在右键菜单中的标签绑定id属性

                //判断右侧菜单的位置
                l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
                t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
                popupmenu.css({
                    left: l - 200,
                }).show(); //进行绝对定位
                return false;
            });
        }

        $(".rightmenu li").click(function () {
            //当前的tabId
            var currentTabId = $(this).attr("data-id");

            if ($(this).attr("data-type") == "closeOthers") { //关闭其他
                var tabtitle = $(".layui-tab-title li");
                $.each(tabtitle, function (i) {
                    if ($(this).attr("lay-id") != currentTabId) {
                        active.tabDelete($(this).attr("lay-id"))
                    }
                })
            } else if ($(this).attr("data-type") == "closeAll") { //关闭全部
                var tabtitle = $(".layui-tab-title li");
                $.each(tabtitle, function (i) {
                    active.tabDelete($(this).attr("lay-id"))
                })

            } else if ($(this).attr("data-type") == "refresh") { //刷新页面
                active.tabRefresh($(this).attr("data-id"));

            } else if ($(this).attr("data-type") == "closeRight") { //关闭右边所有
                //找到当前聚焦的li之后的所有li标签 然后遍历
                var tabtitle = $(".layui-tab-title li[lay-id=" + currentTabId + "]~li");
                $.each(tabtitle, function (i) {
                    active.tabDelete($(this).attr("lay-id"))
                })
            }

            $('.rightmenu').hide();
        });

        //导航栏点击选中时关闭其他选项卡
        $('.layui-nav-item').click(function () {
            $(this).siblings('li').attr('class', 'layui-nav-item');
        });

        function FrameWH() {
            var h = $(window).height() - 41 - 10 - 60 - 10 - 44 - 10;
            $("iframe").css("height", h + "px");
        }

        $(window).resize(function () {
            FrameWH();
        })

        //打开默认页面
        active.tabAdd("readme.jsp", "首页", "首页");
        active.tabChange("首页");

        $(".layui-this i").remove();


        // 每次登录都展示‘客服十大底线’
        // layer.open({
        // 	zIndex: layer.zIndex, // 层级最高，重点1
        //     title:['客服十大底线','font-size:18px;'],
        //    	skin:'layui-layer-molv',
        //    	area: ['50%', '48%'],
        //    	btn: ['确定'],
        // 	shadeClose:true,
        // 	content:
        //    		"<p>1、不得辱骂客户或与客户产生任何争执；</p>"+
        // 		"<p>2、不能不回复客户的信息；</p>"+
        // 		"<p>3、不能与客户有除了线上拍单和对公转账以外的任何交易方式；</p>"+
        // 		"<p>4、不能拉黑客户；</p>"+
        // 		"<p>5、不能用私人微信加客户微信；</p>"+
        // 		"<p>6、所有关于港独、黄赌毒、迷信、宗教、造假、违反法律、道德，等一切违反广告法类型的内容都不接单及不印刷；</p>"+
        // 		"<p>7、上班时间不能擅自离岗超过10分钟；</p>"+
        // 		"<p>8、不得弄虚作假，不得用不正当的方式提升数据；</p>"+
        // 		"<p>9、珍惜每一个客户流量，不敷衍客户；</p>"+
        // 		"<p>10、不得泄露、转卖顾客信息及公司商业信息。</p>",
        //    	success: function(layero){
        //    	    layer.setTop(layero); //重点2
        //    	},
        //    	// 点击‘确定’按钮的时候，调用方法
        //    	yes:function(index){
        //    		layer.close(index)
        //    	},
        //     //右上角关闭回调
        //     cancel: function(){}
        // });

        // 获取登录用户的信息，展示更新动态
        $(document).ready(function () {
            $.ajax({
                url: "${pageContext.request.contextPath}/getUserInfo",
                type: "get",
                success: function (obj) {
                    // 如果生日为空，补充生日和入职日期
                    // var birthDay = obj.data.userInfo.birthDay
                    // if(!birthDay){
                    // 	//页面层
                    // 	layer.open({
                    // 		type: 2,
                    // 	  	title:"补充信息",
                    // 	  	skin:'layui-layer-molv',
                    // 	 	// skin: 'layui-layer-rim', //加上边框
                    // 	  	area: ['820px', '440px'], //宽高
                    // 	  	content: 'addBirthDay.jsp'
                    // 	});
                    // }

                    // 计算入职天数(当前日期-入职日期)(后端返回的是字符串，需要转成时间戳)
                    <%--obj.data.userInfo.entryDay = Math.floor((new Date().getTime() - new Date(obj.data.userInfo.entryDate).getTime()) / (1000*3600*24));--%>
                    <%--// 生日当天展示生日祝福--%>
                    <%--var isBirthDay = obj.data.userInfo.isBirthDay--%>
                    <%--if(isBirthDay == 1){--%>
                    <%--	layer.open({--%>
                    <%--     	title: false,--%>
                    <%--  	   	type: 1,--%>
                    <%-- 	//	type: 2,--%>
                    <%--     	closeBtn: 0,--%>
                    <%--     	btn: ['收下祝福'],--%>
                    <%--     	area: ['100%', '100%'],--%>
                    <%--     	content: $('#tong'),--%>
                    <%--    //	content: 'https://zhangzp007.github.io/birthday/',--%>
                    <%--     	success: function(layero){--%>
                    <%--     	},--%>
                    <%--     	// 点击按钮的时候，调用方法--%>
                    <%--     	yes:function(index){--%>
                    <%--     		// 改变生日状态--%>
                    <%--     		$.ajax({--%>
                    <%--				url : "${pageContext.request.contextPath}/changeIsBirthDay",--%>
                    <%--				type : "post",--%>
                    <%--				success : function(obj) {--%>
                    <%--					layer.close(index);--%>
                    <%--				}--%>
                    <%--			})--%>
                    <%--			location.reload();--%>
                    <%--     	},--%>
                    <%--        //右上角关闭回调--%>
                    <%--     	cancel: function(){}--%>
                    <%--    });--%>

                    // var getTpl = document.getElementById('happinessiInfo').innerHTML,
                    // 	view = document.getElementById('view');
                    // laytpl(getTpl).render(obj, function (html) {
                    //  	view.innerHTML = html;
                    // });
                    // }

                    // 登陆展示更新日志提示
                    var readLogStatus = obj.data.userInfo.readLogStatus
                    if (readLogStatus == "0") {
                        layer.open({
                            zIndex: layer.zIndex, // 层级最高，重点1
                            title: '温馨提示',
                            skin: 'layui-layer-molv',
                            btn: ['我知道啦'],
                            content: '<br>产品 / 价格有变动，具体请查看右侧最新<span style="line-height: 22px;color:red;font-weight:bold">更新日志</span>',
                            success: function (layero) {
                                layer.setTop(layero); //重点2
                            },
                            // 点击‘确定’按钮的时候，调用方法
                            yes: function (index) {
                                // 改变阅读更新日志状态
                                $.ajax({
                                    url: "${pageContext.request.contextPath}/changeReadLogStatus",
                                    type: "post",
                                    success: function (obj) {
                                        layer.close(index);
                                    }
                                })
                            },
                            //右上角关闭回调
                            cancel: function () {
                            }
                        });
                    }
                }
            })
        })
        $(document).ready(function () {
            $.ajax({
                url: "${pageContext.request.contextPath}/loginAttribute",
                type: "get",
                success: function (obj) {
                    if (obj.msg == "成功") {
                    } else {
                        window.location.href = '${pageContext.request.contextPath}/login.jsp'
                    }
                }
            })
        })
    })
</script>
</body>
</html>