{extend name="Public/base"/}
{block name="js"}
<script src="__PUBLIC__/js/echarts.online.js?v={$Think.const.APP_VERSION}"></script>
<script>
    $(function(){
        $(".nul_bli").eq(3).find(".navb").addClass("active");
//		$(".navb.active").parent().find(".nul_s .nul_sli").eq(2).find(".navs").addClass("active");
    })
</script>
{/block}
{block name="css"}
<style>
    .layui-table-page {
        margin-left: 4px;
        height: auto!important;
    }
    .layui-table th, .layui-table th{
        text-align: center!important;
    }

</style>
<link rel="stylesheet" href="__PUBLIC__/item/css/layui.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/css/set.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/css/statistics.css?v={$Think.const.APP_VERSION}">
{/block}
{block name="main"}
<div class="if_wrap">
    <div class="cus-con">
        <div class="set_tit"><span>{$title}</span></div>
        <div class=" set-top layui-form layui-form-item">
            <label style="width:60px; padding-left: 5px;padding-right: 10px;" class="layui-form-label mkz_t1" style="width:50px;">开始时间：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="start" name="timeArea" readonly="readonly" value="">
            </div>
            <label style="width:60px; padding-left: 5px;padding-right: 10px;" class="layui-form-label mkz_t1" style="width:50px;">结束时间：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="end" name="timeArea" readonly="readonly" value="">
            </div>
            <label style="width:60px; padding-left: 5px;padding-right: 10px;" class="layui-form-label mkz_t1" style="width:50px;">查询方式：</label>
            <div class="layui-input-inline">
                <input type="radio" class="layui-input" name="city" title="城市" value="1" checked>
                <input type="radio" class="layui-input" name="city" title="省份" value="0">
            </div>
            <input type="hidden" id="did" value="{$did}">
            <button class="layui-btn layui-btn-primary cus-model-btn" id="sub" >
                查询
            </button>
            <button class="layui-btn layui-btn-primary cus-model-btn" id="export" >
                <i class="iconfont"></i> 导出
            </button>
        </div>
        <div class="layui-form">
            <table class="layui-table">
                <thead>
                <tr id="app">
                    <th id="tt">
                       渠道
                    </th>
                    {volist name="city" id="city"}
                    <th>{$city.name}</th>
                    {/volist}
                    <th>总计</th>
                </tr>
                </thead>
                <tbody id="data">


                </tbody>
            </table>
        </div>
        <hr />
        <script type="text/html" id="titleTpl">
            {{d.LAY_TABLE_INDEX+1}}
        </script>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <!-- <div id="main" style="width: 900;height:420px;">折柱混合图（敬请期待......）</div> -->
    </div>
</div>
<script type="text/javascript">
    layui.use('form', function() {
        var form = layui.form;
        form.on('radio',function(data){
            var check = data.value;
            if(check == 1) {
                $.ajax({
                    type: "POST",
                    url: '/crm/Customer/searchCity',
                    data: {type: 2},
                    dataType: 'json',
                    success: function (ret) {
                        var inp = '<th id="tt">渠道 </th>';
                        for (var i = 0; i < ret.length; i++) {
                            inp += '<th>' + ret[i]['name'] + '</th>';
                        }
                        inp += '<th>总计</th>';
                        $('#app').html(inp);
                        $('#data').html('');
                    }
                })
            }else{
                $.ajax({
                    type: "POST",
                    url: '/crm/Customer/searchCity',
                    data: {type: 1},
                    dataType: 'json',
                    success: function (ret) {
                        var inp = '<th id="tt">渠道 </th>';
                        for (var i = 0; i < ret.length; i++) {
                            inp += '<th>' + ret[i]['name'] + '</th>';
                        }
                        inp += '<th>总计</th>';
                        $('#app').html(inp);
                        $('#data').html('');
                    }
                })
            }
        })
    })
    //日历
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#start'
            ,format: 'yyyy-MM-dd'
        });
        laydate.render({
            elem: '#end'
            ,format: 'yyyy-MM-dd'
        });
    });

    // 查询按钮
    $("#sub").click(function(){
        // 生成表格
        var start   = $('#start').val();
        var end   = $('#end').val();
        var did   = $('#did').val();
        var city   = $('input[name=city]:checked').val();
        var index = layer.load(1, {shade: false}); //0代表加载的风格，支持0-2
        // 重新载入表格
        $.ajax({
            type: "POST",
            url: '/crm/Report/data',
            data: {id:'costdata', start:start,end:end,city:city,did:did},
            dataType:'json',
            success: function(ret) {
                var allcount = 0;
                if(ret.code == 200){
                    var inp = '<tr>';
                    for (var i in ret.channel){
                        var channelId = ret.channel[i]['id'];
                        inp += '<tr>';
                        inp += "<th>"+ret.channel[i]['channel_name']+"</th>";
                        for(var j in ret.city){
                            if(ret.data[channelId] && ret.data[channelId][j]){
                                inp += "<th>"+ret.data[channelId][j]['cost']+"</th>";
                            }else{
                                inp += "<th></th>";
                            }
                        }
                        if(ret.count[channelId]){
                            inp += "<th>"+ret.count[channelId]+"</th>";
                            allcount = allcount.add(ret.count[channelId]);
                        }else{
                            inp += "<th></th>";
                        }
                        inp += '</tr>';
                    }
                    inp += "<tr><th>总计</th>";
                    for(var k in ret.city){
                        if(ret.countCity[k]&& ret.countCity[k]['cost']){
                            inp += "<th>"+ret.countCity[k]['cost']+"</th>";
                        }else{
                            inp += "<th></th>";
                        }
                    }

                    inp += '<th>'+allcount.toFixed(2)+'</th></tr>';
                }else{
//                    var inp = '<thead> <tr> <th colspan="3">暂无数据！</th> </tr> </thead>';
                    layer.alert(ret.msg);
                    layer.close(index);
                    return false;
                }
                $('#data').html(inp);
                layer.close(index);
            }
        });
    });
    Number.prototype.add = function(arg){
        var r1,r2,m;
        try{r1=this.toString().split(".")[1].length}catch(e){r1=0}
        try{r2=arg.toString().split(".")[1].length}catch(e){r2=0}
        m=Math.pow(10,Math.max(r1,r2))
        return (this*m+arg*m)/m
    }

    // 导出按钮
    $("#export").click(function(){
        var start = $('#start').val();
        var end = $('#end').val();
        var did   = $('#did').val();
        var city   = $('#city').val();
        location.href = "/crm/Report/data.html?id=costdata&start="+start+"&end="+end+"&need=1&city="+city+'&did='+did;
    })
</script>
{/block}