<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>KGCMS企业应用管理平台 - Powered by KGCMS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<!-- <meta http-equiv="cache-control" content="no-siteapp" /> -->
<link rel="stylesheet" href="{{ kg['tpl_url'] }}style/wx_cs_manage.css">
<script src="{{ kg['tpl_url'] }}script/jquery.min.js"></script>
<script src="{{ kg['server']['HTTP_HOST'] }}/tools/amazeui/js/amazeui.min.js"></script>
<script src="{{kg['tpl_url']}}script/common.js"></script>
<script src="{{kg['tpl_url']}}script/wx_cs_manage.js"></script>
</head>
<body data-type="generalComponents">
    {% include 'component_header.tpl' %}
    <div class="tpl-page-container tpl-page-header-fixed">
		<div class="scrollbar-wrap">
        {% include 'component_left.tpl' %}
        <div class="tpl-content-wrapper">
            <div class="tpl-content-page-title">
                客服管理
            </div>
            <ol class="am-breadcrumb">
                <li><a href="./" class="am-icon-home">首页</a></li>
                <li class="am-active">客服管理</li>
            </ol>
            <div class="tpl-portlet-components">
                <div class="portlet-title">
                    <div class="caption font-green bold">
                        <span class="am-icon-code"></span>&nbsp;微信客服管理({{data|length}}/100)
                    </div>
                    <div class="ngar-xiugai-width portlet-input input-small input-inline " style="float: right;">
                        <div class="input-icon right am-fr top-1">
                            <div class="am-btn-group am-btn-group-xs">
                                <a href="wx_cs_manage?action=syn" target="_blank" class="am-btn am-btn-secondary ng-add-hightB"><span class="am-icon-search"></span>&nbsp;同步数据</a>
                                <a class="am-btn am-btn-default am-btn-success" href="wx_cs_group_manage"><span class="am-icon-recycle"></span>&nbsp;分组管理</a>
                                <a class="am-btn am-btn-default am-btn-warning" href="wx_cs_update"><span class="am-icon-plus"></span>&nbsp;添加客服</a>
                                <a href="javascript:void(0)"  class="am-btn am-btn-secondary ng-add-hightB" id="qrcode"><span class="am-icon-search"></span>&nbsp;前台客服</a>
                                <ul data-am-widget="gallery" class="am-gallery sm-block-grid-2 md-block-grid-3 lg-block-grid-4 am-gallery-bordered ngsty-Iul am-no-layout" data-am-gallery="{ pureview: true }" id="picture_view">
                                    <img src="/upload/client_services/frontend_cs.png"  alt="" style="display:none" id="qrcode_img">
                                </ul>
                            </div>
                        </div>
                        <div class="am-cf"></div>
                    </div>
                </div>
                <div class="am-g">
                    <div class="am-u-sm-12">
                        <form class="am-form" action="" method="post" id="move-form">
                            <table class="am-table am-table-striped am-table-hover table-main">
                                <thead>
                                    <tr>
                                        <th class="table-check"><input type="checkbox" onclick="kg.select_all(this.form);" class="tpl-table-fz-check" id="all"></th>
                                        <th class="table-title">ID</th>
                                        <th class="table-type">工号</th>
                                        <th class="table-author am-hide-sm-only">头像</th>
                                        <th class="table-date am-hide-sm-only">客服昵称</th>
                                        <th class="table-date am-hide-sm-only">状态</th>
                                        <th class="table-date am-hide-sm-only">当前接待数</th>
                                        <th class="table-date am-hide-sm-only">客服组</th>
                                        <th class="table-date am-hide-sm-only">绑定微信号</th>
                                        <th class="table-set">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                {% for row in data %}
                                    <tr>
                                        <td><input type="checkbox" name="id[]" value="{{row['id']}}"></td>
                                        <td>{{row['id']}}</td>
                                        <td>{{row['kf_id']}}</td>
                                        <td class="am-hide-sm-only">{% if row['headingurl'] %}<img src="{{row['headingurl']}}" style="width:25px; height:25px">{% endif %}</td>
                                        <td>{{row['nickname']}}</td>
                                        <td>{% if row['online'] == 1 %}在线{% else %}离线{% endif %}</td>
                                        <td>{{row['accepted_case']}}</td>
                                        <td>{{row['group_id']}}</td>
                                        <td>{%if row['kf_wx']%}{{row['kf_wx']}}{% else %}未绑定{% endif %}</td>
                                        <td class="am-hide-sm-only">
                                            <div class="am-btn-toolbar ngre-Hdadd-paddidngT">
                                                <div class="am-btn-group am-btn-group-xs">
                                                    <a href="wx_cs_update?id={{row['id']}}" class="am-btn am-btn-default am-btn-xs am-text-default am-hide-sm-only">
                                                        <span class="am-icon-pencil-square-o"></span>&nbsp;编辑
                                                    </a>
                                                     <a href="wx_cs_manage?action=del&id={{row['id']}}" class="am-btn am-btn-default am-btn-xs am-text-danger ngro-Jclick-shanchubi">
                                                        <span class="am-icon-trash-o"></span>&nbsp;删除
                                                    </a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                            {% if not data %}<div class="no-data"><ul>没有相关数据</ul></div>{% endif %}
                            {% if page_data['total_rows'] %}
                            <div class="am-u-sm-12 am-u-md-6">
                                <div class="am-btn-toolbar ng-xno-borderL" id="select-handle">
                                    <span class="am-input-group-btn add-span">
                                        <a class="add am-btn am-btn-default am-select am-back ngco-Ono-radiusR" href="javascript:; ">全选</a>
                                    </span>
                                    <select class="am-select-hover" data-am-selected="{btnSize: 'sm', dropUp: 1, maxHeight: 155}" style="display: none;">
                                        <option selected="selected" value='0'>移动分组至：</option>
                                        {% for row in group %}
                                        <option value="{{row['id']}}">{{row['group_name']}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            {% endif %}
                            {% if page_data['total_page'] > 1 %}
                            {{page_html}}
                            {% endif %}
                            <hr>
                            <input type="hidden" name="action" value="move">
                            <input type="hidden" name="group" value="" id="group">
                        </form>
                    </div>
                </div>
                <div class="am-alert am-alert-success success-info ngco-No-marginT">
                    <ul class="margin-bottom-none padding-left-lg">
                        <li class="am-state-info">状态说明：</li>
                        <li class="am-verify">
                            绑定后的客服帐号，可以登录<a href="https://mpkf.weixin.qq.com/" target="_blank">【在线客服功能】</a>，进行客服沟通。用户可通过<a href="../cs_group" target="_blank">【前台页面】</a>发起对话
                        </li>
                    </ul>
                </div>
            </div>
            {% include 'component_footer.tpl' %}
        </div>
		</div><!-- /.scrollbar-wrap -->
    </div>
</body>
</html>