{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}">
<style>
    .set-row .layui-input-block {
        margin: 2px;
    }
    .layui-upload-list {
        margin: 12px 108px;
    }
    .layui-table-cell{
        height: auto;
    }
    .layui-table-page {
        height: 25px;
        margin-top: -15px;
        /*margin-left: 4px;
        height: auto!important;*/
    }
</style>
{/block}
{block name="main"}
<div class="if_wrap">
    <div class="cus-con">
        <div class="set_tit"><span>客服会话管理</span></div>
        <div class="set-top">
            <!-- <button class="layui-btn add-btn" data-type="add">新增人员</button>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" value="" id="search_staff" placeholder="请输入客服名称">
                </div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" value="" id="search_staff" placeholder="请输入客户昵称">
                </div>
                <div class="layui-input-inline">
                    <select name="status" id="status" lay-filter="status" lay-search="">
                        <option value="" disabled selected="">状态</option>
                        <option value="1">已关注</option>
                        <option value="0">已取关</option>
                    </select>
                </div>

                <button class="layui-btn" id="btn">查询</button>
            </div>
            -->
        </div>
        <table class="layui-table" lay-data="{height:750, page:true, url:'/weixin/Weixin/wxTalkListJSON.html', id:'wxTalkTable'}" lay-filter="wxTalkTable">
            <thead>
            <tr>
                <th lay-data="{width: 50,align:'center',field:'id',sort: true,templet: '#titleTpl'}">序号</th>
                <th lay-data="{width:120,align:'center',field:'nickname'}">用户昵称</th>
                <th lay-data="{width:100,align:'center',field:'headimgurl',toolbar: '#headimgurl'}">用户头像</th>
                <th lay-data="{width:100,align:'center',field:'type'}">类型</th>
                <th lay-data="{width:100,align:'center',field:'channel_name'}">渠道</th>
                <th lay-data="{width:150,align:'center',field:'add_time'}">加入时间</th>
                <th lay-data="{width:150,align:'center',field:'staff_name',sort:true}">客服人员</th>
                <th lay-data="{width:150,align:'center',field:'sex'}">客户性别</th>
                <th lay-data="{width:150,align:'center',field:'update_time',sort:true}">最后会话时间</th>
                <th lay-data="{width:150,align:'center',field:'subscribe',sort:true}">状态</th>
                <th lay-data="{width:200,align:'center',field:'score', toolbar: '#barDemo'}">操作</th>
            </tr>
            </thead>
        </table>

    </div>
