{extend name="Public/base" /}
{block name="css"}
<style>
    .layui-table-page {
        /*margin-top: -60px;*/
        margin-left: 4px;
        height: auto!important;
    }
</style>
{/block}
{block name="js"}
<script src="__PUBLIC__/js/jquery-1.9.0.min.js?v={$Think.const.APP_VERSION}" type="text/jscript"></script>
<script>
    $(function(){
        // $(".nul_bli").eq(6).find(".navb").addClass("active");
        // $(".navb.active").parent().find(".nul_s .nul_sli").eq(1).find(".navs").addClass("active");
    })
</script>
{/block}
{block name="main"}
<div class="if_wrap">
    <div class="cus-con">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>转客资</legend>
        </fieldset>
        <table class="layui-table" lay-data="{height:770,limit:50, url:'/crm/customer/zhuanCustomerJSON.html', page:true,id:'idTest'}" lay-filter="idTest">
            <thead>
            <tr>
                <th lay-data="{field:'id', width:50, sort: true,toolbar: '#titleTpl'}">序号</th>
                <th lay-data="{width:100, align:'center', toolbar: '#barDemo',align:'center'}">操作</th>
                <th lay-data="{field:'customer_name', width:100,align:'center'}">来电人</th>
                <th lay-data="{field:'audio_path', width:300,toolbar:'#radio',align:'center'}">录音</th>
                <th lay-data="{field:'customer_sex', width:100,align:'center'}">性别</th>
                <th lay-data="{field:'customer_tel', width:150,align:'center'}">手机</th>
                <th lay-data="{field:'consultation_type', width:100,align:'center'}">消费类型</th>
                <th lay-data="{field:'op_signinfo', width:100,align:'center'}">客资标记</th>
                <th lay-data="{field:'customer_intention', width:100,align:'center'}">客户意向</th>
                <th lay-data="{field:'customer_cource', width:150,align:'center'}">客户来源</th>
                <th lay-data="{field:'customer_channel', width:150,align:'center'}">渠道名称</th>
                <th lay-data="{field:'access_model', width:100,align:'center'}">获取方式</th>
                <th lay-data="{field:'customer_remark', width:150,align:'center'}">来电备注</th>
                <th lay-data="{field:'tel_alltime',width:80,align:'center'}">通话时长</th>
                <th lay-data="{field:'dj_staff', width:100,align:'center'}">接听人</th>
            </tr>
            </thead>
        </table>
        <script type="text/html" id="titleTpl">
            {{d.LAY_TABLE_INDEX+1}}
        </script>
        <script type="text/html" id="radio">
            <audio id="web-sound" controls="controls" src="http://{{d.audio_path}}"></audio>
        </script>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-mini" lay-event="edit">转客资</a>
        </script>
    </div>
</div>
<script type="text/javascript">
    // 表格
    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(idTest)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.msg('查看操作');
            } else if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    var id = obj.data.id;
                    //向服务端发送删除指令
                    $.ajax({
                        type: "POST",
                        url: "{:Url('crm/Setting/')}",
                        data: {id:id},
                        dataType:'json',
                        success: function(ret){
                            if(ret.code == 200){
                                layer.alert('删除成功');
                                table.reload('idTest', {
                                });
                            }else{
                                layer.alert('删除失败');
                            }
                        },
                        error:function(XMLHttpRequest, textStatus, errorThrown){
                            var ret = XMLHttpRequest.responseJSON
                            layer.alert('操作失败');
                        }
                    })
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                });
            } else if (layEvent === 'edit') {
                load_page(
                        '/crm/customer/zhuanCustomerInfo/id/' + obj.data.id,
                        '转客资',
                        function () {
                            zhuanToCus();
                            obj.del();
                        },
                        ['确定', '取消'],
                        500, 450
                );
            }
        });
        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            ,count: 100 //总页数
            ,limit:15
            ,skin: '#1E9FFF' //自定义选中色值
            ,jump: function(obj, first){
                if(!first){
                    layer.msg('第'+ obj.curr +'页');
                }
            }
        });
        //日历
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#start'
                ,max:0
                ,format: 'yyyy-MM-dd'
            });
            laydate.render({
                elem: '#end'
                ,max:0
                ,format: 'yyyy-MM-dd'
            });
        });
    })

</script>
{/block}