<%@include file="/WEB-INF/common/layouts/common.jsp" %>
<%@ page language="java" pageEncoding="UTF-8" %>
<html>
<head>
    <title>全链条精准导购系统</title>
    <script type="text/javascript">
        $(document)
            .ready(
                function () {
                    var userAgent = navigator.userAgent.toLowerCase();
                    var browser = {
                        version: (userAgent
                            .match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [
                            0, '0'])[1],
                        safari: /webkit/.test(userAgent),
                        opera: /opera/.test(userAgent),
                        msie: /msie/.test(userAgent)
                        && !/opera/.test(userAgent),
                        mozilla: /mozilla/.test(userAgent)
                        && !/(compatible|webkit)/.test(userAgent),
                        browser360: /360se/.test(userAgent),
                        chrome: /chrome/.test(userAgent)
                    };
                    var flag = (browser.msie && browser.version == 10.0)
                        || browser.chrome;
                    if (!flag) {
                        House365Util
                            .showAlertMessage(
                                $("#browserMessage"),
                                "为了给您提供更好的用户体验，请使用以下浏览器：<ul></ul>"
                                + "&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://download.microsoft.com/download/4/1/4/4149BFB1-AC27-401D-943F-DA1BBD0537C5/IE10-Windows6.1-x86-zh-cn.exe'>IE10下载(32位)</a>&nbsp;&nbsp;&nbsp;&nbsp;|"
                                + "&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://download.microsoft.com/download/3/7/D/37DC542A-AE01-4E4B-99A0-FCFD5F7F19E7/IE10-Windows6.1-x64-zh-cn.exe'>IE10下载(64位)</a>&nbsp;&nbsp;&nbsp;&nbsp;|"
                                + "&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://dlsw.baidu.com/sw-search-sp/soft/9d/14744/ChromeStandaloneSetup.1421221167.exe'>Chrome下载</a>",
                                "warn");
                    }
                });
    </script>
</head>
<body>

<div class="row${fluid} index-row" style="margin-top: 10px;">
    <div class="span11 offset1">
        <div id="browserMessage"></div>
        <div class="span12">
            <h5>
                <c:set var="now" value="<%=new java.util.Date()%>"/>
                ${sessionUserName}, 欢迎回来！今天是<fmt:formatDate value="${now}" type="date" pattern="yyyy年MM月dd日"/>！
            </h5>
        </div>

        <div class="span5">
            <ul class="nav nav-list">
                <li class="nav-header"><font size="3pm">我的客户概览</font></li>
                <li class="divider"></li>
                <li class="alert alert-info" style="margin-bottom: 5px;cursor: pointer;" onclick="viewCustomer('1')">
                    您今日新增的客户：<span
                        class="badge badge-info">${summary['newadd']}</span></li>
                <li class="alert alert-info" style="margin-bottom: 5px;cursor: pointer;" onclick="jumpPage(1)">
                    400来电客户：<span class="badge badge-info">${call400Customer}</span></li>
                <li class="alert alert-info" style="margin-bottom: 5px;cursor: pointer;" onclick="jumpPage(2)">
                    待回访客户：<span class="badge badge-info">${waitVisitCustomer}</span></li>
                <li class="alert alert-info" style="margin-bottom: 5px;cursor: pointer;" onclick="jumpPage(3)">
                    近7日回访客户：<span class="badge badge-info">${last7ReVisit}</span></li>
                <li class="alert alert-info" style="margin-bottom: 5px;cursor: pointer;display:none" onclick="viewCustomer('2')">
                    今日驻场信息有更新的客户：<span
                        class="badge badge-info">${summary['newupdate']}</span></li>
                <li class="alert alert-info" style="margin-bottom: 5px;cursor: pointer;display:none" onclick="viewCustomer('3')">
                    超过7天未回访的新增客户：<span
                        class="badge badge-info">${summary['nocall7']}</span></li>
                <li class="alert alert-info" style="margin-bottom: 5px;cursor: pointer;display:none" onclick="viewCustomer('4')">
                    超过3天未回访的客户：<span
                        class="badge badge-info">${summary['nocall3']}</span></li>
                <li class="alert alert-info" style="margin-bottom: 5px;cursor: pointer;display:none" onclick="viewCustomer('5')">
                    已到访后超过7天状态未更新的客户：<span
                        class="badge badge-info">${summary['noupdate']}</span></li>
            </ul>
        </div>

        <div class="span5">
            <ul class="nav nav-list">
                <li class="nav-header">
                    <font size="3pm">公告</font>
                    <span style="float: right;"><a href="${ctx}/notice/viewList">更多</a></span>
                </li>
                <li class="divider"></li>
                <c:forEach items="${notices}" var="notice">
                    <li class="alert alert-info" style="margin-bottom: 5px;cursor:pointer;"
                        onclick="window.open('${ctx}/notice/view/${notice.id}');">
                        <c:if test="${notice.red}">
                        <font color="red"><b>
                            </c:if>
                                ${notice.title}
                            <c:if test="${notice.top}">
                                【置顶】
                            </c:if>
                            <c:if test="${notice.red}">
                        </b></font>
                        </c:if>
                        <span style="float: right;">
                            <c:if test="${'new' eq notice.city}">
                                <img src="${ctx}/resources/image/new.gif"> &nbsp;&nbsp;
                            </c:if>
                            <fmt:formatDate value="${notice.createTime}" type="date" pattern="yyyy.MM.dd"/>
                        </span>
                    </li>
                </c:forEach>
            </ul>
        </div>
    </div>

    <div class="span11 offset1">
        <div class="span5">
            <ul class="nav nav-list">
                <li class="nav-header">
                    <font size="1.5pm">${report1Title}</font>
                </li>
                <li class="divider"></li>
            </ul>

        </div>
        <div class="span5">
            <ul class="nav nav-list">
                <li class="nav-header">
                    <font size="1.5pm">${report2Title}</font>
                </li>
                <li class="divider"></li>
            </ul>

        </div>
    </div>

    <div class="span11 offset1">
        <div class="span5" id="report1" style="height:400px;">
        </div>
        <div class="span5" id="report2" style="height:400px;">
        </div>
    </div>

    <div class="span11 offset1">
        <div class="span5">
            <ul class="nav nav-list">
                <li class="nav-header">
                    <font size="1.5pm">${report3Title}</font>
                </li>
                <li class="divider"></li>
            </ul>

        </div>
        <div class="span5">
            <ul class="nav nav-list">
                <li class="nav-header">
                    <font size="1.5pm">${report4Title}</font>
                </li>
                <li class="divider"></li>
            </ul>

        </div>
    </div>

    <div class="span11 offset1">
        <div class="span5" id="report3" style="height:400px;">
        </div>
        <div class="span5" id="report4" style="height:400px;">
        </div>
    </div>

