<%@ page import="com.fadu.app.util.SystemCache" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>

<link rel="stylesheet" href="${contextPath}/static/assets/css/jquery-ui.css" />
<link rel="stylesheet" href="${contextPath}/static/assets/css/datepicker.css" />
<link rel="stylesheet" href="${contextPath}/static/assets/css/ui.jqgrid.css" />


<div style="background: rgba(1,1,2,0.05)">
    <br>
    关键字:<input id="keywords" placeholder="输入关键字" class="input-medium search-query" type="text" />
    &nbsp;平 台:
    <select id='platform'>
        <option selected value="" >所有账号</option>
    </select>
    &nbsp;选题类型：<select id="subType">
    </select>
    &nbsp;内容类型：<select id="subCon">
    </select>
    &nbsp;选题领域：<select id="subTree">
    </select>
    &nbsp;<button id="searchd" type="button" class="btn" >搜索</button>
<%--    &nbsp;<button id="addAcc" type="button" onclick="ppreSubAcc()" class="btn" >添加账号</button>--%>
    <br>
    <br>
</div>

<div class="row" >
    <div class="col-xs-6" >
        <table id="grid-table"></table>
        <div id="grid-pager"></div>
        <script type="text/javascript">
            var $path_base = "${contextPath}/static";//in Ace demo this will be used for editurl parameter
        </script>
        <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
</div><!-- /.row -->


