{extend name="Public/base"/}

{block name="css"}
<style type="text/css">
    /*body{margin:0; padding:0; min-width:1690px; overflow:auto;}*/
    a{ text-decoration:none;}
    .hf_bd {
        margin: 0;
        padding: 15px;
        box-sizing: border-box;
        border: 1px solid #ddd;
        float: left;
        height: auto;
        width: 100%;
        margin-top:10px;
        overflow: auto;
    }
    .hf_tb_top {
        clear: both;
        float: left;
        height: auto;
        width: 100%;
    }
    .hf_tb_xz {
        font-size: 13px;
        line-height: 36px;
        color: #5e5e5c;
        float: left;
        height: 36px;
        width: 100px;
        padding-right: 5px;
        padding-left: 5px;
        box-sizing:border-box;
        background-color:#f8f9f9;
        border:1px solid #ddd;
        text-align:center;
        border-radius:5px 5px 0 0;
        cursor:default;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .hf_tb_xz.active {
        color: #fff;
        float: left;
        background-color:#428bca;
        border:1px solid #428bca;
    }
    .hf_tb_con {
        clear: both;
        float: left;
        height: auto;
        width: 100%;
        border-left:1px solid #ddd;
        overflow:auto;
    }
    .hf_tb_con ul {
        clear: both;
        float: left;
        height: auto;
        width: 100%;
        padding:0;
        margin:0;
    }
    .hf_tb_con ul:nth-child(even) {
        background-color:#f7f7f7;
    }
    .hf_tb_con ul li {
        font-size: 14px;
        line-height: 36px;
        color: #5e5e5c;
        float: left;
        height: 36px;
        width: 115px;
        text-align:center;
        border-right:1px solid #ddd;
        border-bottom:1px solid #ddd;
        list-style:none;
        padding:0;
        box-sizing: border-box;
    }
    /* .hf_tb_con ul li:nth-child(12) {
        width:280px;
    }
    .hf_tb_con ul li:nth-child(1) {
        width:80px;
    }*/
    .hf_tb_tit,.hf_tb_cc {
        clear: both;
        float: left;
        height: auto;
        width: 100%;
    }
    .hf_tb_div {
        clear: both;
        float: left;
        height: auto;
        display: none;
    }
    .jogger {
        float: left;
        clear: both;
        width: auto;
        height: 50px;
        display: inline-block;
        padding: 15px;
        box-sizing: border-box;
    }
    .jogger a {
        padding:0.4em 0.6em;
        margin: 2px; 
        color: #fff; 
        background-color: #428bca; 
        text-decoration:none;
    }
    .jogger a:hover {
        padding:0.4em 0.6em;
        margin: 2px;  
        color: #fff;  
        background-color: #46b1f8;
    }
    .jogger a:active {
        padding:0.4em 0.6em; 
        margin: 2px; 
        COLOR: #fff; 
        background-color: #46b1f8;
    }
    .jogger span.current {
        padding:0.4em 0.6em;
        margin: 2px; 
        COLOR: #6d643c; 
        background-color: #f6efcc;
    }
    .jogger span.disabled {
        display: none
    }
    .tcdPageCode {
        padding: 15px 5px;
        text-align: left;
        color: #ccc;
        text-align: center;
    }
    .tcdPageCode a {
        display: inline-block;
        color: #428bca;
        display: inline-block;
        height: 25px;
        line-height: 25px;
        padding: 0 5px;
        border: 1px solid #ddd;
        margin: 0 2px;
        border-radius: 4px;
        vertical-align: middle;
    }
    .tcdPageCode a:hover {
        text-decoration: none;
        border: 1px solid #428bca;
    }
    .tcdPageCode span.current {
        font-size: 12px;
        display: inline-block;
        height: 25px;
        line-height: 25px;
        padding: 0 5px;
        margin: 0 2px;
        color: #fff;
        background-color: #428bca;
        border: 1px solid #428bca;
        border-radius: 4px;
        vertical-align: middle;
    }
    .tcdPageCode span.disabled {
        font-size: 12px;
        display: inline-block;
        height: 25px;
        line-height: 25px;
        padding: 0 5px;
        margin: 0 2px;
        color: #bfbfbf;
        background: #f2f2f2;
        border: 1px solid #bfbfbf;
        border-radius: 4px;
        vertical-align: middle;
    }
    .hf_page {
        clear: both;
        float: left;
        height: auto;
        width: 100%;
        padding:0 10px;
        box-sizing:border-box;
    }
    .set_tit {
        clear: both;
        float: left;
        height: 37px;
        width: 99%;
        margin-right: 0.5%;
        margin-left: 0.5%;
        border-bottom: 1px solid #768da2;
    }
    .set_tit span {
        font-size: 16px;
        line-height: 40px;
        color: #ff9000;
        float: left;
        height: 40px;
        width: auto;
        margin-left: 20px;
        margin-right: 20px;
    }
</style>
{/block}
{block name="main"}
<div class="if_wrap">
    <div class="cus-con" style="overflow: hidden;">
        <div class="set_tit"><span>{$title}</span></div>
        <div class=" set-top layui-form layui-form-item" style="margin-bottom: 6px;padding-top: 15px;">
            <input type="hidden" id="shop_code" value='{$shop_code}'>
            <label style="width:70px;" class="layui-form-label mkz_t1" style="width:50px;">选择日期：</label>
            <div class="layui-input-inline" style="width:120px !important;">
                <input class="layui-input" id="start" placeholder="" readonly="readonly" type="text" value="">
            </div>
            <span class="date-span" style="margin-left: -6px;">-</span>
            <div class="layui-input-inline" style="width:120px !important;">
                <input class="layui-input" id="end" placeholder="" readonly="readonly" type="text" 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="hf_bd">
            <div class="hf_tb_top">
                {volist name="channel" id="vo"}
                    {if $vo.order_sort eq 1}
                        <span class="hf_tb_xz active" id="{$vo.id}">{$vo.channel_name}</span>
                    {else}
                        <span class="hf_tb_xz" id="{$vo.id}">{$vo.channel_name}</span>
                    {/if}
                {/volist}
            </div>
            <div class="hf_tb_con">
                <div class="hf_tb_tit" style="width:{$width}px;">
                    <ul style="background-color:#f7f7f7;" id="app">
                        <li>排序</li>
                        <li>花费日期</li>
                        {volist name="city" id="city"}
                        <li>{$city.name}</li>
                        {/volist}
                        <li>总计</li>
                        <!--<li style="width: 200px">添加日期</li>-->
                        <!--<li>添加人</li>-->
                    </ul>
                </div>
                <div class="hf_tb_cc" style="overflow:auto;">
                    <div class="hf_tb_div" style=" display:block;" id="data">

                    </div>
                </div>
            </div>
        </div>
       <!-- <div class="hf_page">
            <div style="float: left" class="tcdPageCode"></div>
            <div style="float: right;margin-top: 20px;font-size: 14px;margin-right:30px;disabled:none;"  id="aaa">&lt;!&ndash;功能可忽略 &ndash;&gt;
                <span style="color: blue">当前页面:<span style="color: red;font-size: 12px;" id="dang">1</span>/<span style="font-size: 12px;" id="zongye">10</span></span>
                <input onKeyUp="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" id="tiao" style="width: 25px;height: 16px;margin-left: 5px;border: 1px solid blue;" value="1">
                <button style="font-size: 12px;background-color: blue;border-radius: 5px;color: #ffffff;border: 1px solid blue;padding: 1px 2px;margin-left: 5px;cursor: pointer" id="zhuan">跳转</button>
            </div>
            <div style="clear: both"></div>
        </div>-->
    </div>
</div>
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.7.1.min.js?v={$Think.const.APP_VERSION}"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery.page.js?v={$Think.const.APP_VERSION}"></script> 
<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 = '<li id="tt">排序</li><li id="tt">花费日期</li>';
                        for (var i = 0; i < ret.length; i++) {
                            inp += '<li>' + ret[i]['name'] + '</li>';
                        }
                        inp += '<li>总计</li>';
                        $('#app').html(inp);
//                        $('#data').html('');
                    }
                })
            }else{
                $.ajax({
                    type: "POST",
                    url: '/crm/Customer/searchCity',
                    data: {type: 1},
                    dataType: 'json',
                    success: function (ret) {
                        var inp = '<li id="tt">排序</li><li id="tt">花费日期</li>';
                        for (var i = 0; i < ret.length; i++) {
                            inp += '<li>' + ret[i]['name'] + '</li>';
                        }
                        inp += '<li>总计</li>';
                        $('#app').html(inp);
//                        $('#data').html('');
                    }
                })
            }
        })
    })