</div>
<script type="text/html" id="titleTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<script type="text/html" id="headimgurl">
    {{#  if(d.headimgurl){ }}
    <img src="{{d.headimgurl}}" width="50" alt="">
    {{#  } }}
</script>
<!-- 分配客服 好像有问题
<div id="add-box" style="display: none;padding:20px;overflow: auto;height: 90%;">
    <form action="" id="form" class="layui-form">
    <div class="set-row">
        <div class="layui-inline">
            <label class="layui-form-label">部门：</label>
            <div class="layui-input-block">
                <select id="department_id" lay-filter="department_id" lay-search="">
                    <option value="">请选择</option>
                    {volist name="dep" id="d"}
                        <option value="{$d.id}">{$d.shop_name}-{$d.department_name}</option>
                    {/volist}
            </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">小组：</label>
            <div class="layui-input-block">
                <select id="group_id" lay-verify="required"lay-search="">
                    <option value="">请选择</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">人员：</label>
            <div class="layui-input-block"><input type="text" class="layui-input" id="staff_name"></div>
            <button type="button" class="layui-btn" id="search">查询</button>
        </div>
        <div class="layui-inline">
            <table class="layui-table" style="margin-left: 55px;">
                <thead><tr><th>请选择</th><th>员工编号</th><th>员工账号</th></tr></thead>
                <tbody id="staff"></tbody>
            </table>
        </div>
    </div>
    </form>
</div>
-->
<!-- 重来一个 -->
<div id="add-fp" style="display: none;padding:20px;overflow: auto;height: 90%;">
    <form action="" id="form1" class="layui-form">
    <div class="set-row">
        <div class="layui-inline">
            <table class="layui-table" style="margin-left: 55px;">
                <thead>
                <tr>
                    <th>请选择</th>
                    <th>员工姓名</th>
                    <th>客服昵称</th>
                </tr>
                </thead>
                <tbody id="staff">
                    {volist name="kfList" id="k"}
                    <tr>
                        <td><input type="radio" name="kf_id" value="{$k.id}" title=""></td>
                        <td>{$k.staff_name}</td>
                        <td>{$k.kf_nick}</td>
                    </tr>
                    {/volist}
                </tbody>
            </table>
        </div>
    </div>
    </form>
</div>
{if $auth}
    <script type="text/html" id="barDemo">
    {{#  if(d.subscribe=='已关注'){ }}
        {{#  if(d.staff_name){ }}
            <a class="layui-btn layui-btn-mini" lay-event="fp">重新分配</a>
            <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="talk">开启会话</a>
        {{#  }else{ }}
            <a class="layui-btn layui-btn-mini" lay-event="fp">分配客服</a>
        {{#  } }}
    {{#  } }}
    </script>
{else/}
    <script type="text/html" id="barDemo">
        {{#  if(d.subscribe=='已关注'){ }}
            {{#  if(d.staff_name){ }}
            <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="talk">开启会话</a>
            {{#  } }}
        {{#  } }}
    </script>
{/if}
<script type="text/javascript" src='__PUBLIC__/js/jquery-3.1.1.js'></script>
<script>
$(function(){
    // 每隔3秒，重新加载一下 table
    // setTimeout('reloadTable()',3000);
});
var list = [];
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
    var laydate = layui.laydate //日期
            ,laypage = layui.laypage //分页
    layer = layui.layer //弹层
            ,table = layui.table //表格
            ,carousel = layui.carousel //轮播
            ,upload = layui.upload //上传
            ,element = layui.element; //元素操作
    //监听工具条
    table.on('tool(wxTalkTable)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'fp') {
            var staff_id = obj.data.kf_id;
            $("input:radio[value="+staff_id+"]").attr('checked','true');
            layui.form.render();
            layer.open({
                title: '分配客服',
                type: 1,
                skin: 'layui-layer-rim',
                area: ['500px', '550px'],
                content: $('#add-fp'),
                btn: ['提交']
                , yes: function(index) {
                    //当点击‘确定’按钮的时候，获取弹出层返回的值
                    var id = obj.data.id;
                    // var kf_account = $("#kf_account").val();
                    // if(typeof kf_account == undefined || kf_user ==''){
                    //     layer.alert('请输入客服账号');
                    //     return false;
                    // }
                    // var kf_nick = $("#kf_nick").val();
                    // if(typeof kf_nick == undefined || nick_name ==''){
                    //     layer.alert('请输入客服昵称');
                    //     return false;
                    // }
                    // var photo = $("#demo1").attr('src');
                    var kf_id = $("input[name=kf_id]:checked").val();
                    if(typeof kf_id == undefined || kf_id ==''){
                        layer.alert('请选择人员');
                        return false;
                    }
                    $.ajax({
                        type: "POST",
                        url: "{:Url('weixin/Weixin/allotKf')}",
                        data: {id:id,kf_id:kf_id},
                        // data: {id:id,staff_id:staff_id,kf_account:kf_account,kf_nick:kf_nick,photo:photo},
                        dataType:'json',
                        success: function(ret){
                            if(ret.code==200){
                                layer.alert(ret.msg);
                                table.reload('idTest', { });
                            }else{
                                var str = ret.msg+':'+ret.error;
                                layer.alert(str);
                            }
                        },
                        error:function(XMLHttpRequest, textStatus, errorThrown){
                            var ret = XMLHttpRequest.responseJSON
                            layer.alert('操作失败');
                        }
                    })
                    //最后关闭弹出层
                    layer.close(index);
                }
            });
        } else if (layEvent === 'talk') {
            var id = obj.data.id;
            // 看看这个会话有没有指定客服
            /*
            $.ajax({
                type: "POST",
                url: "{:Url('weixin/Weixin/allotKf')}",
                data: {id:id,kf_id:kf_id},
                // data: {id:id,staff_id:staff_id,kf_account:kf_account,kf_nick:kf_nick,photo:photo},
                dataType:'json',
                success: function(ret){
                    if(ret.code==200){
                        layer.alert(ret.msg);
                        table.reload('idTest', { });
                    }else{
                        var str = ret.msg+':'+ret.error;
                        layer.alert(str);
                    }
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    var ret = XMLHttpRequest.responseJSON
                    layer.alert('操作失败');
                }
            })
            */

            list.push(id);
            var talkList = JSON.stringify(list);

            layer.open({
                type: 2,
                title: '微信会话',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['920px', '600px'],
                content: ['/weixin/weixin/kfTalk?talkList='+talkList+'&id='+id+"&channel_name="+obj.data.channel_name,'no'],
                // resize: false
            });
        }
    });
    //分页
    laypage.render({
        elem: 'pageDemo' //分页容器的id
        ,count: 100 //总页数
        ,skin: '#1E9FFF' //自定义选中色值
        //,skip: true //开启跳页
        ,jump: function(obj, first){
            if(!first){
                layer.msg('第'+ obj.curr +'页');
            }
        }
    });    
})
// 重新加载 table
function reloadTable () {
    // alert('111');
    // var index = layer.load(1, {shade: false}); //0代表加载的风格，支持0-2 
    table.reload('wxTalkTable', {
        url: '/weixin/Weixin/wxTalkListJSON',
        method:'post',
        where: {}, //设定异步数据接口的额外参数
        done: function(res, curr, count){
            // layer.close(index);
            setTimeout("reloadTable()",3000);
        }
    });
}
</script>
{/block}