</div>

<script src="${ctx}/resources/script/echarts/echarts.min.js"></script>

<script type="text/javascript">
    $(document).ready(
        function () {
            $(".link").each(function () {
                var $this = $(this);
                var target = $this.attr("target");
                $this.click(function () {
                    window.location.href = "${ctx}/" + target;
                });
            });

            drawReport1();
        });

    function viewCustomer(type) {
        window.open("${ctx}/customermanagement/myCustomerNew?summaryType=" + type);
    }

    function jumpPage(value){
        if(value==1){
            window.open("${ctx}/customer/hotlineList/");
        }
        if(value==2){
            window.open("${ctx}/customermanagement/myCustomerNew?type=waitCall&search_EQ_orderByTime=3");
        }
        if(value==3){
            window.open("${ctx}/customermanagement/myCustomerNew?type=callback");
        }
    }

    function drawReport1() {
        var myChart1 = echarts.init(document.getElementById('report1'));
        var myChart2 = echarts.init(document.getElementById('report2'));
        var myChart3 = echarts.init(document.getElementById('report3'));
        var myChart4 = echarts.init(document.getElementById('report4'));

        // 指定图表的配置项和数据
        var option1 = {
            title: {
                text: '${report1Title}'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['认购业绩', '认购宗数']
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ${report1Names}
            },
            series: [{
                name: '认购业绩',
                type: 'bar',
                data: ${report1Performances}
            }, {
                name: '认购宗数',
                type: 'bar',
                data: ${report1BuyNums}
            }]
        };

        // 指定图表的配置项和数据
        var option2 = {
            title: {
                text: '${report2Title}'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['认购业绩', '认购宗数']
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ${report2Names}
            },
            series: [{
                name: '认购业绩',
                type: 'bar',
                data: ${report2Performances}
            }, {
                name: '认购宗数',
                type: 'bar',
                data: ${report2BuyNums}
            }]
        };
        // 指定图表的配置项和数据
        var option3 = {
            title: {
                text: '${report3Title}'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['认购业绩', '认购宗数']
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ${report3Names}
            },
            series: [{
                name: '认购业绩',
                type: 'bar',
                data: ${report3Performances}
            }, {
                name: '认购宗数',
                type: 'bar',
                data: ${report3BuyNums}
            }]
        };
        // 指定图表的配置项和数据
        var option4 = {
            title: {
                text: '${report4Title}'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['认购业绩', '认购宗数']
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ${report4Names}
            },
            series: [{
                name: '认购业绩',
                type: 'bar',
                data: ${report4Performances}
            }, {
                name: '认购宗数',
                type: 'bar',
                data: ${report4BuyNums}
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        if ('' != ${report1Performances}) {
            myChart1.setOption(option1);
        } else {
            $("#report1").html("<div style='width:100%;text-align: center'>暂无数据</div>");
        }
        if ('' != ${report2Performances}) {
            myChart2.setOption(option2);
        } else {
            $("#report2").html("<div style='width:100%;text-align: center'>暂无数据</div>");
        }
        if ('' != ${report3Performances}) {
            myChart3.setOption(option3);
        } else {
            $("#report3").html("<div style='width:100%;text-align: center'>暂无数据</div>");
        }
        if ('' != ${report4Performances}) {
            myChart4.setOption(option4);
        } else {
            $("#report4").html("<div style='width:100%;text-align: center'>暂无数据</div>");
        }

        window.onresize = function(){
            myChart1.resize();
            myChart2.resize();
            myChart3.resize();
            myChart4.resize();
        }
    }

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