{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(3).find(".navs").addClass("active");
    })
</script>
{/block}
{block name="css"}
<style>
    .layui-table-page {
        margin-left: 4px;
        height: auto!important;
    }
    .layui-input-inline{
        margin-top: 5px;
    }
    .layui-form-label{
        top:5px;
    }
    .layui-form-checked[lay-skin="primary"] i{
        background: #5FB878 !important;
        color: #fff!important;
    }
    .if_wrap .layui-table{
        margin-right: 10px;
        width: 30%;
        float: left;
    }
    .if_wrap .layui-table th, .layui-table td {
    text-align: center;
}
</style>
<link rel="stylesheet" href="__PUBLIC__/css/set.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 w-150">
                <input type="text" class="layui-input" id="start" name="timeArea" readonly="readonly" value="{$yestoday}">
            </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 w-150">
                <input type="text" class="layui-input" id="end" name="timeArea" readonly="readonly" value="{$yestoday}">
            </div>
            <input type="hidden" id="did" value="{$did}">
            <div class="layui-input-inline w-380">
                <button class="layui-btn layui-btn-primary cus-model-btn" id="sub" >
                    查询
                </button>
            </div>
        </div>
        <div class=" set-top layui-form layui-form-item">
            <b>获取成本</b>=实际花费/毛客资量  <br>
            <b>有效率</b>=有效客资/毛客资量  <br>
            <b>投入产出比</b>=总业绩/总花费  
        </div>
        <div class="layui-form">
  <table class="layui-table" width="300" id="tui">
    <colgroup>
      <col width="160">
      <col width="100">
      <col width="100">
      <col width="100">
    </colgroup>
    <thead>
      <tr  style="background:#aac;">
        <th colspan="4" align="center">推广部_电商日报数据明细</th>
      </tr> 
    </thead>
    <tbody>
      <tr style="background:#bbc;">
        <td>推广部</td>
        <td>汇总</td>
        <td>宝宝照</td>
        <td>孕妇照</td>
      </tr>
      <tr class="cost">
        <td>实际花费(元)</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="mkz">
        <td>毛客资(个)</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="valid">
        <td>有效客资(个)</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="fact">
        <td>业绩(元)</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr class="obtain">
        <td>获客成本(元/个)</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr class="validRate">
        <td>有效率</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr class="tc">
        <td>投入产出比</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
  <div style="float: left;height: 10px;width: 10px;padding-top: 18px;padding-right: 4px;">+</div>
  <table class="layui-table" width="300" id="xin">
    <colgroup>
      <col width="160">
      <col width="100">
      <col width="100">
      <col width="100">
    </colgroup>
    <thead>
      <tr  style="background:#aac;">
        <th colspan="4" align="center">新媒体部_电商日报数据明细</th>
      </tr> 
    </thead>
    <tbody>
      <tr style="background:#bbc;">
        <td>推广部</td>
        <td>汇总</td>
        <td>宝宝照</td>
        <td>孕妇照</td>
      </tr>
      <tr class="cost">
        <td>实际花费(元)</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="mkz">
        <td>毛客资(个)</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="valid">
        <td>有效客资(个)</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="fact">
        <td>业绩(元)</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr class="obtain">
        <td>获客成本(元/个)</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr class="validRate">
        <td>有效率</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr class="tc">
        <td>投入产出比</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
  <div style="float: left;height: 10px;width: 10px;padding-top: 18px;padding-right: 4px;">=</div>
  <table class="layui-table" width="300"  id="total">
    <colgroup>
      <col width="160">
      <col width="100">
      <col width="100">
      <col width="100">
    </colgroup>
    <thead>
      <tr  style="background:#aac;">
        <th colspan="4" align="center">电商(网络部)_电商日报数据明细</th>
      </tr> 
    </thead>
    <tbody>
      <tr style="background:#bbc;">
        <td>推广部</td>
        <td>汇总</td>
        <td>宝宝照</td>
        <td>孕妇照</td>
      </tr>
      <tr class="cost">
        <td>实际花费(元)</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="mkz">
        <td>毛客资(个)</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="valid">
        <td>有效客资(个)</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="fact">
        <td>业绩(元)</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr class="obtain">
        <td>获客成本(元/个)</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr  class="validRate">
        <td>有效率</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr class="tc">
        <td>投入产出比</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

    </div>
