{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>
            <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 $key eq 0}
                        <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>
            <table class="layui-table" lay-data="{height:700, url:'', id:'idTest', skin: 'row', even: true}" lay-filter="demo">
                <thead>
                <tr>
                    <th lay-data="{width:70,field:'id',align:'center',templet: '#titleTpl'}">序号</th>
                    <th lay-data="{width:100,field:'time'}">日期</th>
                    <th lay-data="{width:100,field:'cost'}">花费</th>
                    <th lay-data="{width:80,field:'mkz'}">毛客资</th>
                    <th lay-data="{width:80,field:'valid'}">有效</th>
                    <th lay-data="{width:80,field:'validRate'}">有效率</th>
                    <th lay-data="{width:80,field:'jd'}">进店</th>
                    <th lay-data="{width:80,field:'order'}">订单</th>
                    <th lay-data="{width:85,field:'jdRate'}">进店率</th>
                    <th lay-data="{width:85,field:'orderRate'}">成交率</th>
                    <th lay-data="{width:80,field:'orderObtain'}">订单成本</th>
                </tr>
                </thead>
            </table>
            <script type="text/html" id="titleTpl">
                {{d.LAY_TABLE_INDEX+1}}
            </script>
        </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(['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; //元素操作
    })
//日历
layui.use('laydate', function () {
    var laydate = layui.laydate;
    laydate.render({
        elem: '#start'
        ,format: 'yyyy-MM-dd'
        ,value: new Date()
        ,max: 0
    });
    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");
            var start   = $('#start').val();
            var end   = $('#end').val();
            var did   = $('#did').val();
            var channel_id = $(this).attr('id');
            var load = layer.load(1, {shade: false}); //0代表加载的风格，支持0-2
            table.reload('idTest', {
                url: '/crm/Report/data',
                where:  {id:'ds_channel_day',start: start,end:end,channel_id:channel_id,did:did},
                done: function(res, curr, count){
                    layer.close(load);
                }
            });
        });
    })
    /////////////////////////////页面高度
    $(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
        table.reload('idTest', {
            url: '/crm/Report/data',
            where:  {id:'Jw_ds_channel_day',start: start,end:end,channel_id:channel_id,did:did},
            done: function(res, curr, count){
                layer.close(load);
            }
        });
    });
    // 导出按钮
    $("#export").click(function(){
        var start   = $('#start').val();
        var end   = $('#end').val();
        var did   = $('#did').val();
        var channel_id = $('.active').attr('id');
        var channel = $('.active').html();
        location.href = "/crm/Report/data.html?id=Jw_ds_channel_day&start="+start+"&end="+end+"&need=1&channel_id="+channel_id+"&channel="+channel+"&did="+did;
    })
</script>

{/block}