{extend name="Public/base" /}
{block name="js"}
<script>
    $(function(){
        $(".nul_bli").eq(2).find(".navb").addClass("active");
    });
    var staff_name = "{$Think.session.staff_name}";
    var colModel = "{$colModel}";
    var colNames = "{$colNames}";
//    var cid = "{$cid}";
</script>
<!--<script src="__PUBLIC__/js/public.js?v={$Think.const.APP_VERSION}"></script>-->
  <!--<script src="__PUBLIC__/js/cus-index.min.js?v={$Think.const.APP_VERSION}"></script>-->
<script src="__PUBLIC__/js/ks.js?v={$Think.const.APP_VERSION}"></script>
{/block}
{block name="css"}
<link rel="stylesheet" href="__PUBLIC__/font/fonts/iconfont.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/font-awesome.min.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/css/jquery.contextmenu.css?v={$Think.const.APP_VERSION}">

{/block}
{block name="style"}

    .layui-table-view{
        margin:0;
    }
    html,body{
        height: 100%;
        overflow: hidden;
    }
/*
    .if_wrap .cus-con {
        min-width: 1700px;
    }
*/
.if_wrap {
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 150px;
    right: 0;
    background: #fff;
}

.choose-wrap {
    border: 1px solid #d7d7d7;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
}
.sort-wrap{
    width: 50%;
    float: left;
}
.sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.sortable li {
    margin: 0 3px 3px 3px;
    padding: 5px;
    padding-left: 30px;
    font-size: 14px;
}

.sortable li span {
    position: absolute;
    margin-left: -1.3em;
}

