<!DOCTYPE html>
<!--[if IE 8]>
<html lang="en" class="ie8 no-js">
<![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9 no-js">
<![endif]-->
<!--[if !IE]><!-->
<html>
<!--<![endif]-->
<!-- BEGIN HEAD -->

<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">
    <!-- 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-wysihtml5/bootstrap3-wysihtml5.min.css">
    <!--validate css-->
    <link rel="stylesheet" href="plugins/jquery-validation/css/validate.css">
    <!--fileinput css-->
    <link rel="stylesheet"
          href="plugins/ztree/css/metroStyle/metroStyle.css" type="text/css"/>
    <link rel="stylesheet"
          href="plugins/bootstrap-fileinput/bootstrap-fileinput.css">
    <link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
    <link rel="stylesheet"
          href="plugins/daterangepicker/daterangepicker-bs3.css">
    <!-- 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]-->
    <style type="text/css"></style>

    <style>
        .datepicker.dropdown-menu {
            z-index: 100000 !important
        }

        .list-group {
            width: 30%;
        }
    </style>
</head>
<!-- END HEAD -->

<body class="hold-transition skin-blue sidebar-mini">

<div id="hiddenDiv" style="display:none">$!{imageText.content}</div>

<div class="wrapper">
    <div id="treeSelect"></div>
    <div class="content-wrapper" style="margin-left: 0;">
        <section class="content-header">
            <h1>
                消息回复管理
                <small>消息回复设置</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"> <i class="fa fa-dashboard"></i>首页
                </a></li>
                <li><a class="active">消息回复管理</a></li>
            </ol>
        </section>
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box box-primary">
                        <form role="form" id="replyForm">
                            <div class="box-body">
                                <input type="hidden" id="updateId">
                                <div class="form-group form-md-line-input">
                                    <label>消息来源类型</label>
                                    <div class="radio">
                                        <label> <input type="radio" name="sendType"
                                                       checked value="subscribe">关注回复
                                        </label><label><input type="radio" name="sendType"
                                                              value="keyword">关键字回复
                                    </label>
                                    </div>
                                </div>
                                <div class="form-group form-md-line-input" id="keywordTemp" style="display:none;">
                                    <div class="radio">
                                        是否完全匹配 (是:粉丝发送的消息与关键字一模一样时,回复消息,否:关键字包含粉丝发送的消息时,回复消息)<br/>
                                        <label><input type="radio" name="isAll"
                                                      checked value="all">是</label>
                                        <label><br/>
                                            <input type="radio" name="isAll"
                                                   value="like">否
                                        </label>
                                    </div>
                                    <label>关键字内容</label>
                                    <input name="keyword" id="keyword" class="form-control">
                                </div>
                                <div class="form-group form-md-line-input">
                                    <label>消息回复类型</label>
                                    <div class="radio">

                                        <label> <input
                                                type="radio" name="replyType" id="replyTypeText"
                                                value="text" checked>文本
                                        </label> <label> <input type="radio" name="replyType"
                                                                id="replyTypenews" value="news">图文
                                    </label>
                                        <label> <input type="radio" name="replyType"
                                                       id="replyTypeLocalnews" value="article">文章
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group form-md-line-input" id="contentText">
                                    <label for="content_source">文本内容</label>
                                    <br/>
                                    <textarea name="content_source" id="content_source" maxlength="500" rows="5"
                                              cols="100"></textarea>
                                </div>

                                <div class="form-group form-md-line-input" id="contentnews" style="display:none">
                                    <label for="content_source">图文选择</label>
                                    <a id="newseach" href="javascript:void(0)"
                                       class="btn btn-primary">选择微信图文 </a>
                                    <input type="hidden" value="" id="imgtext">
                                    <br/>
                                </div>
                                <div class="form-group form-md-line-input" id="contentlocalnews" style="display:none">
                                    <label for="content_source">文章选择</label>
                                    <a id="localnewssearch" href="javascript:void(0)"
                                       class="btn btn-primary">选择文章 </a>
                                    <input type="hidden" value="" id="localArticle">
                                    <br/>
                                </div>
                                <input name="articleId" id="articleId" style="display: none;">
                                <input name="articleName" id="articleName" style="display: none;">
                                <div style="display: none;width: 100%;height: auto" id="newsShow">
                                </div>
                                <div class="box-footer">
                                    <input class="btn btn-primary" id="save" value="保存"
                                           type="submit"> <a href="#springUrl('/a/wx/reply/list')"
                                                             class="btn btn-default">取消</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.min.js"></script>
<!--fileinput js-->
<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables/extensions/i18n/lanauage_ch.js"></script>
<script src="plugins/bootstrap-fileinput/bootstrap-fileinput.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<script src="plugins/bootstrap-maxlength/bootstrap-maxlength.min.js"
        type="text/javascript"></script>
