<!DOCTYPE html>
<html>
<head>
    <base href="#springUrl('/assets/adminlte/')"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>粉丝管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta
            content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
            name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet"
          href="plugins/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="plugins/ionicons/css/ionicons.min.css">

    <!-- DataTables -->
    <link rel="stylesheet"
          href="plugins/datatables/dataTables.bootstrap.css">

    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
             folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
    <!-- Morris chart -->
    <link rel="stylesheet" href="plugins/morris/morris.css">
    <!-- jvectormap -->
    <link rel="stylesheet"
          href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <!-- Date Picker -->
    <link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
    <!-- Daterange picker -->
    <link rel="stylesheet"
          href="plugins/daterangepicker/daterangepicker-bs3.css">
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet"
          href="plugins/bootstrap-fileinput/bootstrap-fileinput.css">
    <link rel="stylesheet"
          href="plugins/bootstrap-fileinput/fileinput.min.css">
    <link rel="stylesheet"
          href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <!-- Select2 -->
    <link rel="stylesheet" href="plugins/select2/select2.min.css">
    <style type="text/css">
        .piccenter {
            text-align: center;
        }

        .modal-backdrop {
            z-index: 998;
        }
    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">


<div class="wrapper">
    <div class="content-wrapper" style="margin-left: 0;">

        <section class="content-header">
            <h1>
                粉丝管理
                <small>粉丝信息</small>
            </h1>

        </section>

        <!--  -->
        <div id="myModal" class="modal fade" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- dialog body -->
                    <div class="modal-body">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        粉丝同步中,请稍后......
                    </div>
                    <!-- dialog buttons -->
                </div>
            </div>
        </div>
        <!--  -->

        <!--  -->
        <div id="butchModal" class="modal fade" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">批量为粉丝打标签<a href="/schaeffler/static/batchfanss.xlsx"
                                                                             id="downloadtemplate">下载模板</a></h4>
                    </div>
                    <div class="modal-body">
                        <form action="" id="importForm">
                            <label class="control-label">选择文件1</label>
                            <input id="fileExcel" name="fileExcel" type="file" class="file">
                            <input type="text" style="display: none" name="_csrf" value="${_csrf.token}"/>
                            <input  type="text" style="display: none" name="_csrf_header" value="${_csrf.headerName}"/>
                            <button style="width: 100px;margin: 10px;" type="button" class="btn btn-primary"
                                    id="import">导入
                            </button>
                        </form>
                    </div>
                    <!-- dialog buttons -->
                </div>
            </div>
        </div>
        <!--  -->

        <!--  -->
        <div id="logModal" style="z-index:100000000000;" class="modal" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">导入中,请稍后......</h4>
                    </div>
                    <div class="modal-body">
                        <div id="log"></div>
                    </div>
                    <!-- dialog buttons -->
                </div>
            </div>
        </div>
        <!--  -->

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <form id="seachTableForm"
                                  action="#springUrl('/a/managefanss/fanss/export')" method="get"
                                  onkeydown="if(event.keyCode==13){return false;}">
                                <div class="col-xs-1">
                                    <input type="text" class="form-control required"
                                           placeholder="粉丝昵称" name="nickname"
                                           value="$!{mpFanssEntity.nickname}">
                                </div>
                                <div class="col-xs-1">
                                    <input type="text" class="form-control required"
                                           placeholder="地区" name="areaname"
                                           value="$!{areaname}">
                                </div>
                                <!--<div class="col-xs-1">
                                    <select class="form-control select2 select2-hidden-accessible"
                                        name="source" style="width: 100%;" tabindex="-1"
                                        aria-hidden="true">
                                        <option selected="selected" value="">粉丝来源</option>
                                        <option value="1">导购二维码</option>
                                        <option value="2">门店二维码</option>
                                        <option value="3">普通关注</option>
                                        <option value="4">普通二维码</option>

                                    </select>
                                </div> -->
                                <div class="col-xs-2">
                                    <div class="input-group date">
                                        <div class="input-group-addon">
                                            <i class="fa fa-calendar"></i>
                                        </div>
                                        <input type="text" class="form-control pull-right datepicker"
                                               value="$!{startTime}"
                                               name="startTime" placeholder="关注开始时间"
                                               readonly="readonly">
                                    </div>
                                </div>
                                <div class="col-xs-2">
                                    <div class="input-group date">
                                        <div class="input-group-addon">
                                            <i class="fa fa-calendar"></i>
                                        </div>
                                        <input type="text"
                                               class="form-control pull-right  datepicker"
                                               value="$!{endTime}"
                                               name="endTime" placeholder="关注结束时间"
                                               readonly="readonly">
                                    </div>
                                </div>
                                <div class="col-xs-5">
                                    <a class="search btn btn-primary">搜索</a>
                                    #if($shiro.hasPermission("account:member:syn")) <a
                                        href="javascript:void(0)" onclick="syn(this)"
                                        class="btn bg-olive">同步粉丝</a>
                                    #end
                                    #if($shiro.hasPermission("mp:fanss:edit")) <a id="batchFanssTag"
                                        href="javascript:void(0)"
                                        class="btn bg-olive">批量打标签</a>
                                    #end
                                    <button style="width: 100px;" type="submit"
                                            class="btn btn-primary" id="export">导出
                                    </button>
                                </div>
                            </form>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table id="userlilst" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th hidden="true">id</th>
                                    <th style="text-align: left;">头像</th>
                                    <th>性别</th>
                                    <th>openid</th>
                                    <th>省份</th>
                                    <th>城市</th>
                                    <th>昵称</th>
                                    <th>标签</th>
                                    <th>粉丝来源</th>
                                    <th>关注日期</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>

                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->


    <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>