.sortable .fa-minus, .sortable .fa-plus {
    font-size: 12px;
    float: right;
    line-height: 18px;
    color: #888;
    cursor: pointer;
}
.sor-tit{
    margin:0 0 10px 10px;
}
#add-col .ui-icon{
    display: none;
}
#add-col li{
    padding-left: 5px;
}
.bg-red{
    background-color:red;
}
.layui-table tbody tr.bg-red.layui-table-hover{background-color: #cb6767!important;} 
{/block}

{block name="main"}
<div class="if_wrap">
    <div class="cus-con">
            <div class="cus-top" id="cus-top">
                <!--<form class="layui-form layui-form-pane1">-->

                <div class="cus-top-right layui-form layui-form-pane1">

                    <div class="layui-inline">
                        <label class="layui-form-label">客诉类型：</label>
                        <div class="layui-input-block w-120">
                            <select name="complain_id" id="complain_id" lay-filter="complain_id">
                                <option value="">请选择</option>
                                {volist name="complain" id="vo"}
                                <option value="{$vo['id']}">{$vo['complain_name']}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">客诉来源：</label>
                        <div class="layui-input-block w-120">
                            <select name="source_id" id="source_id" lay-filter="source_id">
                                <option value="">请选择</option>
                                {volist name='source' id='vo'}
                                <option value="{$vo.id}">{$vo.source_name}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">事业部：</label>
                        <div class="layui-input-block w-120">
                            <select name="brand_id" id="brand_id">
                                <option value="">责任事业部</option>
                                {volist name="brand" id="vo"}
                                <option value="{$vo['id']}" {if condition="$vo.id eq $brand_id"}selected{/if}>{$vo['brandclass']}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">客诉等级：</label>
                        <div class="layui-input-block w-120">
                            <select name="level" id="level">
                                <option value="">请选择</option>
                                <option value="1">一般客诉</option>
                                <option value="2">重大客诉</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">责任岗位：</label>
                        <div class="layui-input-block w-120">
                            <input type="text" class="layui-input"  name="duty_position_name" id="duty_position_name" placeholder='责任岗位'>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">客诉编号：</label>
                        <div class="layui-input-block w-120">
                            <input type="text" class="layui-input"  name="work_order_number" id="work_order_number" placeholder='客诉工单编号'>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">责任人：</label>
                        <div class="layui-input-block w-120">
                            <input type="text" class="layui-input"  name="duty_staff_name" id="duty_staff_name" placeholder="责任人姓名">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">订单编号：</label>
                        <div class="layui-input-block w-120">
                            <input type="text" class="layui-input"  name="order_number" id="order_number"  placeholder="订单编号">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">顾客姓名：</label>
                        <div class="layui-input-block w-120">
                            <input type="text" class="layui-input"  name="username" id="username" placeholder="请输入用户名">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">顾客手机：</label>
                        <div class="layui-input-block w-120">
                            <input type="text" class="layui-input"  name="mobile" id="mobile" placeholder="请输入手机号">
                        </div>
                    </div>

                </div>


                <div class="cus-top-left layui-form layui-form-pane1">

                    <!--<label class="layui-form-label">客户姓名：</label>-->
                    <!--<div class="layui-input-block w-120" >-->
                        <!--<input type="text" class="layui-input"  name="username" id="username" placeholder="请输入用户名">-->
                    <!--</div>-->

                    <!--<label class="layui-form-label">手机号：</label>-->
                    <!--<div class="layui-input-block w-120" >-->
                        <!--<input type="text" class="layui-input"  name="mobile" id="mobile" placeholder="请输入手机号">-->
                    <!--</div>-->

                    <div class="layui-input-block w-150 mr10" style="margin-left: 5px">
                        <select name="all_time" id="all_time" class="layui-form layui-form-pane1">
                            <option value="">请选择</option>
                            <option value="create_time" selected>登记日期</option>
                            <option value="receice_time">领取时间</option>
                            <option value="manage_time">最后一次处理时间</option>
                        </select>
                    </div>
                    <div class="layui-input-block w-150">
                        <div class="layui-inline w-150">
                            <input type="text" class="layui-input test-item"  name="start_time" id="start_time" readonly>
                        </div>
                    </div>
                    <span class="date-span">-</span>
                    <div class="layui-input-block w-150">
                        <div class="layui-inline w-150">
                            <input type="text" class="layui-input test-item"  name="end_time" id="end_time" readonly>
                        </div>
                    </div>


                    <div class="layui-input-block cus-search" style="z-index: 1;">
                        <input type="hidden" name="type_info" id="type_info">
                        <button lay-submit lay-filter="search" id="search" data-type="reload"  value="查询" class="search-span" style="border-radius: 5px;">查询</button>

                    </div>
                    <div class="layui-input-block cus-search" style="z-index: 1;">
                        <button lay-filter="reset" id="reset"  value="重置" class="search-span" style="border-radius: 5px;">重置</button>
                    </div>
                </div>
                <!--</form>-->
            </div>
            <div class="cus-filter">


            </div>
            <div class="cus-model">

                <button class="layui-btn layui-btn-primary cus-model-btn" data-type="add">
                    <i class="iconfont">&#xe622;</i> 添加
                </button>

                <!--<button class="layui-btn layui-btn-primary cus-model-btn " data-type="export">-->
                    <!--<i class="iconfont">&#xe612;</i> 导出-->
                <!--</button>-->

                <!--<button class="layui-btn layui-btn-primary cus-model-btn" data-type="delete">-->
                    <!--<i class="iconfont">&#xe613;</i> 删除-->
                <!--</button>-->

                <button class="layui-btn layui-btn-primary cus-model-btn" data-type="reload" id="refresh">
                    <i class="iconfont">&#xe668;</i> 刷新
                </button>

                <button class="layui-btn layui-btn-primary cus-model-btn" data-type="export" id="export" >
                    <i class="iconfont"></i> 导出
                </button>

            </div>
            <div class="cus-link"style="width: 1730px;">
                <!--<button class="layui-btn kz-btn">所有客资</button>-->
                <ul class="layui-tab-title cus-link-wrap" id="all_number">

                    {auth code='menu1512698495'}<li class="layui-this click-type" id="new_ks"><span class="cus-link-text">客诉池</span><span class="layui-badge layui-bg-gray" id="new_ks_num"></span></li>{/auth}
                    <li class="click-type" id="create"><span class="cus-link-text">我提报的</span><span class="layui-badge layui-bg-gray" id="create_num"></span></li>
                    <!--{auth code='menu1512698552'}<li class="click-type" id="today_receive"><span class="cus-link-text">当日领取</span><span class="layui-badge layui-bg-gray" id="today_receive_num"></span></li>{/auth}-->
                    {auth code='menu1512698635'}<li class="click-type" id="not_manage"><span class="cus-link-text">待处理</span><span class="layui-badge layui-bg-gray" id="not_manage_num"></span></li>{/auth}
                    {auth code='menu1512698693'}<li class="click-type" id="manage"><span class="cus-link-text">处理中</span><span class="layui-badge layui-bg-gray" id="manage_num"></span></li>{/auth}
                    {auth code='menu1512698717'}<li class="click-type" id="over"><span class="cus-link-text">已解决</span><span class="layui-badge layui-bg-gray" id="over_num"></span></li>{/auth}
                    {auth code='menu1512698836'}<li class="click-type" id="refute"><span class="cus-link-text">已驳回</span><span class="layui-badge layui-bg-gray" id="refute_num"></span></li>{/auth}
                    {auth code='menu1529393390'}<li class="click-type" id="not_second"><span class="cus-link-text">二次满意度</span><span class="layui-badge layui-bg-gray" id="not_second_num"></span></li>{/auth}
                    {auth code='menu1529393467'}<li class="click-type" id="second"><span class="cus-link-text">二次满意度完成</span><span class="layui-badge layui-bg-gray" id="second_num"></span></li>{/auth}
                    {auth code='menu1529393499'}<li class="click-type" id="second_fail"><span class="cus-link-text">后续跟进</span><span class="layui-badge layui-bg-gray" id="second_fail_num"></span></li>{/auth}
                    <!--<li id="already_sk"><span class="cus-link-text">公示平台</span><span class="layui-badge layui-bg-gray" id="customer_already_sk"></span></li>-->
                </ul>

            </div>
            <div class="cus-table">
                <table id="demo" lay-filter="test" lay-data="{id: 'idTest'}"></table>
                <!--添加规则-->
                <!--<div id="columns" style="display: none;padding:10px;">-->
                    <!--<div class="choose-wrap">-->
                        <!--<div class="sort-wrap">-->
                            <!--<div class="sor-tit">自定义列</div>-->
                            <!--<ul id="sortable" class="sortable">-->
                                <!--<li class="ui-state-default" data-cols="{field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>ID<i class="fa fa-minus"></i></li>-->
                                <!--<li class="ui-state-default" data-cols="{field: 'username', title: '用户名', width: 80}"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>用户名<i class="fa fa-minus"></i></li>-->
                                <!--<li class="ui-state-default" data-cols="{field: 'sex', title: '性别', width: 80, sort: true}"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>性别<i class="fa fa-minus"></i></li>-->
                                <!--<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>城市<i class="fa fa-minus"></i></li>-->
                                <!--<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>签名<i class="fa fa-minus"></i></li>-->
                                <!--<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>积分<i class="fa fa-minus"></i></li>-->
                                <!--<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>评分<i class="fa fa-minus"></i></li>-->
                                <!--<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>职业<i class="fa fa-minus"></i></li>-->
                                <!--<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>财富<i class="fa fa-minus"></i></li>-->
                            <!--</ul>-->
                        <!--</div>-->
                        <!--<div class="sort-wrap">-->
                            <!--<div class="sor-tit">备用列</div>-->
                            <!--<ul class="sortable" id="add-col"></ul>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->

                <div id="pager"></div>
            </div>
        </div>
</div>

<!--驳回-->
<div id="refute-box" style="display: none;padding:10px 10px 0;">
    <form class="layui-form layui-form-pane1 qiuck-form" action="">

        <div class="layui-inline">
            <label class="layui-form-label">驳回原因：</label>
            <div class="layui-input-block w-150">
                <textarea name="refute_reason" id="refute_reason" placeholder="请输入驳回原因..." class="layui-textarea" style="width: 359px;height: 127px;"></textarea>
            </div>
        </div>

    </form>
</div>
<!--<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>-->
<script src="__PUBLIC__/js/jquery-ui.js"></script>
<script src="__PUBLIC__/js/jquery.contextmenu.js"></script>

<script type="text/html" id="this_level">
    {{#  if(d.level == 1){ }}
    一般客诉
    {{#  } else { }}
    重大客诉
    <span class="mark-red"></span>
    {{#  } }}
</script>

<script type="text/html" id="ks_phase">
    {{#  if(d.ks_phase == 1){ }}
        订单
    {{#  } else if(d.ks_phase == 2){ }}
    试衣
    {{#  } else if(d.ks_phase == 3){ }}
    拍摄
    {{#  } else if(d.ks_phase == 4){ }}
    选片
    {{#  } else if(d.ks_phase == 5){ }}
    修图
    {{#  } else if(d.ks_phase == 6){ }}
    取件
    {{#  } else if(d.ks_phase == 7){ }}
    其他
    {{#  } else { }}
    订单
    {{#  } }}
</script>

<!--<script type="text/html" id="sexTpl">-->
    <!--{{#  if(d.level === 2){ }}-->
    <!--&lt;!&ndash;<span class="mark-red">{{ d.id }}</span>&ndash;&gt;-->
    <!--{{#  } else { }}-->
    <!--{{ d.id }}-->
    <!--{{#  } }}-->
<!--</script>-->
<script type="text/html" id="is_status">
    {{#  if(d.is_ks == 5){ }}
        相关人员处理中

    {{#  } else { }}

        {{#  if(d.is_status == 1){ }}
        <font color="#20b2aa">未领取</font>
        {{#  } else if(d.is_status == 2){ }}
        已领取
        {{#  } else if(d.is_status == 3){ }}
        处理中
        {{#  } else if(d.is_status == 4){ }}
        已解决
        {{#  } else if(d.is_status == 5){ }}
        不满意
        {{#  } }}

    {{#  } }}
</script>
<script>
    $(document).ready(function(){
        if($('#callCenter').val() == 'shenou'){
            initwebsocket('ws://211.140.88.35:6688');
        }
        $("#send_msg").keyup(function(){
            var length = 100;
            var content_len = $("#send_msg").val().length;
            var in_len = length-content_len;

            // 当用户输入的字数大于制定的数时，让提交按钮失效
            // 小于制定的字数，就可以提交
            if(in_len >=0){
                $("#num").html('您还可以输入<span style="color:red;font-size: large">'+in_len+'</span>字');
                if(in_len > 100){
                    $("#send_msg").attr("disabled",false);
                }
            }
        });
    });


    layui.use('form', function () {
        var form = layui.form;
        form.on('select(model)', function(data){
            $.ajax({
                type: "POST",
                url: 'getModelContent',
                data: {id:data.value},
                success: function(msg){
                    if(msg){
                        $('#send_msg').val(msg.mtemplate_content);
                    }else{
                        layer.alert('模板内容加载失败');
                    }
                }
            });
        });

    });
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
        var upload = layui.upload;
        var $ = layui.jquery, layer = layui.layer ,element = layui.element;
        var table = layui.table;
        //执行实例
        var uploadInst = upload.render({
            elem: '#uplod-btn' //绑定元素
            ,url: 'uploadExcel' //上传接口
            ,accept: 'file' //excel文件
            ,done: function(res){
                if(res.code==1){
                    $('.im-choose-span').html(res.data);
                    element.progress('im-progress', '100%')
                }else{
                    layer.alert(res.msg)
                }
            }
            ,error: function(){
                //请求异常回调
            }
        });

    });
    function clickOld(){
        $("#oldCus").trigger("click");
    }
    function clickNew(){
        $("#newCus").trigger("click");
    }


</script>
{/block}