{extend name="Public/base"/}
{block name="js"}
<script src="__PUBLIC__/layui245/layui.js?v={$Think.const.APP_VERSION}" type="text/jscript"></script>
<script>
    $(function(){
        $(".nul_bli").eq(3).find(".navb").addClass("active");
    })
</script>
{/block}
{block name="css"}
<style>
    .set-top .layui-table-tool {
        overflow-x:initial;
    }
    .layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] span{
        float: left;
    }
    .set-top #sub{
        margin-left: 25px;
    }
    .layui-table-page {
        margin-left: 4px;
        height: auto!important;
    }
    .cus-con .layui-form-item .layui-input-inline {
        float: left;
        width: 6%;
        margin-right: -20px;
    }
    .time{
        width: 160px !important;
        padding-right: 2px;
    }
    #sub {
        background: #01b88a;
        color: #fff;
        border: 1px solid #01b88a;
        font-size: 16px;
        margin-left: 25px;
    }
    .set-top .layui-form-select .layui-edge {
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -3px;
        cursor: pointer;
        border-width: 1px;
        border-top-color: white;
        border-top-style: solid;
        transition: all .3s;
        -webkit-transition: all .3s;
    }
    .set-top .layui-form-selected .layui-edge {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

</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__/layui245/css/layui.css"  media="all">
{/block}
{block name="main"}
<div class="if_wrap">
    <div class="cus-con">
        <div class="set_tit"><span>网销漏斗新版</span></div>
        <div class="set-top layui-form layui-form-item">
            <label style="width:70px;" class="layui-form-label mkz_t1">部门(店)：</label>
            <div class="layui-input-inline" style="width: 130px;">
                <select name="shop" id="shop" lay-filter="shop" lay-search="">
                    <option value="">请选择</option>
                    {volist name="shop" id="vo"}
                    <option value="{$vo.shop_code}">{$vo.shop_name}</option>
                    {/volist}
                </select>
            </div>
            <label style="width:50px;" class="layui-form-label mkz_t1">省：</label>
            <div class="layui-input-inline">
                <select name="staProvince" id="staProvince" lay-filter="staProvince" lay-search="">
                    <option value="">请选择</option>
                    {volist name="province" id="vo"}
                    <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                </select>
            </div>
            <label style="width:50px;" class="layui-form-label mkz_t1">市：</label>
            <div class="layui-input-inline">
                <select name="staCity" id="staCity" lay-filter="staCity" lay-search="">
                    <option value="">请选择</option>
                </select>
            </div>
            <label style="width:55px;" class="layui-form-label mkz_t1">渠道：</label>
            <div class="layui-input-inline">
                <select name="channel" id="channel_id" lay-filter="channel" lay-search="">
                    <option value="0">请选择</option>
                    {volist name="channel" id="vo"}
                    <option value="{$vo.id}">{$vo.channel_name}</option>
                    {/volist}
                </select>
            </div>
            <label style="width:80px;" class="layui-form-label mkz_t1">获取方式：</label>
            <div class="layui-input-inline">
                <select name="accessModel" id="accessModel_id" lay-filter="accessModel" lay-search="">
                    <option value="0">请选择</option>
                    {volist name="accessModel" id="vo"}
                    <option value="{$vo.id}">{$vo.accessmodel}</option>
                    {/volist}
                </select>
            </div>
            <label style="width:70px;" class="layui-form-label mkz_t1">消费类型：</label>
            <div class="layui-input-inline">
                <select name="consultation_type_id" id="consultation_type_id" lay-filter="consultation_type_id" lay-search="">
                    <option value="">请选择</option>
                    {volist name="consumptionType" id="ct"}
                    <option value="{$ct.id}">{$ct.consumption_name}</option>
                    {/volist}
                </select>
            </div>
            <label style="width:70px;" class="layui-form-label mkz_t1">开始日期：</label>
            <div class="layui-input-inline" class="time">
                <input type="text" class="layui-input" id="start" name="timeArea" readonly="readonly" value="">
            </div>
            <label style="width:70px;" class="layui-form-label mkz_t1">结束日期：</label>
            <div class="layui-input-inline" class="time">
                <input type="text" class="layui-input" id="end" name="timeArea" readonly="readonly" 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>-->
            <table class="layui-hide" id="test" lay-filter="test">

            </table>
        </div>
    </div>
</div>


<script type="text/html" id="toolbarDemo">
</script>
<script>
    //日历
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#start'
            ,format: 'yyyy-MM-dd'
            ,max:0
            ,value:new Date()
        });
        laydate.render({
            elem: '#end'
            ,format: 'yyyy-MM-dd'
            ,max:0
            ,value:new Date()
        });
    });
    layui.use('table', function(){
        var table = layui.table;
        // 查询按钮
        $("#sub").click(function() {
            var shop_code = $('#shop').val();
            var province = $('#staProvince').val();
            var city = $('#staCity').val();
            var channel_id = $('#channel_id').val();
            var accessModel_id = $('#accessModel_id').val();
            var start   = $('#start').val();
            var end   = $('#end').val();
            var did   = $('#did').val();
            var consultation_type_id   = $('#consultation_type_id').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
            table.render({
                elem: '#test'
                , url: '/crm/Report/data'
                , toolbar: '#toolbarDemo'
                , title: '网销漏斗统计'
                ,where: {id:'Wx_ld_new',did:did,province:province, city:city, start:start,end:end,channel_id:channel_id,consultation_type_id:consultation_type_id,shop_code:shop_code}
                , height: 'full-200'
                , cols: [[
                    , {field: 'id', title: 'ID', width: 80, align: 'center', sort: true}
                    , {field: 'staff', title: '员工',align: 'center', width: 100}
                    , {field: 'lrCustomer', title: '接入客资',align: 'center', width: 100, sort: true}
                    , {field: 'invCustomer', title: '有效获取',align: 'center', width: 100, sort: true}
                    , {field: 'allTel', title: '总手机', align: 'center',width: 100, sort: true}
                    , {field: 'yjd', title: '邀约量',align: 'center', width: 100, sort: true}
                    , {field: 'intoNum', title: '进店量',align: 'center', width: 100, sort: true}
                    , {field: 'orderNum', title: '成交量', align: 'center',width: 100, sort: true}
                    , {field: 'orderAmount', title: '套系总额',align: 'center', width: 120, sort: true}
                    , {field: 'factMoney', title: '营收',align: 'center', width: 120, sort: true}
                    , {field: 'orderAmountAvg', title: '套系均值',align: 'center', width: 120, sort: true}
                    , {field: 'invRate', title: '有效率', align: 'center',width: 100, sort: true}
                    , {field: 'intoRate', title: '进店率',align: 'center', width: 120, sort: true}
                    , {field: 'yjdRate', title: '邀约进店率',align: 'center', width: 120, sort: true}
                    , {field: 'orderRate', title: '成交率', align: 'center',width: 100, sort: true}
                    , {field: 'changeRate', title: '转化率',align: 'center', width: 100, sort: true}
                ]]
                ,done: function(res, curr, count){
                    layer.close(index);
                }
            });
        })
    });
    layui.use('form', function(){
        var form = layui.form;
        // 事业部  联动  部门
        form.on('select(shop)', function(data){
            var shop = $('#shop').val();
            if(shop != 0){
                $.ajax({
                    type: "POST",
                    url: '/crm/Customer/searchCity',
                    data: "type=1&shop_code="+shop,
                    success: function (msg) {
                        if (msg.length > 0) {
                            var inp = '<option value="">请选择</option>';
                            for (var i = 0; i < msg.length; i++) {
                                inp += '<option value="' + msg[i]["id"] + '">' + msg[i]["name"] + '</option>';
                            }
                            $('#staProvince').html(inp);
                            form.render('select');
                        } else {
                            var inp ='<option value="">请选择</option>';
                            $('#staProvince').html(inp);
                        }
                        layui.form.render('select');
                    }
                })
                $.ajax({
                    type: "POST",
                    url: '/crm/Customer/getChannel',
                    data: {shop_code:shop},
                    success: function (msg) {
                        if (msg.length > 0) {
                            var inp = '<option value="">请选择</option>';
                            for (var i = 0; i < msg.length; i++) {
                                inp += '<option value="' + msg[i]["id"] + '">' + msg[i]["channel_name"] + '</option>';
                            }
                            inp += '</select></div>';
                            $('#channel_id').html(inp);
                            form.render('select');
                        } else {
                            var inp ='<option value="">请选择</option>';
                            $('#channel_id').html(inp);
                        }
                        layui.form.render('select');
                    }
                });
            }else{
                $.ajax({
                    type: "POST",
                    url: '/crm/Customer/searchCityN',
                    data: {shop_code:$('#shop').val()},
                    success: function (msg) {
                        if (msg.length > 0) {
                            var inp = '<option value="">请选择</option>';
                            for (var i = 0; i < msg.length; i++) {
                                inp += '<option value="' + msg[i]["id"] + '">' + msg[i]["name"] + '</option>';
                            }
                            $('#staProvince').html(inp);
                            form.render('select');
                        } else {
                            var inp ='<option value="">请选择1</option>';
                            $('#staProvince').html(inp);
                        }
                        layui.form.render('select');
                    }
                })
                $.ajax({
                    type: "POST",
                    url: '/crm/Customer/getChannel',
                    data: {shop_code:$('#shop').val()},
                    success: function (msg) {
                        if (msg.length > 0) {
                            var inp = '<option value="">请选择</option>';
                            for (var i = 0; i < msg.length; i++) {
                                inp += '<option value="' + msg[i]["id"] + '">' + msg[i]["channel_name"] + '</option>';
                            }
                            inp += '</select></div>';
                            $('#channel_id').html(inp);
                            form.render('select');
                        } else {
                            var inp ='<option value="">请选择</option>';
                            $('#channel_id').html(inp);
                        }
                        layui.form.render('select');
                    }
                });
            }

        });
        // 省  联动  市
        form.on('select(staProvince)', function(data){
            var province_id = data.value;
            $.ajax({
                type:"POST",
                url: '/crm/Customer/searchCity',
                data: "pid="+province_id+"&type=2&shop_code="+$('#shop').val(),
                success: function (msg) {
                    var replace = '<select name="staCity" id="staCity" lay-filter="staCity" lay-search=""><option value="">请选择</option>';
                    for(var i=0;i<msg.length;i++){
                        replace += '<option value="'+msg[i]['id']+'">'+msg[i]['name']+'</option>';
                    }
                    replace +='</select>';
                    $("#staCity").html(replace);
                    form.render();
                }
            });
        });
    })
</script>
{/block}