</div>
<div id="addlabelModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- dialog body -->
            <div class="modal-body">
                <select class="form-control select2" multiple='multiple' style="width: 100%" id="addlabel"
                        data-placeholder='请选择标签'>
                </select>
            </div>
            <div style="text-align: center;padding-bottom: 20px;">
                <button style="width: 100px;" type="button" class="btn btn-primary" onclick="addlabelsubmit()">确定
                </button>
                <button style="width: 100px;" type="button" id="tagCacel" class="btn btn-default">取消</button>
            </div>
            <!-- dialog buttons -->
        </div>
    </div>
</div>
<!-- ./wrapper -->

<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->
<!-- END FOOTER -->
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables/extensions/i18n/lanauage_ch.js"></script>
<script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.min.js"></script>
<script src="plugins/bootstrap-fileinput/bootstrap-fileinput.js"></script>
<script src="plugins/bootstrap-fileinput/fileinput.min.js"></script>
<script src="plugins/bootstrap-fileinput/zh2.js"></script>
<script src="js/jquery.form.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<script src="plugins/bootbox/bootbox.min.js"></script>
<script src="plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="plugins/select2/select2.full.min.js"></script>
<script type="text/javascript"
        src="plugins/jquery-validation/js/jquery.validate.min.js"></script>
<script src="common/js/cfapp.js"></script>
<!-- END PAGE LEVEL PLUGINS -->

<script>
    var csrfheader = {name: '_csrf_header', value: '${_csrf.headerName}'};
    var csrftoken = {name: '_csrf', value: '${_csrf.token}'};
</script>