<script src="plugins/security/sha256.js" type="text/javascript"></script>
<script src="plugins/ztree/js/jquery.ztree.all.min.js"
        type="text/javascript"></script>
<script src="plugins/jquery-validation/js/jquery.validate.min.js"></script>
<script src="js/jquery.form.min.js"></script>
<!-- Uedit Start -->
<script type="text/javascript" charset="utf-8"
        src="plugins/ueditor-min-1.4.3/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8"
        src="plugins/ueditor-min-1.4.3/ueditor.all.js"></script>
<!-- Uedit End -->
<script type="text/javascript" charset="utf-8"
        src="plugins/ueditor-min-1.4.3/lang/zh-cn/zh-cn.js"></script>
<script src="common/js/cfapp.js"></script>
<script src="common/js/dateUtils.js"></script>
<script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script type="text/javascript" src="common/js/seachImageText.js"></script>
<!-- END PAGE LEVEL PLUGINS -->

<script>
    var csrfheader = {name: '_csrf_header', value: '${_csrf.headerName}'};
    var csrftoken = {name: '_csrf', value: '${_csrf.token}'};
</script>
<script>
    var articleList = "#springUrl('/a/article/newsList')";
    var localArticleList = "#springUrl('/a/cfarticle/listData')";//文章图文列表

    var cfarticleOrderList = "#springUrl('/a/cfarticle/listDataInOrder')"; //获取
    if ("$!{reply.replyType}" == "text") {
        $("#content_source").val("$!{reply.contentSource}".replace(/<br\/>/g, "\r\n"));
    }
    if ("$!{reply.id}" != null && "$!{reply.id}" != "") {
        $("#updateId").val("$reply.id");
        if ("$reply.sendType" == "keyword") {//如果为关键字消息时，需要填充是否完全匹配及关键字
            $("#keyword").val("${reply.keyword}");
            $("input[name='isAll'][value='$!{reply.keywordIsAll}']").prop("checked", true);
            $("#keywordTemp").show();
        }
        if ("$reply.replyType" == 'news') {
            var selectImageText = "";
            var ls = $reply.newsItem;
            if (ls != "") {
                selectImageText = ls;//已经选择好的微信素材内容
            }

            $("#articleId").val("$!{reply.contentSource}");//选择好的微信素材mediaID
            var HTML = "<div class='list-group'>";
            if (selectImageText) {
                for (var i = 0; i < selectImageText.length; i++) {
                    HTML += "<p class='list-group-item'>" + (i + 1) + ":<a href='" + selectImageText[i].url + "' target='_blank'>" + selectImageText[i].title + "</a></p>";
                }
                HTML += "</div>";
            }
            $("#newsShow").html(HTML);
            $("#newsShow").show();
            $("#contentnews").show();
            $("#contentText").hide();
        } else if ("$reply.replyType" == 'article') {//文章图文
            $("#articleId").val("$!{reply.contentSource}");//选择好的微信素材mediaID
            var HTML = "";
            var nameValue = "";
            if ("$!{reply.contentSource}" && "$!{reply.contentSource}" != '') {
                $.ajax({
                    type: "POST",
                    url: cfarticleOrderList,
                    data: {whereArticles: "$!{reply.contentSource}", articles: "$!{reply.contentSource}"},
                    datatype: "json",
                    //在请求之前调用的函数
                    beforeSend: function () {

                    }, success: function (data) {
                        if (data.list) {
                            for (var i = 0; i < data.list.length; i++) {
                                nameValue += "<p class='list-group-item'>" + data.list[i].title + "</p>,";
                                HTML += "<p class='list-group-item'>" + data.list[i].title + "</p>";
                            }
                            $("#articleName").val(nameValue);
                            var html = "<div class='list-group'>";
                            html += HTML;
                            html += "</div>";
                            $("#newsShow").html(html);

                        }
                    }, error: function () {
                    }
                });
            }
            $("#newsShow").show();
            $("#contentlocalnews").show();
            $("#contentText").hide();

        } else {
            $("#content_source").val("$!{reply.contentSource}".replace(/<br\/>/g, "\r\n"));
        }

        //将radio值填充并选中
        $("input[name='replyType'][value='$!{reply.replyType}']").prop("checked", true);
        $("input[name='sendType'][value='$!{reply.sendType}']").prop("checked", true);
    }
    Cfapp.init();


    $('#newseach').on('click', function () {
        Cfapp.f7({
            dataUrl: articleList,
            checkType: 'single', // 多选为multi
            title: "选择微信图文",
            btnoktext: "确定",
            btncanceltext: "取消",
            columns: ['选择', '图文标题', '最后更新时间'],
            isSearch: '1',
            aoColumns: [{
                "mData": "media_id"
            }, {
                "mData": "title"
            }, {
                "mData": "wxUpdateTime"
            }],
            aoColumnDefs: [{
                "aTargets": [0],
                "mData": "media_id",
                "mRender": function (a, b, c, d) {//a表示createtime对应的值，c表示当前记录行对象
                    var HTML = "";
                    if (c.news_item) {
                        c.news_item = eval(c.news_item);
                        for (var i = 0; i < c.news_item.length; i++) {
                            HTML += "<p class='list-group-item'>" + (i + 1) + ":<a href='" + c.news_item[i].url + "' target='_blank'>" + c.news_item[i].title + "</a></p>";
                        }
                    }
                    return '<input type="radio" id="' + a + '" name="sel" data-value="' + a + '" data-name="' + HTML + '">';
                }
            }, {
                "aTargets": [1],
                "mData": "id",
                "mRender": function (a, b, c, d) {//a表示createtime对应的值，c表示当前记录行对象
                    var HTML = "";
                    if (c.news_item) {
                        c.news_item = eval(c.news_item);
                        for (var i = 0; i < c.news_item.length; i++) {
                            HTML += "<p>" + (i + 1) + ":<a target='_blank' href='" + c.news_item[i].url + "'>" + c.news_item[i].title + "</a></p>";
                        }
                    }
                    return HTML;

                }
            }, {
                "aTargets": [2],
                "mData": "wxUpdateTime",
                "mRender": function (a, b, c, d) {//a表示createtime对应的值，c表示当前记录行对象
                    return dataUtils.dateFormat(a.time, "yyyy-MM-dd hh:mm");
                }
            }],
            success: function () {
                var html = '<div class="list-group">';
                html += $("#articleName").val() + '</div>';
                $("#newsShow").html(html);
                $("#newsShow").show();
            },
            cancel: function () {

            },
            storeFields: 'articleId', // 储存的字段
            displayFields: 'articleName'
        })
    });


    $('#localnewssearch').on('click', function () {
        Cfapp.f7({
            dataUrl: localArticleList,
            checkType: 'multi', // 多选为multi
            title: "选择文章",
            btnoktext: "确定",
            btncanceltext: "取消",
            columns: ['选择', '文章标题', '所属栏目', '文章封面', '文章类型'],
            isSearch: '0',
            searchColumns: ["title", "columnName"],//搜索的字段名称
            searchColumnsRemarks: ['文章标题', '所属栏目'],//搜索的字段备注
            aoColumns: [{
                "mData": "id"
            }, {
                "mData": "title"
            }, {
                "mData": "columnName"
            }, {
                "mData": "bigimg"
            }, {
                "mData": "type"
            }],
            aoColumnDefs: [{
                "aTargets": [0],
                "mData": "id",
                "mRender": function (a, b, c, d) {
                    var HTML = "<p class='list-group-item'>" + c.title + "</p>";
                    return '<input type="checkbox" id="' + a + '" name="sel" data-value="' + a + '" data-name="' + HTML + '">';
                }
            }, {
                "aTargets": [3],
                "mData": "img",
                "mRender": function (a, b, c, d) {//a表示createtime对应的值，c表示当前记录行对象
                    return "<img src='" + a + "' style='width: 80px;height:80px;' />";
                }
            }, {
                "aTargets": [4],
                "mData": "type",
                "mRender": function (a, b, c, d) {//a表示createtime对应的值，c表示当前记录行对象
                    if (a == 0) {
                        return "文章";
                    } else {
                        return "图集";
                    }
                }
            }],
            success: function () {
                var html = '<div class="list-group">';
                html += $("#articleName").val().replace(/<\/p>,/g, "</p>") + '</div>';
                $("#newsShow").html(html);
                $("#newsShow").show();
            },
            cancel: function () {

            },
            storeFields: 'articleId', // 储存的字段
            displayFields: 'articleName'
        })
    });


    function formatDates(now) {
        var now = new Date(now);
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var date = now.getDate();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        return year + "-" + month + "-" + date + "   " + hour + ":"
                + minute + ":" + second;
    }

    $("input[name='replyType']").change(function () { //回复类型，radio联动事件
        if ($(this).val() == "news") {
            $("#newsShow").html("");
            $("#articleId").val("");
            $("#articleName").val("");
            $("#contentnews").show();
            $("#contentText").hide();
            $("#contentlocalnews").hide();//选择文章按钮
        } else if ($(this).val() == "article") {
            $("#contentnews").hide();//图文选择按钮
            $("#contentText").hide(); //文本
            $("#contentlocalnews").show();//选择文章按钮
            $("#newsShow").html("");
            $("#articleId").val("");
            $("#articleName").val("");
        } else {
            $("#contentText").show();
            $("#contentlocalnews").hide();//选择文章按钮
            $("#contentnews").hide();

        }
    });


    $("input[name='sendType']").change(function () {//来源类型 ,radio联动事件
        if ($(this).val() == "subscribe") {//关注
            $("#keywordTemp").hide();

        } else if ($(this).val() == "keyword") {//关键字
            $("#keywordTemp").show();
        } else {

        }
    })

    //var html="<div><p style='color:#000;font-size:15px;'>"+1234+"</p><p style='color:#666;font-size:12px;'>"+10月30+"</p><img style='width:200px;height:120px;' src='http://upload.cankaoxiaoxi.com/2016/1027/1477536068373.jpg'/><p style='color:#666;font-size:14px;'>"+123456789+"</p><p style='color:#000;font-size:13px;'>阅读全文</p></div>";
    $().ready(function () {
        $("#replyForm").validate({
            submitHandler: function (form) {

                if ($("input[name='sendType']:checked").val() == "keyword" && ($("#keyword").val() == null || $("#keyword").val() == "")) {//关注回复
                    var HTML = "<label id='content-error' class='error' for='content'>请输入关键字</label>";
                    $("#keywordTemp").after(HTML);
                    return false;
                }

                var content = "";
                if ($("input[name='replyType']:checked").val() == "text") {//回复文本
                    if ($("#content_source").val()) {
                        content = {
                            id: $("#updateId").val(),
                            contentSource: $("#content_source").val(),
                            sendType: $("input[name='sendType']:checked").val(),
                            keyword: $("#keyword").val(),
                            keywordIsAll: $("input[name='isAll']:checked").val(),
                            replyType: $("input[name='replyType']:checked").val()
                        };
                    } else {
                        var HTML = "<label id='content-error' class='error' for='content'>请输入文本内容</label>";
                        $("#content_source").after(HTML);
                        return false;
                    }
                } else if ($("input[name='replyType']:checked").val() == "news") {//选择的图文
                    selectImageText = $("#articleId").val();
                    if (selectImageText != null && selectImageText != "") {
                        $("#imgtext").val(selectImageText);
                        content = {
                            id: $("#updateId").val(),
                            contentSource: selectImageText,
                            sendType: $("input[name='sendType']:checked").val(),
                            keyword: $("#keyword").val(),
                            keywordIsAll: $("input[name='isAll']:checked").val(),
                            replyType: $("input[name='replyType']:checked").val()
                        };
                        $("#content_source").val("");  //清空文本消息
                    } else {
                        var HTML = "<label id='content-error' class='error' for='content'>请选择微信图文</label>";
                        $("#contentnews").after(HTML);
                        return
                    }
                } else if ($("input[name='replyType']:checked").val() == "article") {
                    if ($("#articleId").val() == null || $("#articleId").val() == "") {
                        var HTML = "<label id='content-error' class='error' for='content'>请选择文章</label>";
                        $("#contentlocalnews").after(HTML);
                        return false;
                    } else {
                        sourceContent = $("#articleId").val();
                        content = {
                            id: $("#updateId").val(),
                            contentSource: sourceContent,
                            sendType: $("input[name='sendType']:checked").val(),
                            keyword: $("#keyword").val(),
                            keywordIsAll: $("input[name='isAll']:checked").val(),
                            replyType: $("input[name='replyType']:checked").val()
                        };
                    }
                }
                if (content != null) {

                    content._csrf_header = csrfheader.value;
                    content._csrf = csrftoken.value;

                    $.ajax({
                        type: "POST",
                        url: "#springUrl('/a/wx/reply/addreply')",
                        data: content,
                        datatype: "json",
                        //在请求之前调用的函数
                        beforeSend: function () {

                        }, success: function (data) {
                            if (data.errorNo == 0) {
                                Cfapp.confirm({
                                    message: "添加成功",
                                    btnoktext: "继续添加",
                                    btncanceltext: "关闭",
                                    success: function () {
                                        location.reload();
                                    },
                                    cancel: function () {
                                        location.href = "#springUrl('/a/wx/reply/list')";
                                    }
                                })
                            } else if (data.errorNo == 2) {
                                Cfapp.alert({
                                    message: "修改成功",
                                    btntext: "确定",
                                    success: function () {
                                        location.href = "#springUrl('/a/wx/reply/list')";
                                    }
                                })
                            } else if (data.errorNo == 3) {
                                Cfapp.alert({
                                    message: "关注回复不可存在多条",
                                    btntext: "确定",
                                    success: function () {

                                    }
                                })
                            }
                        }, error: function () {
                            Cfapp.alert({
                                message: "编辑失败",
                                btntext: "确定",
                                success: function () {
                                    location.href = "#springUrl('/a/wx/reply/list')";
                                }
                            })
                        }
                    });
                }
            }
        });


    });</script>
</body>
<!-- END BODY -->
</html>