</div>
<script type="text/javascript">
    //日历
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#start'
            ,max:-1
            ,value:new Date()
            ,format: 'yyyy-MM-dd'
        });
        laydate.render({
            elem: '#end'
            ,max:0
            ,value:new Date()
            ,format: 'yyyy-MM-dd'
        });
    });

    // 数据表格
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element','jquery','form','util'], function(){
        var layer = layui.layer,form = layui.form,element = layui.element,util = layui.util,$=layui.jquery;

        var laydate  = layui.laydate, //日期
                laypage  = layui.laypage //分页
                table    = layui.table, //表格
                carousel = layui.carousel, //轮播
                upload   = layui.upload; //上传

        



    })

    // 查询按钮
    $("#sub").click(function(){
        // 生成表格
        var start   = $('#start').val();
        var end   = $('#end').val();
        var did   = $('#did').val();
        

        

        if (!start || typeof(start)=='undefined' || start.length <= 0) {
            layer.alert('请选择开始时间');
            return false;
        }
        if (!end || typeof(end)=='undefined' || end.length <= 0) {
            layer.alert('请选择结束时间');
            return false;
        }
        var index = layer.load(1, {shade: false}); //0代表加载的风格，支持0-2
        $.ajax({
           type: "POST",
           url: "/crm/Report/data.html",
           data: {id:'Qqbaby_ds_data',did:did,start:start,end:end},
           dataType:'json',
           success: function(ret){
               if(ret.code == 200){
                console.log(ret.data);
                   var data = ret.data;
                   var len = data.length;
                   for (var i = 0; i < len; i++) {
                        var cost = '';
                        var mkz = '';
                        var valid = '';
                        var fact = '';
                        var obtain = '';
                        var validRate = '';
                        var tc = '';
                        for (var j = 0; j < data[i]['cost'].length; j++) {
                            cost += "<td>"+data[i]['cost'][j]+"</td>";
                            mkz += "<td>"+data[i]['mkz'][j]+"</td>";
                            valid += "<td>"+data[i]['valid'][j]+"</td>";
                            fact += "<td>"+data[i]['fact'][j]+"</td>";
                            obtain += "<td>"+data[i]['obtain'][j]+"</td>";
                            validRate += "<td>"+data[i]['validRate'][j]+"</td>";
                            tc += "<td>"+data[i]['tc'][j]+"</td>";
                        }
                        if(i == 0){
                            $('#tui .cost').html(cost);
                            $('#tui .mkz').html(mkz);
                            $('#tui .valid').html(valid);
                            $('#tui .fact').html(fact);
                            $('#tui .obtain').html(obtain);
                            $('#tui .validRate').html(validRate);
                            $('#tui .tc').html(tc);
                        }else if(i == 1){
                            $('#xin .cost').html(cost);
                            $('#xin .mkz').html(mkz);
                            $('#xin .valid').html(valid);
                            $('#xin .fact').html(fact);
                            $('#xin .obtain').html(obtain);
                            $('#xin .validRate').html(validRate);
                            $('#xin .tc').html(tc);
                        }else{
                            $('#total .cost').html(cost);
                            $('#total .mkz').html(mkz);
                            $('#total .valid').html(valid);
                            $('#total .fact').html(fact);
                            $('#total .obtain').html(obtain);
                            $('#total .validRate').html(validRate);
                            $('#total .tc').html(tc);
                        }      
                   }

                   layer.close(index);
               }else{
                   $('#print').html(ret);
               }
           },
           error:function(XMLHttpRequest, textStatus, errorThrown){
               var ret = XMLHttpRequest.responseJSON
               layer.alert('操作失败');
           }
       })
    });

    // 导出按钮
    $("#export").click(function(){
        var start  = $('#start').val();
        var end = $('#end').val();
        var did = $('#did').val();
        var consultation_type_id  = $('#consultation_type_id').val();
        var customer_type   = $('#customer_type').val();
        // 取id
        var idArr=[];
        $("input:checkbox[name='staff_id']:checked").each(function() {
            idArr.push($(this).val());//向数组中添加元素
        });
        var ids=idArr.join(',');//将数组元素连接起来以构建一个字符串

        if (!start || typeof(start)=='undefined' || start.length <= 0) {
            layer.alert('请选择开始时间');
            return false;
        }
        if (!end || typeof(end)=='undefined' || end.length <= 0) {
            layer.alert('请选择开始时间');
            return false;
        }
        location.href = "/crm/Report/data.html?id=Qqbaby_ds_staff_data&start="+start+"&end="+end+"&need="+1+"&consultation_type_id="+consultation_type_id+"&did="+did+"&customer_type="+customer_type+"&staff_id="+ids;
    })
</script>
{/block}