{extend name="crm@Public/base" /}
{block name="css"}
<link rel="stylesheet" href="__PUBLIC__/item/css/layui.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/css/customer.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/css/set.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/wx/rha/admin/css/admin_base.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/wx/rha/admin/css/console.css?v={$Think.const.APP_VERSION}">
<style>
    .mobile-preview { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none;}
    .menu-editor { left: 317px; display: block; max-width: 500px; width: 500px; height: 580px; border-radius: 0; border-color: #e7e7eb; box-shadow: none}
    .menu-editor .arrow { top: auto !important; bottom: 15px}
    .menu-editor .popover-title { margin-top: 0}
    .menu-delete { font-weight: 400; font-size: 12px;}
    .menu-submit { margin-right: 10px}
    .form-horizontal span{display: none;}
</style>
{/block}

{block name="main"}
<script src="__PUBLIC__/wx/rha/jquery/jquery-1.11.0.min.js"></script>
<script src="__PUBLIC__/wx/rha/layui/layui.js"></script>
<script src="__PUBLIC__/wx/rha/amaze/js/amazeui.min.js"></script>
<div class="if_wrap">
    <div class="cus-con">
        <div class="set_tit"><span>会话配置</span></div>
        <div class="set-contain erp-set-wrap layui-form" id=''>
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">微信自定义菜单</li>
                    <li>自动回复</li>
                    <li>通知设置</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="mp-menu">
                            <div class='mobile-preview pull-left'>
                                <div class='mobile-header'>{$mpInfo.name}</div>
                                <div class='mobile-body'></div>
                                <ul class='mobile-footer'>
                                    {foreach $list as $menu}
                                    <li class="parent-menu">
                                        <a><i class="icon-sub hide"></i> <span data-type="{$menu.type}" data-content="{$menu.content}">{$menu.name}</span></a>
                                        <div class="sub-menu text-center hide">
                                            <ul>
                                                {if empty($menu['sub']) eq false}
                                                {foreach $menu.sub as $submenu}
                                                <li>
                                                    <a class="bottom-border"><span data-type="{$submenu.type}" data-content="{$submenu.content}">{$submenu.name}</span></a>
                                                </li>
                                                {/foreach}
                                                {/if}
                                                <li class="menu-add"><a><i class="icon-add"></i></a></li>
                                            </ul>
                                            <i class="arrow arrow_out"></i>
                                            <i class="arrow arrow_in"></i>
                                        </div>
                                    </li>
                                    {/foreach}
                                    <li class="parent-menu menu-add">
                                        <a><i class="icon-add"></i></a>
                                    </li>
                                </ul>
                            </div>
                            <div class="pull-left" style="position:absolute">
                                <div class="popover fade right up in menu-editor">
                                    <div class="arrow"></div>
                                    <h3 class="popover-title">
                                        菜单名称

                                        <a class="pull-right menu-delete">删除</a>

                                    </h3>
                                    <div class="popover-content menu-content"></div>
                                </div>
                            </div>
                            <div class="hide menu-editor-parent-tpl">
                                <form class="layui-form">
                                    <p>已添加子菜单，仅可设置菜单名称。</p>
                                    <div class="layui-form-item" style="margin-top:50px">
                                        <label class="layui-form-label">菜单名称</label>
                                        <div class="layui-input-block">
                                            <input name="menu-name" class="layui-input">
                                            <span class="layui-form-mid layui-word-aux">字数不超过5个汉字或16个字母</span>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="hide menu-editor-content-tpl layui-form">
                                <form class="form-horizontal ">
                                    <div class="layui-form-item" style="margin-top:50px">
                                        <label class="layui-form-label">菜单名称</label>
                                        <div class="layui-input-block">
                                            <input name="menu-name" class="layui-input">
                                            <span class="layui-form-mid layui-word-aux">字数不超过13个汉字或40个字母</span>
                                        </div>
                                    </div>
                                    <div class="layui-form-item" style="margin-top:30px">
                                        <label class="layui-form-label">菜单内容</label>
                                        <div class="layui-input-block">
                                            <!--<label class="col-xs-5 font-noraml">-->
                                            <!--<input class="cuci-radio" type="radio" name="menu-type" value="text"> 文字消息-->
                                            <!--</label>-->
                                            <label class="col-xs-5 font-noraml">
                                                <input class="cuci-radio" type="radio" name="menu-type" value="click"> 关键字
                                                <!-- <input class="cuci-radio" type="radio" name="menu-type" value="keys"> 关键字 -->
                                            </label>
                                            <label class="col-xs-5 font-noraml">
                                                <input class="cuci-radio" type="radio" name="menu-type" value="view"> 跳转网页
                                            </label>
                                            <!-- <label class="col-xs-5 font-noraml">
                                                <input class="cuci-radio" type="radio" name="menu-type" value="event"> 事件功能
                                            </label> -->
                                            <!-- <label class="col-xs-5 font-noraml">
                                                <input class="cuci-radio" type="radio" name="menu-type" value="miniprogram"> 小程序
                                            </label> -->
                                            <!--<label class="col-xs-5 font-noraml">-->
                                            <!--<input class="cuci-radio" type="radio" name="menu-type" value="customservice"> 多客服-->
                                            <!--</label>-->
                                        </div>
                                    </div>
                                    <div class="layui-form-item editor-content-input" style="margin-top:30px"></div>
                                </form>
                            </div>
                            <div style="clear:both"></div>
                            <div style="width:830px;padding-top:40px;text-align:center">
                                <button class="layui-btn menu-submit" lay-filter="formDemo">保存发布</button>
                                <button data-load='{//:url("$classuri/cancel")}' class="layui-btn layui-btn-danger">取消发布</button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-inline">
                                <!-- <button class="layui-btn fp-btn" id="addAuto" data-type="addAuto">添加自动回复</button> -->
                                <div class="layui-inline">
                                    <div class="layui-input-inline" style="width: 150px;">
                                        <input type="text" id="auto_name" class="layui-input" placeholder="根据关键词/规则名称">
                                    </div>
                                    <button class="layui-btn" id="btn_autoAnswer" style="margin-left: 10px">查询</button>
                                    <button class="layui-btn" id="set_btn_autoAnswer" style="margin-left: 10px">拉取自动回复</button>
                                </div>
                                <table class="layui-table" lay-data="{height:500,limit:200, url:'/weixin/Weixin/getAutoAnswerJson.html',page:false,id:'idAuto'}" lay-filter="demoAuto">
                                    <thead>
                                    <tr>
                                        <th lay-data="{width:100,align:'center',field:'id',align:'center',templet: '#titleTplAuto'}">序号</th>
                                        <th lay-data="{width:100,align:'center',field:'auto_type', toolbar: '#auto_type'}">类型</th>
                                        <th lay-data="{width:200,align:'center',field:'auto_name'}">规则名称</th>
                                        <th lay-data="{width:200,align:'center',field:'answer_type', toolbar: '#answer_type'}">回复方式</th>
                                        <th lay-data="{width:200,align:'center',field:'id', toolbar: '#autoAction'}">操作</th>
                                    </tr>
                                    </thead>
                                </table>
                                <div id="rep" style="width: auto;height: auto;background-color: #00a0e8;"></div>
                            </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 130px;">新客户提醒：</label>
                            <div class="layui-input-block check">
                                {volist name="staff" id="s"}
                                <input type='checkbox' name='kf_name' class='kf_name'  title="{$s.staffname}" value="{$s.id}" {if condition="in_array($s.id,$staff_id)"}checked{/if}>
                                {/volist} 
                                <span class="layui-btn" id="remind_btn">确定</span>
                            </div>
                            <hr> 选中的人为有新客户时弹窗通知的人
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 自定义菜单js -->
<script>
layui.use(['layer','form'],function(){
    var form = layui.form;
    var layer = layui.layer;
    //刷新界面 所有元素
    $(function () {
        /**
         * 菜单事件构造方法
         * @returns {menu.index_L2.menu}
         */
        var menu = function () {
            this.version = '1.0';
            this.$btn;
            this.listen();
        };
        /**
         * 控件默认事件
         * @returns {undefined}
         */
        // var layer;
        // var form;
        // layui.use('layer','form', function(){
        //      layer = layui.layer;
        // });
        menu.prototype.listen = function () {
            var self = this;
            $('.mobile-footer').on('click', 'li a', function () {
                self.$btn = $(this);
                self.$btn.parent('li').hasClass('menu-add') ? self.add() : self.checkShow();
            }).find('li:first a:first').trigger('click');
            $('.menu-delete').on('click', function () {
                var index = layer.confirm('确定删除吗？', function () {
                    self.del(), layer.close(index);
                });
            });
            $('.menu-submit').on('click', function () {
                self.submit();
            });
        };
        /**
         * 添加一个菜单
         * @returns {undefined}
         */
        menu.prototype.add = function () {
            var $add = this.$btn.parent('li'), $ul = $add.parent('ul');
            if ($ul.hasClass('mobile-footer')) { /* 添加一级菜单 */
                var $li = $('<li class="parent-menu"><a class="active"><i class="icon-sub hide"></i> <span>一级菜单</span></a></li>').insertBefore($add);
                this.$btn = $li.find('a');
                $('<div class="sub-menu text-center hide"><ul><li class="menu-add"><a><i class="icon-add"></i></a></li></ul><i class="arrow arrow_out"></i><i class="arrow arrow_in"></i></div>').appendTo($li);
            } else { /* 添加二级菜单 */
                this.$btn = $('<li><a class="bottom-border"><span>二级菜单</span></a></li>').prependTo($ul).find('a');
            }
            this.checkShow();
        };
        /**
         * 数据校验显示
         * @returns {unresolved}
         */
        menu.prototype.checkShow = function () {
            var $li = this.$btn.parent('li'), $ul = $li.parent('ul');
            /* 选中一级菜单时显示二级菜单 */
            if ($li.hasClass('parent-menu')) {
                $('.parent-menu .sub-menu').not(this.$btn.parent('li').find('.sub-menu').removeClass('hide')).addClass('hide');
            }

            /* 一级菜单添加按钮 */
            var $add = $('li.parent-menu:last');
            $add.siblings('li').size() >= 3 ? $add.addClass('hide') : $add.removeClass('hide');
            /* 二级菜单添加按钮 */
            $add.siblings('li').map(function () {
                var $add = $(this).find('ul li:last');
                $add.siblings('li').size() >= 5 ? $add.addClass('hide') : $add.removeClass('hide');
            });
            /* 处理一级菜单 */
            var parentWidth = 100 / $('li.parent-menu:visible').size() + '%';
            $('li.parent-menu').map(function () {
                var $icon = $(this).find('.icon-sub');
                $(this).width(parentWidth).find('ul li').size() > 1 ? $icon.removeClass('hide') : $icon.addClass('hide');
            });
            /* 更新选择中状态 */
            $('.mobile-footer a.active').not(this.$btn.addClass('active')).removeClass('active');
            this.renderEdit();

            form.render();
            return $ul;
        };
        /**
         * 删除当前菜单
         * @returns {undefined}
         */
        menu.prototype.del = function () {
            var $li = this.$btn.parent('li'), $ul = $li.parent('ul');
            var $default = function () {
                if ($li.prev('li').size() > 0) {
                    return $li.prev('li');
                }
                if ($li.next('li').size() > 0 && !$li.next('li').hasClass('menu-add')) {
                    return $li.next('li');
                }
                if ($ul.parents('li.parent-menu').size() > 0) {
                    return $ul.parents('li.parent-menu');
                }
                return $('null');
            }.call(this);
            $li.remove();
            this.$btn = $default.find('a:first');
            this.checkShow();

        };
        /**
         * 显示当前菜单的属性值
         * @returns {undefined}
         */
        menu.prototype.renderEdit = function () {
            var $span = this.$btn.find('span'), $li = this.$btn.parent('li'), $ul = $li.parent('ul');
            var $html = '';
            if ($li.find('ul li').size() > 1) { /*父菜单*/
                $html = $($('.menu-editor-parent-tpl').html());
                $html.find('input[name="menu-name"]').val($span.text()).on('change keyup', function () {
                    $span.text(this.value || ' ');
                });
                $('.menu-editor .menu-content').html($html);
            } else {
                $html = $($('.menu-editor-content-tpl').html());
                $html.find('input[name="menu-name"]').val($span.text()).on('change keyup', function () {
                    $span.text(this.value || ' ');
                });
                $('.menu-editor .menu-content').html($html);
                var type = $span.attr('data-type') || 'text';
                $html.find('input[name="menu-type"]').on('click', function () {
                    $span.attr('data-type', this.value || 'text');
                    var content = $span.data('content') || '';
                    var type = this.value;
                    var html = function () {
                        switch (type) {
                            case 'miniprogram':
                                var tpl = '<div><div class="layui-form-item"><label class="layui-form-label">appid</label><div class="layui-input-block"><input type="text" name="appid" required="" lay-verify="required" placeholder="appid" autocomplete="off" class="layui-input" value="{appid}"></div></div><div class="layui-form-item"><label class="layui-form-label">url</label><div class="layui-input-block"><input type="text" name="url" required="" lay-verify="required" placeholder="url" autocomplete="off" class="layui-input" value="{url}"></div></div><div class="layui-form-item"><label class="layui-form-label">pagepath</label><div class="layui-input-block"><input type="text" name="pagepath" required="" lay-verify="required" placeholder="pagepath" autocomplete="off" class="layui-input" value="{pagepath}"></div></div></div>';
                                var _appid = '', _pagepath = '', _url = '';
                                if (content.indexOf(',') > 0) {
                                    _appid = content.split(',')[0] || '';
                                    _url = content.split(',')[1] || '';
                                    _pagepath = content.split(',')[2] || '';
                                }
                                $span.data('appid', _appid), $span.data('url', _url), $span.data('pagepath', _pagepath);
                                return tpl.replace('{appid}', _appid).replace('{url}', _url).replace('{pagepath}', _pagepath);
                            case 'customservice':
                            case 'text':
                                return '<div>回复内容<textarea style="resize:none;height:225px" name="content" class="form-control input-sm">{content}</textarea></div>'.replace('{content}', content);
                            case 'view':
                                return '<div class="layui-form-item layui-form-text"><label class="layui-form-label">跳转地址</label><div class="layui-input-block"><textarea placeholder="请输入内容" class="layui-textarea" name="content">{content}</textarea></div></div>'.replace('{content}', content);
                            case 'click':
                            // case 'keys':
                                return '<div class="layui-form-item layui-form-text"><label class="layui-form-label">匹配内容</label><div class="layui-input-block"><textarea placeholder="请输入内容" class="layui-textarea" name="content">{content}</textarea></div></div>'.replace('{content}', content);
                            case 'event':
                                var options = {
                                    'scancode_push': '扫码推事件',
                                    'scancode_waitmsg': '扫码推事件且弹出“消息接收中”提示框',
                                    'pic_sysphoto': '弹出系统拍照发图',
                                    'pic_photo_or_album': '弹出拍照或者相册发图',
                                    'pic_weixin': '弹出微信相册发图器',
                                    'location_select': '弹出地理位置选择器'};
                                var select = [], tpl = '<div class="layui-form-item layui-form-text" style="margin-bottom: auto;"><label class="layui-form-label"></label><div><label><input class="cuci-radio" name="content" type="radio" {checked} value="{value}"> {title}</label></div></div>';
                                if (!(options[content] || false)) {
                                    content = 'scancode_push';
                                    $span.data('content', content);
                                }
                                for (var i in options) {
                                    select.push(tpl.replace('{value}', i).replace('{title}', options[i]).replace('{checked}', (i === content) ? 'checked' : ''));
                                }
                                return select.join('');
                        }
                    }.call(this);
                    var $html = $(html), $input = $html.find('input,textarea');
                    $input.on('change keyup click', function () {
                        // 将input值写入到span上
                        $span.data(this.name, $(this).val() || $(this).html());
                        // 如果是小程序，合并内容到span的content上
                        if (type === 'miniprogram') {
                            $span.data('content', $span.data('appid') + ',' + $span.data('url') + ',' + $span.data('pagepath'));
                        }
                    });
                    $('.editor-content-input').html($html);
                }).filter('input[value="{type}"]'.replace('{type}', type)).trigger('click');
            }
        };
        /**
         * 提交数据
         * @returns {undefined}
         */
        menu.prototype.submit = function () {
            var data = [];
            function getdata($span) {
                var menudata = {};
                menudata.name = $span.text();
                menudata.type = $span.attr('data-type');
                menudata.content = $span.data('content') || '';
                return menudata;
            }

            $('li.parent-menu').map(function (index, item) {
                if (!$(item).hasClass('menu-add')) {
                    var menudata = getdata($(item).find('a:first span'));
                    menudata.index = index + 1;
                    menudata.pindex = 0;
                    menudata.sub = [];
                    menudata.sort = index;
                    data.push(menudata);
                    $(item).find('.sub-menu ul li:not(.menu-add) span').map(function (ii, span) {
                        var submenudata = getdata($(span));
                        submenudata.index = (index + 1) + '' + (ii + 1);
                        submenudata.pindex = menudata.index;
                        submenudata.sort = ii;
                        data.push(submenudata);
                    });
                }
            });
            layer.confirm('你确定要更新公众号的微信菜单吗？', function (index) {
                console.log(data);
                $.ajax({
                    type:'post',
                    url:"{:url('weixin/Weixin/setmenutowx')}",
                    data: {menu:data},
                    dataType: 'json',
                    success:function(res){
                        if(res.code==200){
                            layer.res(res.msg, {
                                icon: 1
                            });
                        }else{
                            layer.msg(res.msg, {
                                icon: 2
                            });
                        }
                    }
                });
            })
            /*
            console.log(data);return;
            var data = (data == '')?'':data;
            var load = layer.load(1);
            $.post(
                '{:url("mp/Mp/menuedit")}',
                {data:data},
                function (res) {
                    if(res.status=='0'){
                        layer.close(load);
                        layer.alert(res.msg);
                    }
                    if(res.status=='1'){
                        layer.close(load);
                        layer.msg(res.msg,{time:1000},function () {

                        });
                    }
                },
                "json"
            )
            */
        };
        new menu();
    });
    // 重新获取公众号自动回复
    $('#set_btn_autoAnswer').on('click',function(){
        layer.confirm('重新获取公众号自动回复，将 覆盖 目前设定，请确认！', function (index) {
            var shadow = layer.load(1, {shade: false});
            $.ajax({
                type:'post',
                url:"{:url('weixin/Weixin/geWxtAutoAnswer')}",
                success:function(s){
                    if(s.code==200){
                        layer.msg(s.msg, {
                            icon: 1
                        });
                    }else{
                        layer.msg(s.msg, {
                            icon: 2
                        });
                    }
                    layer.close(shadow);
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    var ret = XMLHttpRequest.responseJSON
                    layer.alert('操作失败');
                    layer.close(shadow);
                }
            });
        })
    });
    $('#remind_btn').click(function(){
        var staff_id = '';
        // 遍历name=customer_type的多选框
        $("input:checkbox[name=kf_name]:checked").each(function() {
            if($(this).val() != undefined && $(this).val()!= ''){
                staff_id =  staff_id==""?$(this).val():staff_id+','+$(this).val();
            }
        });
        $.ajax({
            type: "POST",
            url: "/weixin/Weixin/talkSetting",
            data: {staff_id:staff_id},
            dataType: 'json',
            success: function (ret) {
                if (ret.code == 200) {
                    layer.alert(ret.msg);
                } else {
                    layer.alert(ret.msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                var ret = XMLHttpRequest.responseJSON;
                layer.alert('操作失败');
            }
        })
    })
});
</script>
{/block}