<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>itme</title>
    <link rel="stylesheet" href="{{kg['tpl_url']}}style/weui.css">
	<link rel="stylesheet" href="{{kg['tpl_url']}}style/cs_list.css">
	<script src="{{ kg['tpl_url'] }}script/jquery.min.js"></script>
	<script src="{{ kg['tpl_url'] }}script/wx_common.js"></script>
    <script src="{{ kg['tpl_url'] }}script/weui.min.js"></script>
    <style>
        .weui-body {
            background-color: #f8f8f8;
        }
        .weui-panel__hd{
            padding-left: 40px;
        }
        .return_btn{
            content: " ";
            display: inline-block;
            height: 10px;
            width: 10px;
            border-width: 2px 2px 0 0;
            border-color: #C8C8CD;
            border-style: solid;
            -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
            transform: matrix(-0.71, -0.71, 0.71, -0.71, 0, 0);
            position: relative;
            top: -2px;
            position: absolute;
            top: 50%;
            margin-top: -4px;
            left: 17px;
        }
    </style>
</head>
<body class="weui-body">
    <div class="page panel js_show">
        <div class="page__bd">
            <div class="weui-panel">
                
                <div class="weui-panel__hd"><a class="return_btn" href="cs_group"></a>业务咨询</div>
                <div class="weui-panel__bd">
                    {% for row in data %}
                    <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg weui-cell_access kf_item {% if row['online'] %}kf_offline{% endif %}" data-id="{{row['id']}}" data-online="{{row['online']}}" data-accepted="{{row['accepted_case']}}" data-nickname="{{row['nickname']}}">
                        <div class="weui-media-box__hd">
                            <img class="weui-media-box__thumb" src="{{row['headingurl']}}">
                        </div>
                        <div class="weui-media-box__bd">
                            <h4 class="weui-media-box__title"><span class="cs_offline">[{% if row['online'] %}在线{% else %}离线{% endif %}]&nbsp;{{row['nickname']}}</span></h4>
                            <p class="weui-media-box__desc kf_info">客服编号：{{row['kf_id']}}<br/>当前接待数：{{row['accepted_case']}}人</p>
                            <p class="weui-media-box__desc"></p>
                        </div>
                        <span class="weui-cell__ft"></span>
                    </a>
                    {% endfor %}
                    <div class="page__bd" {% if data %}style="display: none;"{% endif %}>
                        <div class="weui-loadmore weui-loadmore_line">
                            <span class="weui-loadmore__tips">暂无客服</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    $(function(){
        $('.kf_item').click(function(){
            var id = $(this).attr('data-id');

            wxToast.show(2,'正在对接');
            $.ajax({
                data: {
                    action: 'transfer_customer_service',
                    id: id
                },
                dataType: 'JSON',
                type: 'POST',
                success: function(res){
                    wxToast.hide();
                    if(res.status){
                        wxToast.show(1,'对接成功');
                        var t = setTimeout(function(){
                            if(WeixinJSBridge){
                                WeixinJSBridge.call('closeWindow');
                            }else{
                                window.close();
                            }
                            clearTimeout(t);
                        },500);
                    }else{
                        wxDialog.set({
                            content: res.msg
                        }).show();
                    }
                }
            });
        });
    })
</script>