<div id="modal-update-body" class="modal fade" tabindex="-1" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header no-padding">
                <div class="table-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <span class="white">&times;</span>
                    </button>
                    修改账号数据
                </div>
            </div>
            <div class="modal-body" style="overflow-y: scroll;">
                <div id="mod-update-tip" class="red clearfix"></div>
                <input type="text" id="update-id" hidden = hidden >
                <%--<div class="form-group" style="margin-left: 30px;margin-bottom: 20px;">
                    <label class="control-label col-sm-7">账号Id(输入账号名称模糊查询)：</label>
                    <input type="text" id="update-acc" class="searchIpt form-control">
                </div>
                <div class="form-group" style="margin-left: 30px;margin-bottom: 20px;">
                    <label class="control-label col-sm-7">选题Id(输入标题名称模糊查询)：</label>
                    <input type="text" id="update-sub" class="searchIpt form-control">
                </div>--%>
                <div class="form-group" style="margin-left: 30px;margin-bottom: 20px;">
                    <label class="control-label col-sm-7">播放量：</label>
                    <input type="text" id="update-bf" class="searchIpt form-control">
                </div>
            </div>
            <div class="modal-footer no-margin-top">
                <div class="text-center">
                    <button id="mod-update-success" type="button" class="btn btn-sm btn-primary"
                            onclick="updateSubAcc();">
                        确定
                    </button>
                    <button class="btn btn-sm" data-dismiss="modal">
                        取消
                    </button>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<script type="text/javascript" >

    var myGrid = null;
    var scripts = [ null,  "${contextPath}/static/assets/js/date-time/bootstrap-datepicker.js", "${contextPath}/static/assets/js/date-time/locales/bootstrap-datepicker.zh-CN.js", "${contextPath}/static/assets/js/jqGrid/jquery.jqGrid.js", "${contextPath}/static/assets/js/jqGrid/i18n/grid.locale-cn.js", null ]

    $('.page-content-area').ace_ajax('loadScripts', scripts, function() {
        jQuery(function ($) {

            var grid_selector = "#grid-table";
            var pager_selector = "#grid-pager";

            /*搜索框  主要对Jquery grid进行刷新 带参数刷新    */
            $("#searchd").click(function(){
                var keywords = $("#keywords").val();
                var platform = $("#platform").val();
                var subType = $("#subType").val();
                var subCon = $("#subCon").val();
                var subTree = $("#subTree").val();
                myGrid.setGridParam({postData:{keywords:keywords,platform:platform,
                        subType:subType,subCon:subCon,subTree:subTree,page:1},
                    url : '${contextPath}/xmt/data/getAllDate',page:1}).trigger('reloadGrid');
            });


            $(document).keydown(function (event) {
                var key = window.event ? event.keyCode : event.which;
                if (key == 13) {
                    $("#searchd").click();
                }
            });


            myGrid=	jQuery(grid_selector).jqGrid({
                subGrid : false,
                url : "${contextPath}/xmt/data/getAllDate",
                datatype : "json",
                mtype:'POST',//设置http方式为post以解决乱码问题
                colNames : ['id','平台','账号名称','合作律师', '选题发布时间','选题标题',
                    '内容形式','领域','类型','播放量','数据更新时间','操作'],
                colModel : [{
                    name : 'id',
                    index : 'id',
                    width : 150,
                    search : false,
                    editable : false,
                    hidden : true,
                    //sorttype : 'date'
                },{
                    name : 'platName',
                    index : 'platName',
                    width : 100,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'accountName',
                    index : 'accountName',
                    width : 120,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'lawyerName',
                    index : 'lawyerName',
                    width : 100,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'pushDate',
                    index : 'pushDate',
                    width : 150,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'title',
                    index : 'title',
                    width : 150,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'content',
                    index : 'content',
                    width : 50,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'territory',
                    index : 'territory',
                    width : 50,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'type',
                    index : 'type',
                    width : 50,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'bfCount',
                    index : 'bfCount',
                    width : 100,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : 'updateDate',
                    index : 'updateDate',
                    width : 150,
                    search : false,
                    editable : false,
                    //sorttype : 'date'
                },{
                    name : '',
                    index : '',
                    width : 130,
                    editable : false,
                    search : false,
                    sortable : false,
                    fixed:true,
                    formatter : optionFormatter
                }],
                sortname : "createDate",
                sortorder : "desc",
                viewrecords : true,
                rowNum : 10,
                rowList : [ 10, 20, 30 ],
                pager : pager_selector,
                altRows : true,
                height:"auto",//自动根据每页条数弹性调整表格高度
                loadComplete : function() {
                    var table = this;
                    setTimeout(function(){
                        /*styleCheckbox(table);
                        updateActionIcons(table);*/
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                }
            });

            function updatePagerIcons(table) {
                var replacement = {
                    'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
                    'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
                    'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
                    'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
                };
                $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function() {
                    var icon = $(this);
                    var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                    if ($class in replacement)
                        icon.attr('class', 'ui-icon ' + replacement[$class]);
                })
            }

            function enableTooltips(table) {
                $('.navtable .ui-pg-button').tooltip({
                    container : 'body'
                });
                $(table).find('.ui-pg-div').tooltip({
                    container : 'body'
                });
            };
            function optionFormatter(cellvalue, options, cell) {
                var template = "<button data-toggle='modal'  onclick='showEdit(\""+cell.id+"\")' class='btn btn-minier btn-yellow'>修改</button>";
                template += "&nbsp;&nbsp;<button data-toggle='modal'  onclick='preDelete(\""+cell.id+"\")' class='btn btn-minier btn-info'>删除</button>";
                return template;
            }


        });
    });

    function ppreSubAcc() {
        $("#add-acc").val("");
        $("#add-sub").val("");
        $("#modal-add-body").modal("toggle");
    }

    $(document).ready(function($) {
        $.fn.typeahead.Constructor.prototype.blur = function() {
            var that = this;
            /*console.log(that);*/
            setTimeout(function () { that.hide() }, 250);
            /*alert("hahah")*/

        };
        $("#add-acc").typeahead({
            source: function (query, process) {
                return $.ajax({
                    url: '${contextPath}/xmt/data/selectAccSub',
                    type: 'post',
                    data: {accountName: query,
                        type: 1,},
                    success: function (result) {
                        console.log(result);
                        /*var ret = eval("(" + result + ")");
                        console.log(ret);*/
                        var arr1 = new Array();
                        for (var i = 0;i<result.length;i++){
                            var obj = new Object();
                            obj.id =  result[i][0];
                            obj.accountName = result[i][1];
                            console.log(obj.id);
                            console.log(obj.accountName);
                            arr1.push("{\"id\" :\""+obj.id+"\",\"accountName\":\""+obj.accountName+"\"}");
                        }
                        //var jsonObj =  JSON.parse(arr);
                        //console.log(arr1);
                        process(arr1);
                    }
                });
            },
            highlighter: function (obj) {
                var item = JSON.parse(obj);
                console.log(item);
                var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
                return (item.id+"&nbsp;"+item.accountName).replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
                    return '<strong>' + match + '</strong>'
                });
            },
            updater: function (obj) {
                var item = JSON.parse(obj);
                return item.id;
            }

        });
        $("#update-acc").typeahead({
            source: function (query, process) {
                return $.ajax({
                    url: '${contextPath}/xmt/data/selectAccSub',
                    type: 'post',
                    data: {accountName: query,
                        type: 1,},
                    success: function (result) {
                        console.log(result);
                        /*var ret = eval("(" + result + ")");
                        console.log(ret);*/
                        var arr1 = new Array();
                        for (var i = 0;i<result.length;i++){
                            var obj = new Object();
                            obj.id =  result[i][0];
                            obj.accountName = result[i][1];
                            console.log(obj.id);
                            console.log(obj.accountName);
                            arr1.push("{\"id\" :\""+obj.id+"\",\"accountName\":\""+obj.accountName+"\"}");
                        }
                        //var jsonObj =  JSON.parse(arr);
                        //console.log(arr1);
                        process(arr1);
                    }
                });
            },
            highlighter: function (obj) {
                var item = JSON.parse(obj);
                console.log(item);
                var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
                return (item.id+"&nbsp;"+item.accountName).replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
                    return '<strong>' + match + '</strong>'
                });
            },
            updater: function (obj) {
                var item = JSON.parse(obj);
                return item.id;
            }

        });

        $("#add-sub").typeahead({
            source: function (query, process) {
                return $.ajax({
                    url: '${contextPath}/xmt/data/selectAccSub',
                    type: 'post',
                    data: {title: query,
                        type: 2,},
                    success: function (result) {
                        console.log(result);
                        /*var ret = eval("(" + result + ")");
                        console.log(ret);*/
                        var arr1 = new Array();
                        for (var i = 0;i<result.length;i++){
                            var obj = new Object();
                            obj.id =  result[i][0];
                            obj.title = result[i][1];
                            console.log(obj.id);
                            console.log(obj.title);
                            arr1.push("{\"id\" :\""+obj.id+"\",\"title\":\""+obj.title+"\"}");
                        }
                        //var jsonObj =  JSON.parse(arr);
                        //console.log(arr1);
                        process(arr1);
                    }
                });
            },
            highlighter: function (obj) {
                var item = JSON.parse(obj);
                console.log(item);
                var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
                return (item.id+"&nbsp;"+item.title).replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
                    return '<strong>' + match + '</strong>'
                });
            },
            updater: function (obj) {
                var item = JSON.parse(obj);
                return item.id;
            }

        });$("#update-sub").typeahead({
            source: function (query, process) {
                return $.ajax({
                    url: '${contextPath}/xmt/data/selectAccSub',
                    type: 'post',
                    data: {title: query,
                        type: 2,},
                    success: function (result) {
                        console.log(result);
                        /*var ret = eval("(" + result + ")");
                        console.log(ret);*/
                        var arr1 = new Array();
                        for (var i = 0;i<result.length;i++){
                            var obj = new Object();
                            obj.id =  result[i][0];
                            obj.title = result[i][1];
                            console.log(obj.id);
                            console.log(obj.title);
                            arr1.push("{\"id\" :\""+obj.id+"\",\"title\":\""+obj.title+"\"}");
                        }
                        //var jsonObj =  JSON.parse(arr);
                        //console.log(arr1);
                        process(arr1);
                    }
                });
            },
            highlighter: function (obj) {
                var item = JSON.parse(obj);
                console.log(item);
                var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
                return (item.id+"&nbsp;"+item.title).replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
                    return '<strong>' + match + '</strong>'
                });
            },
            updater: function (obj) {
                var item = JSON.parse(obj);
                return item.id;
            }

        });
    });



    function showEdit(id) {
        $("#update-acc").val("");
        $("#update-sub").val("");
        $("#update-bf").val("");
        $.ajax({
            dataType : "json",
            url : "${contextPath}/xmt/data/getAccSubById",
            type : "post",
            data : {
                'id' : id,
            },
            complete : function(ret) {
                var ret = eval("(" + ret.responseText + ")");
                console.log(ret);
                $("#update-id").val(ret.id);
                $("#update-acc").val(ret.accountId);
                $("#update-sub").val(ret.subId);
                $("#update-bf").val(ret.bfCount);
                $("#modal-update-body").modal("toggle");
            }
        });
    }

    function updateSubAcc() {
        var id = $("#update-id").val();
        var accoundId = $("#update-acc").val();
        var subjectId = $("#update-sub").val();
        var bfCount = $("#update-bf").val();
        $.ajax({
            dataType : "json",
            url : "${contextPath}/xmt/data/updateAccSub",
            type : "post",
            data : {
                'id' : id,
                'accoundId' : accoundId,
                'subjectId' : subjectId,
                'bfCount' : bfCount,
            },
            complete : function(ret) {
                var ret = eval("(" + ret.responseText + ")");
                console.log(ret);
                alert(ret.message);
                $("#modal-update-body").modal("toggle");
                jQuery("#grid-table").trigger("reloadGrid");
            }
        });
    }

    function getAllPlatform() {
        var sec = document.getElementById('platform');
        sec.innerHTML = "<option value='' selected>全部平台</option>";
        $.getJSON("${contextPath}/xmt/sub/getAllPlatform",function(result){
            $.each(result, function(i, v){
                    sec.innerHTML += "<option value='" + v.xmtKey + "'>" + v.xmtVal + "</option>";
            });
        });
    }
    getAllPlatform();
    getAlltype();
    getAllcontent();
    getAllterritory();

    function getAlltype() {
        var ccc = document.getElementById('subType');
        ccc.innerHTML = "<option value='' selected>全  部</option>";
        $.getJSON("${contextPath}/xmt/sub/getAlltype",function(result){
            $.each(result, function(i, v){
                ccc.innerHTML += "<option value='" + v.xmtKey + "'>" + v.xmtVal + "</option>";
            });
        });
    }

    function getAllcontent() {
        var ccc = document.getElementById('subCon');
        ccc.innerHTML = "<option value='' selected>全  部</option>";
        $.getJSON("${contextPath}/xmt/sub/getAllcontent",function(result){
            $.each(result, function(i, v){
                ccc.innerHTML += "<option value='" + v.xmtKey + "'>" + v.xmtVal + "</option>";
            });
        });
    }

    function getAllterritory() {
        var ccc = document.getElementById('subTree');
        ccc.innerHTML = "<option value='' selected>全  部</option>";
        $.getJSON("${contextPath}/xmt/sub/getAllterritory",function(result){
            $.each(result, function(i, v){
                ccc.innerHTML += "<option value='" + v.xmtKey + "'>" + v.xmtVal + "</option>";
            });
        });
    }


</script>