//日历
layui.use('laydate', function () {
    var laydate = layui.laydate;
    laydate.render({
        elem: '#start'
        ,format: 'yyyy-MM-dd'
        ,value: new Date()
        ,max: 0
    });
});
layui.use('laydate', function () {
    var laydate = layui.laydate;
    laydate.render({
        elem: '#end'
        ,format: 'yyyy-MM-dd'
        ,value: new Date()
        ,max: 0
    });
});

    var tiaoshu=1000;//数据的条数
    var yexian=4;//每页几条数据
    var ye=  Math.ceil(tiaoshu/yexian);//可以分为几页
    var currentUrl01 = decodeURI(window.location.href);
    var arr01 = currentUrl01.split("?");
    $('#zongye').text(ye);
    $('#dang').html(arr01[1]);
    $(function () {
        $('#tiao').val(arr01[1]);
        setTimeout(function () {
            $("#zhuan").click()
        },10);
    });
    function bian(yeshu){
        var stateObject = {};
        var title = "";
        var newUrl ="" ;
        if(arr01[0]!=parseInt($('#dang').text())){
            newUrl =arr01[0]+"?"+yeshu;
            history.pushState(stateObject,title,newUrl);
        }
    }
    
    /////////////////////////顶部标签切换
    $(function(){
        $(".hf_tb_xz").click(function(){
            $(".hf_tb_xz").removeClass("active");
            $(this).addClass("active");
            $(this).css("cursor","pointer");
            $(".hf_tb_div").eq($(this).index()).show().siblings().hide();
            var start   = $('#start').val();
            var end   = $('#end').val();
            var did   = $('#did').val();
            var city   = $('input[name=city]:checked').val();
            var channel_id = $(this).attr('id');
            $.ajax({
                type: "POST",
                url: '/crm/Report/data',
                data: {id:'ds_channelcost',start: start,end:end,city:city,channel_id:channel_id,did:did},
                dataType: 'json',
                success: function (ret) {
                    var allCount = 0;
                    $('.hf_tb_cc').css('width',ret.width);
                    var inp="<ul>";
                    var index = 1;
                    for (var i in ret.date){
                        inp += '<li>'+index+'</li>';
                        inp += '<li>'+ret.date[i]+'</li>';
                        for(var j in ret.city){
                            if(ret.data[ret.date[i]] && ret.data[ret.date[i]][j]) {
                                inp += '<li>'+ret.data[ret.date[i]][j]+'</li>';
                            }else{
                                inp += '<li></li>';
                            }
                        }
                        if(ret.cityCount[ret.date[i]]){
                            inp += '<li>'+ret.cityCount[ret.date[i]]+'</li>';
                        }else{
                            inp += '<li></li>';
                        }

//                        inp += '<li style="width: 200px;">'+ret.data[j]['create_time']+'</li>';
//                        inp += '<li>'+ret.data[j]['staff_id']+'</li>';
                        index++;
                    }
                    inp += '<li></li><li>总计</li>';
                    for(var j in ret.city){
                        if(ret.all[j]) {
                            inp += '<li>'+ret.all[j]+'</li>';
                            allCount += ret.all[j];
                        }else{
                            inp += '<li></li>';
                        }
                    }
                    inp += '<li>'+allCount+'</li></ul>';
                    $('#data').html(inp);
                }
            })
            });
        })

    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
    }
    /////////////////////////////页面高度
    $(window).load(function(){
        hfH();
     });
    $(window).resize(function() {
        hfH();
    });
    function hfH() {
        var hfHight=$(window).height();
        var HFcon= parseInt(hfHight) - 400;
        $(".hf_tb_cc").css("height", HFcon);    
    }
    // 查询按钮
    $("#sub").click(function(){
        // 生成表格
        var start   = $('#start').val();
        var end   = $('#end').val();
        var did   = $('#did').val();
        var city   = $('input[name=city]:checked').val();
        var channel_id = $('.active').attr('id');
        var load = layer.load(1, {shade: false}); //0代表加载的风格，支持0-2
        // 重新载入表格
        $.ajax({
            type: "POST",
            url: '/crm/Report/data',
            data: {id:'ds_channelcost',did:did,start: start,end:end,city:city,channel_id:channel_id},
            dataType:'json',
            success: function(ret) {
                var allCount = 0;
                $('.hf_tb_cc').css('width',ret.width);
                var inp="<ul>";
                var index = 1;
                for (var i in ret.date){
                    inp += '<li>'+index+'</li>';
                    inp += '<li>'+ret.date[i]+'</li>';
                    for(var j in ret.city){
                        if(ret.data[ret.date[i]] && ret.data[ret.date[i]][j]) {
                            inp += '<li>'+ret.data[ret.date[i]][j]+'</li>';
                        }else{
                            inp += '<li></li>';
                        }
                    }
                    if(ret.cityCount[ret.date[i]]){
                        inp += '<li>'+ret.cityCount[ret.date[i]]+'</li>';
                    }else{
                        inp += '<li></li>';
                    }

//                        inp += '<li style="width: 200px;">'+ret.data[j]['create_time']+'</li>';
//                        inp += '<li>'+ret.data[j]['staff_id']+'</li>';
                    index++;
                }
                inp += '<li>'+index+'</li><li>总计</li>';
                for(var j in ret.city){
                    if(ret.all[j]) {
                        inp += '<li>'+ret.all[j]+'</li>';
                        allCount = allCount.add(ret.all[j]);
                    }else{
                        inp += '<li></li>';
                    }
                }
                inp += '<li>'+ret.all+'</li></ul>';
                $('#data').html(inp);
                layer.close(load);
            }
        });
    });
    // 导出按钮
    $("#export").click(function(){
        var start   = $('#start').val();
        var end   = $('#end').val();
        var did   = $('#did').val();
        var city   = $('input[name=city]:checked').val();
        var channel_id = $('.active').attr('id');
        var channel = $('.active').html();
        location.href = "/crm/Report/data.html?id=ds_channelcost&start="+start+"&end="+end+"&need=1&city="+city+"&channel_id="+channel_id+"&channel="+channel+"&did="+did;
    })
</script>

{/block}