<script>

    //初始化fileinput控件（第一次初始化）
    function initFileInput(ctrlName, uploadUrl) {
        var control = $('#' + ctrlName);
        control.fileinput({
            language: 'zh', //设置语言
            uploadUrl: uploadUrl, //上传的地址
            showUpload: false, //是否显示上传按钮
            showCaption: true,//是否显示标题
            showPreview: false,
            browseClass: "btn btn-primary", //按钮样式
            previewFileIcon: "",
        });
    }
    initFileInput("fileExcel", "#springUrl('/a/managefanss/batchFanss')");


    function formatDates(now) {
        var date = new Date(now);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
    }

    function syn(obj) {
        var href = "#springUrl('/a/managefanss/synAllFans')";
        var warningMsg = Cfapp.warning({
            content: '正在同步中，请稍后!',  //
            title: "提示"
        });
        $.ajax({
            "type": "POST",
            "url": href,
            "data": {"_csrf_header": csrfheader.value, "_csrf": csrftoken.value},
            "dataType": "json",
            "success": function (data) {
                warningMsg.destory();
                if (data.errorCode == '0') {
                    bootbox.alert("粉丝同步成功", function () {
                        window.location.href = "#springUrl('/a/managefanss/fansslist')";
                    });
                } else {
                    bootbox.alert("粉丝同步失败,请稍后重试", function () {
                    });
                }

            }
        });
    }

    jQuery(document).ready(function () {



//    	$("#downloadtemplate").click(function(){//下载导入模板
//    		var host = "http://"+window.location.host;
//			 var url=host+"/cfwechat/static/batchfanss.xlsx";
//    		window.location.href=url;
//    	})

        url = "#springUrl('/a/fanssgroup/fetchdata')";
        $.ajax({
            "type": "get",
            "contentType": "application/json",
            "url": url,
            "dataType": "json",
            "data": {
                iDisplayStart: 0,
                iDisplayLength: 0
            },
            "success": function (data) {
                data = data.aaData;
                for (var i = 0; i < data.length; i++) {
                    $("#addlabel").append('<option value="' + data[i].groupid + '" data-attr="">' + data[i].name + '</option>')
                }
            }
        });

        $("#tagCacel").click(function () {
            $("#addlabelModal").modal('hide');
        })


        $("#batchFanssTag").click(function () {
            importExcel();
        })


        function importExcel() {
            var templateExcelUrl = "/schaeffler/static/batchfanss.xlsx";
            var importExcelUrl = "#springUrl('/a/managefanss/batchFanss')?_csrf_header=" + csrfheader.value + "&_csrf=" + csrftoken.value;


            Cfapp.importExcel({
                title: '批量打标签',
                importurl: importExcelUrl,
                templateurl: templateExcelUrl,
                cancel: function () {

                },
                success: function () {
                    //alert(data.retJson.errorNo)
                    location.href = "#springUrl('/a/managefanss/fansslist')";
                }
            });
        }


        $('.datepicker').datepicker({
            show: true,
            format: 'yyyy-mm-dd',
            autoclose: true,
            language: 'zh-CN',
            todayBtn: 'linked',
            clearBtn: 'linked'

        });
        var sSource = "#springUrl('/a/managefanss/fanss/fetchdata')";
        var aoData = {
            iDisplayStart: 1,
            iDisplayLength: 10
        };
        var retrieveData = function (sSource, aoData, fnCallback) {
            var source = "$!{mpFanssEntity.source}";
            $(".select2 option").each(function () {
                if ($(this).val() == source) {
                    $(this).attr("selected", "selected");
                }
            })
            $("#seachTableForm input,.select2").each(function () {
                var params = {
                    name: $(this).attr("name"),
                    value: $(this).val()
                };
                aoData.push(params);
            })
            $.ajax({
                "type": "GET",
                "contentType": "application/json",
                "url": sSource,
                "dataType": "json",
                "data": aoData, //以json格式传递
                "success": fnCallback
            });
        };

        $('#userlilst').DataTable({
            "lengthChange": false,
            "searching": false,
            "ordering": false,
            "bFiltered": false,
            "bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": sSource,
            "fnServerData": retrieveData,
            "pagingType": "full_numbers",
            "aoColumns": [
                {"mData": "id"},
                {"mData": "headimgurl"},
                {"mData": "sex"},
                {"mData": "openid"},
                {
                    "mData": "province",
                    "mRender": function (a, b, c, d) {//a表示id对应的值，c表示当前记录行对象
                        if (a) {
                            return a;
                        } else {
                            return "";
                        }
                    }
                },
                {
                    "mData": "city",
                    "mRender": function (a, b, c, d) {//a表示id对应的值，c表示当前记录行对象
                        if (a) {
                            return a;
                        } else {
                            return "";
                        }
                    }
                },
                {"mData": "nickname"},
                {
                    "mData": "tags",
                    "mRender": function (a, b, c, d) {//a表示id对应的值，c表示当前记录行对象
                        if (a) {
                            return a;
                        } else {
                            return "";
                        }
                    }
                },
                {
                    "mData": "source",
                    "mRender": function (a, b, c, d) {//a表示id对应的值，c表示当前记录行对象
                        if (a == '1') {
                            return "研讨会二维码";
                        } else if (a == '2') {
                            return "展会二维码";
                        } else if (a == '3') {
                            return "活动车辆";
                        } else {
                            return "普通关注";
                        }
                    }
                }
            ],
            "aoColumnDefs": [
                {  // set default column settings
                    'visible': false,
                    'targets': [0]
                },
                {
                    "targets": [1],
                    "mData": "headimgurl",
                    "className": "piccenter",
                    "mRender": function (a, b, c, d) {
                        //a表示id对应的值，c表示当前记录行对象
                        return '<img width="45px" height="45px" src="' + a + '" />';
                    }
                }
//      		                        ,{
//      		                        	"targets": [6],
//       		                            "mData": "nickname", 
//       		                            "mRender": function (a, b, c, d) 
//       		                            { 
//       		                            	a=decodeURIComponent(a);
//       		                            	//a表示id对应的值，c表示当前记录行对象
//       		                                return a;
//       		                            }
//      		                        }
                ,
                {
                    "targets": [2],
                    "mData": "sex",
                    "mRender": function (a, b, c, d) {//a表示id对应的值，c表示当前记录行对象
                        if (a == '1') {
                            return '男';
                        } else if (a == '0') {
                            return '女';
                        } else {
                            return '';
                        }
                    }
                },
                {
                    "aTargets": [9],
                    "mData": "subscribetime",
                    "mRender": function (a, b, c, d) {//a表示createtime对应的值，c表示当前记录行对象
                        return formatDates(a, "yyyy-MM-dd hh:mm:ss");
                    }
                }, {
                    "aTargets": [10],
                    "mData": "id",
                    "mRender": function (a, b, c, d) {//a表示createtime对应的值，c表示当前记录行对象
                        console.log(c);
                        return '#if($shiro.hasPermission("mp:fanss:edit"))' + '<a href="javascript:void(0)"; data-attr="' + c.id + '" data-tag="' + c.taglist + '"  onclick="addlabel(this)" class="btn red">修改标签</a>' +
                                '#else <a href="javascript:void(0)"; data-attr="' + c.id + '" data-tag="' + c.taglist + '" class="btn red">修改标签</a>#end';
                    }
                }]//,
//      		                        {
//      		                            "aTargets": [8],
//      		                            "mData": "id",
//      		                            "mRender": function (a, b, c, d) {//a表示id对应的值，c表示当前记录行对象

//      		                                var viewHTML = '<a href="#" data-id="'+a+'" data-action="view" class="btn green">查看</a>';
//      		                                if(c.delflag==0){
//      		                                	 var removeHTML = '<a href="#" data-id="'+a+'" data-action="remove" class="btn red">删除</a>';
//      		                                }else{
//      		                                	 var removeHTML = '<a href="javascript:void(0)" data-id="'+a+'" data-action="remove" class="btn red" style="color:red">已取消关注</a>';
//      		                                }
//      		                                return viewHTML+removeHTML;
//      		                            }
//      		                        }

        });

//     			$("#export").click(function(){
//        		     var url='/a/managefanss/fanss/export?code='+Math.random();
//     				var params;
//     				$("#seachTableForm input,.select2").each(function() {
//     					 if($(this).val()){
//     						 url=url+'&'+$(this).attr("name")+'='+$(this).val()
//     					 }
//     				});
//     				url="#springUrl('"+url+"')";
//     			 window.open(url);
//     			})
        $('.search').click(function () {
            $("#userlilst").dataTable().fnClearTable();
        });
    });


    var updateid = "";
    function addlabel(obj) {
        updateid = $(obj).attr("data-attr");
        var ids = $(obj).attr("data-tag").split(",");
        $("#addlabel option").attr("selected", false);
        $("#addlabel option").each(function (k, i) {
            if (ids.indexOf($(this).val()) >= 0) {
                $(this).attr("selected", true);
            }
        })
        $("#addlabelModal").modal('show');
        $(".select2").select2({
            maximumSelectionLength: 20
        });
    }
    function addlabelsubmit() {
        var values = $("#addlabel").val();
        if (!values) {
            values = "";
        } else {
            values = values.join(",");
        }
        url = "#springUrl('/a/managefanss/editlabel')";
        $.ajax({
            "type": "POST",
            "url": url,
            "dataType": "json",
            "data": {
                taglist: values,
                id: updateid,
                "_csrf_header": csrfheader.value, "_csrf": csrftoken.value
            },
            "success": function (data) {
                Cfapp.confirm({
                    message: "编辑成功",
                    btnoktext: "确定",
                    btncanceltext: "取消",
                    success: function () {
                        location.href = "#springUrl('/a/managefanss/fansslist')";
                    }, cancel: function () {
                        location.href = "#springUrl('/a/managefanss/fansslist')";
                    }
                })
                $("#addlabelModal").modal('hide');
            }
        });
    }
    $(".select2").select2({
        maximumSelectionLength: 20
    });
</script>
</body>
<!-- END BODY -->
</html>