{extend name="main" /}

{block name="body"}
{include file="breadcrumb" /}
<div class="layui-container" style="width: 100%">
    <div class="layui-row">
        <div class="layui-tab" lay-filter="custom_report">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="0" id="li_lay_id_0">PIXALATE</li>
            </ul>
        </div>
    </div>
    <div id="template"></div>
</div>

<div class="layui-form-item" id="custom_html" style="margin-top: 20px;display: none">
    <label class="layui-form-label" style="width: 10%">名称</label>
    <div class="layui-input-block" style="margin-left: 60px;">
        <input type="text" name="name" id="custom_name" style="width: 80%;" class="layui-input" value="">
    </div>
</div>
{/block}

{block name="css"}
<style>

    .layui-form-checkbox[lay-skin=primary] span {
        padding-right: 0;
        padding-top: 4px;
    }

    .layui-card-header .layui-icon {
        right: 0;
    }

    .layui-form-pane .layui-form-checkbox[lay-skin=primary] {
        margin-top: 0;
    }

    .layui-form-item .layui-input-inline {
        float: none;
    }

    td .layui-table-cell {
        /*display:table-cell;*/
        vertical-align: middle;
    }

    .layui-form-pane .layui-input-block {
        margin-left: 61px;
    }

    .layui-table-tool {
        min-height: 40px;
        line-height: 20px;
    }

    .layui-form-item {
        margin-bottom: 0;
    }

    .layui-from-screen {
        padding-top: 10px !important;
        width: 60px !important;
        height: 38px !important;
    }

    .layui-tab-title .layui-this:after {
        border-style: solid !important;
    }

    .layui-row {
        background-color: #fff;
    }

    .layui-tab {
        margin: 0;
    }

    .layui-btn-white button {
        margin: auto;
        background: #fff;
        text-align: center;
        border: 1px solid #ccc;
    }

    .layui-table-cell {
        padding: 0 10px;
    }

</style>
{/block}

{block name="js"}
<script>
    let SOURCE_ID = 4;
    layui.config({
        base: '/static/admin',
        version: true
    }).extend({ //设定模块别名
        adx_table: '/js/layui_table' //相对于上述 base 目录的子目录
    }).use(['adx_table'], function () {
        let table = layui.table,
            form = layui.form,
            laydate = layui.laydate,
            element = layui.element,
            adx_table = layui.adx_table;


        let report_data_url = '/admin/report/pixalate';
        let report_cols = [];
        let dimension_arr = [];
        let metrics_arr = [];

        let custom_id = 0;
        let custom_add_url = '/admin/customReport/add';
        let custom_update_url = '/admin/customReport/update';
        let custom_delete_url = '/admin/customReport/delete';

        let INSTL_ARR = [
            {'name': '是', 'value': '1'},
            {'name': '否', 'value': '0'},
        ];

        let dimension = ['date'];// 维度
        // let dimension = ['date', 'fraud_type', 'supply_id', 'app_bundle', 'demand_id', 'ad_format'];// 维度
        let metrics = ['impression', 'givt_impression', 'sivt_impression', 'givt_rate', 'sivt_rate', 'total_ivt', 'total_rate'];// 指标

        let table_id = '#report_id_0';
        let report_toolbar = '#report_toolbar_0';
        let limits = [100, 200, 300, 500, 1000, 2000, 5000];
        let limit = 100
        let screen_info = '';
        let whereData = {
            'metrics': metrics,
            'dimension': dimension,
        };
        let col_arr = {
            "date": {field: "date", title: "Date", minWidth: 90, sort: true, totalRowText: '合计'},
            "fraud_type": {field: "fraud_type", title: "Fraud Type", minWidth: 112, sort: true},
            "country": {field: "country", title: "Country", minWidth: 112, sort: true},
            "supply_id": {field: "supply_id", title: "Supply ID", minWidth: 112, sort: true},
            "demand_id": {field: "demand_id", title: "Demand ID", minWidth: 112, sort: true},
            "ad_format": {
                field: "ad_format", title: "Ad Format", minWidth: 112, sort: true, templet: function (d) {
                    return dataFormat(d.ad_format, AD_FORMAT_ARR)
                }
            },
            "app_bundle": {
                field: "app_bundle", title: "App Bundle", minWidth: 150, sort: true, templet: function (d) {
                    if (d.bundle_type != 3 && d.bundle_img == '' || d.bundle_img == undefined || d.bundle_img == null) {
                        if (d.app_bundle == null) {
                            return ''
                        }
                        return d.app_bundle
                    } else {
                        if (d.bundle_type == 1) {
                            return `${d.bundle}<a href="https://www.qimai.cn/app/baseinfo/appid/${d.bundle}/country/us" target="_blank" style="color: #787df4;">${d.app_bundle}<img style="padding-left: 5px;" src="${d.bundle_img}" width="30"></a>`
                        }
                        if (d.bundle_type == 2) {
                            return `${d.bundle}<a href="https://play.google.com/store/apps/details?id=${d.bundle}" target="_blank" style="color: #787df4;">${d.app_bundle}<img style="padding-left: 5px;" src="${d.bundle_img}" width="30"></a>`
                        }
                        if (d.bundle_type == 3) {
                            return `${d.bundle}<span style="color: #787df4;">${d.app_bundle}</span>`
                        }

                        return d.app_bundle
                    }
                }
            },
            "impression": {
                field: "impression",
                title: "Impression",
                minWidth: 95,
                sort: true,
                totalRow: '{{= d.TOTAL_NUMS }}'
            },
            'givt_impression': {
                field: 'givt_impression',
                title: 'GivtImpression',
                minWidth: 100,
                sort: true,
                totalRow: '{{= d.TOTAL_NUMS }}'
            },
            'givt_rate': {field: "givt_rate", title: "GivtRate", minWidth: 95, sort: true},
            "sivt_impression": {
                field: "sivt_impression",
                title: "SivtImpression",
                minWidth: 95,
                sort: true,
                totalRow: '{{= d.TOTAL_NUMS }}'
            },
            'sivt_rate': {field: "sivt_rate", title: "SivtRate", minWidth: 95, sort: true},
            'total_ivt': {field: "total_ivt", title: "TotalIvt", minWidth: 95, sort: true},
            'total_rate': {field: "total_rate", title: "TotalRate", minWidth: 95, sort: true},
        }
        let FILTER_DATA = {
            "SUPPLY_ID_ARR": SUPPLY_ALL_ID_ARR,
            "SUPPLY_AM_ARR": SUPPLY_AM_ARR,
            "DEMAND_ID_ARR": DEMAND_ALL_ID_ARR,
            "DEMAND_AM_ARR": DEMAND_AM_ARR,
        }

        let stime = funGetUTCDateStr(-6)
        let etime = funGetUTCDateStr(0)

        eachCols();
        function eachCols() {

            dimension_arr = []
            metrics_arr = []
            $.each(dimension, function (k, v) {
                dimension_arr.push(col_arr[v])
                // report_cols = dimension_arr.concat(metrics_arr)
            })
            $.each(metrics, function (k, v) {
                metrics_arr.push(col_arr[v])
                // report_cols = dimension_arr.concat(metrics_arr)
            })

        }

        report_cols = dimension_arr.concat(metrics_arr)

        let table_config = {
            elem: table_id,
            url: report_data_url,
            cols: report_cols,
            where: whereData,
            page: true,
            limits: limits,
            limit: limit,
            height: 'full-150',
            totalRow: true,
            toolbar: true,
            title: 'pixalate_report_' + funGetUTCDateStr(0),
            // is_resize : false
        }

        let def_fields = '{"timestamp":"' + stime + ' - ' + etime + '","dimension":["date"],"metrics":["impression"],"s_time":"' + stime + '","e_time":"' + etime + '"}';
        $('#li_lay_id_0').attr('data', def_fields)
        def_fields = $.parseJSON(def_fields)
        tabElement(0, def_fields)

        let report_search = `<div class="layui-inline" style="margin-top: -6px;">
                        <button class="layui-btn layui-bg-blue" lay-submit lay-filter="report_search" >
                            <label>Search</label>
                        </button>
                    </div>`
        $('#filter').append(report_search);

        let _tab = {
            _filter: 'custom_report',
            tabAdd: function (id, title, data) {
                let that = this
                //新增一个Tab项
                element.tabAdd(that._filter, {
                    title: title
                    , id: id
                })
                $('.layui-tab-title li[lay-id=' + id + ']').attr('data', data)
            },
            tabDelete: function (id) {
                //删除指定Tab项
                element.tabDelete(this._filter, id);
            },
            tabChange: function (id) {
                //切换到指定Tab项
                element.tabChange(this._filter, id);
            },
        }

        $('button[lay-tips="save_tips"]').on('mouseover', function () {
            let that = this;
            layer.tips('将当前页面查询条件保存为模版，方便快捷查询', that, {tips: 1});
        });
        $('button[lay-tips="del_tips"]').on('mouseover', function () {
            let that = this;
            layer.tips('删除当前查询模版', that, {tips: 1});
        });


        element.on('tab(custom_report)', function () {
            let lay_id = this.getAttribute('lay-id');
            let data = this.getAttribute('data');
            let fields = $.parseJSON(data)

            let new_dimension = fields.dimension != undefined ? fields.dimension : [];
            let new_metrics = fields.metrics != undefined ? fields.metrics : [];

            dimension = new_dimension;// 维度
            metrics = new_metrics;// 指标
            whereData = {
                'metrics': metrics,
                'dimension': dimension,
            };

            custom_id = lay_id;
            if (lay_id == 0) {
                fields = {
                    'timestamp': stime + ' - ' + etime,
                    'metrics': metrics,
                    'dimension': dimension,
                    'where': "{}"
                }
                $('#custom_name').val('');
            } else {
                $('#custom_name').val($(this).text());
            }
            tabElement(lay_id, fields)
        });

        //处理筛选项的赋值和where条件的组装
        function whereDataFormat(data, id) {

            let whereInfo = $.parseJSON(data)
            for (let key in PIXALATE_FILTER_LIST) {
                let val = '';
                switch (PIXALATE_FILTER_LIST[key].type) {
                    case 'input':
                        val = undefined !== whereInfo[key] && whereInfo[key].value.length > 0 ? whereInfo[key].value : '';
                        if ($.isArray(val)) {
                            val = val.join('|')
                        }
                        if (id != undefined && id != null) {
                            $('#layui-fluid_div_' + id + ' input[name="' + key + '"]').val(val);
                        } else {
                            $('input[name="' + key + '"]').val(val);
                        }
                        break;
                    case 'select':
                        val = undefined !== whereInfo[key] && whereInfo[key].value.length > 0 ? whereInfo[key].value : [];

                        if (val != undefined && key == 'traffic_type' && val != '') {
                            val = [val]
                        }
                        if (id != undefined && id != null) {
                            xmSelect.get('#report_' + key + '_' + id, true).setValue(val);
                        } else {
                            xmSelect.get('#report_' + key, true).setValue(val);
                        }
                        break;
                }
            }
        }

        getCustomReport();
        function getCustomReport() {
            $.ajax({
                url: '/admin/customReport/list',
                type: "post",
                data: {'source': SOURCE_ID},
                success: function (result) {
                    if (result.code == 1) {
                        $.each(result.data, function (k, v) {
                            _tab.tabAdd(v.id, v.name, v.param)
                        })
                    } else if (result.code == 0) {
                        return false;
                    }
                },
                error: function (error) {
                }
            });
        }


        //保存模版信息
        function saveTemplet(custom_name, id) {

            let new_where = {};
            let itemForm = $('.layui-form[lay-filter="report_form_' + id + '"]').eq(0)
            let nameIndex = {} //数组 name 索引
                , field = {}
                , fieldElem = itemForm.find('input,select,textarea') //获取所有表单域

            let compare_date = '';
            let tmp_arr = [];

            $.each(fieldElem, function (k, v) {

                v.name = (v.name || '').replace(/^\s*|\s*&/, '')
                if (!v.name) return
                if (/^checkbox|radio$/.test(v.type) && !v.checked) return

                let obj = PIXALATE_FILTER_LIST[v.name]
                if ($.inArray(v.name, tmp_arr) > -1) {
                    return;
                }
                if (v.name == 'compare_date') {
                    compare_date = v.value;
                    return
                }
                if (v.value != '' && !$.isEmptyObject(obj)) {

                    if (v.type == 'text' && $(v).attr('class') == 'xm-select-default') {

                        tmp_arr.push(v.name)
                        let arr = v.value.split(',')
                        if (v.name == 'traffic_type') {
                            arr = v.value
                        }
                        obj.value = arr
                        new_where[v.name] = obj
                    } else if (v.type == 'text' && $(v).attr('class') == 'layui-input') {
                        tmp_arr.push(v.name)

                        if (v.value.indexOf('|') > -1) {
                            let arr = v.value.split('|')
                            obj.op = 'in'
                            obj.value = arr
                        } else {
                            obj.op = 'like'
                            obj.value = v.value
                        }
                        new_where[v.name] = obj
                    }
                    field.where = JSON.stringify(new_where)
                }
                field[v.name] = v.value
            })

            let result = {}
            let param = {}

            result.name = custom_name
            param.timestamp = field.timestamp;
            param.dimension = whereData.dimension;
            param.metrics = whereData.metrics;
            param.where = field.where;
            param.time_zone = field.time_zone;
            param.report_sort = field.report_sort;
            param.compare_date = compare_date;

            result.param = param
            result.source = SOURCE_ID

            let url = custom_add_url;
            let type = '';
            if (custom_id > 0) {
                result.id = custom_id;
                url = custom_update_url
                type = 'update'
            }

            let date = field.timestamp.split(' - ')
            param.s_time = date[0]
            param.e_time = date[1]

            //发送请求
            ajaxRequest(result, url, type);
            if (field.where != '' && field.where != undefined && field.where != null) {
                let where_data = $.parseJSON(field.where)
                $.each(where_data, function (k, v) {

                    if (k == 'not_bundle') {
                        where_data[k].op = 'notin';
                        if (!$.isArray(v.value)) {
                            where_data[k].value = [v.value];
                        }
                    }
                })
                field.where = JSON.stringify(where_data);

                if (field.where.indexOf('not_bundle') > -1) {
                    field.where = field.where.replace('not_bundle', "app_bundle");
                }
                param.where = field.where;
            }

            table_config.elem = table_id
            table_config.url = report_data_url
            table_config.cols = report_cols
            table_config.where = param
            table_config.is_resize = false;
            table_config.toolbar = true
            adx_table.newTableParam(table_config);
        }

        function setName(id) {
            let custom_name = '';
            layer.open({
                type: 1,
                title: '保存报表查询模版',
                content: $('#custom_html'),
                area: ['30%', '30%'],
                shade: [0.01, '#fff'],
                btn: ['保存', '取消'],
                btnAlign: 'c',
                yes: function (index, layero) {
                    custom_name = $('#custom_name').val();

                    if (custom_name == undefined || custom_name == null || custom_name == '') {
                        layer.msg('名称不能为空');
                        return
                    }
                    //保存数据
                    saveTemplet(custom_name, id);
                    layer.close(index);
                },
                btn2: function (index, layero) {
                    layer.close(index);
                }
            })
        }

        function delTemplet(id) {
            ajaxRequest({'id': id}, custom_delete_url)
            $('#layui-fluid_div_' + id).remove();
            _tab.tabDelete(id);
            //切换到默认的tab
            _tab.tabChange(0)
        }

        $('#timestamp').val(stime + ' - ' + etime)

        function eachData(filter, div_id) {
            let column = [];
            $.each(filter, function (k, v) {
                if (div_id != undefined && div_id != null && div_id != '') {
                    $('#' + div_id + ' input[name=' + v + ']').prop('checked', true)
                } else {
                    $('input[name=' + v + ']').prop('checked', true)
                }
                if ($.inArray(v, filter) > -1) {
                    column.push(col_arr[v])
                }

            })
            form.render('checkbox');
            return column
        }

        function ajaxRequest(dataInfo, url, type) {

            let result = request(dataInfo, url, 'POST');
            if (!result) {
                return false;
            }

            if (type === 'update') {
                $('.layui-tab-title li[lay-id="' + result.data.id + '"]').text(result.data.name)
                $('.layui-tab-title li[lay-id="' + result.data.id + '"]').prop('data', result.data.param)
            } else {
                if (result.data.id !== undefined && result.data.id !== null && result.data.id !== '') {
                    custom_id = result.data.id
                    _tab.tabAdd(result.data.id, result.data.name, result.data.param)
                    $('.layui-tab-title li').removeClass('layui-this');
                    $('.layui-tab-title li[lay-id="' + result.data.id + '"]').addClass('layui-this')
                    tabElement(result.data.id, dataInfo.param)
                }
            }

        }

        function tabElement(id, fields) {

            table_id = '#report_id_' + id;
            report_toolbar = '#report_toolbar_' + id;
            eachCols()

            form.on('checkbox(dimension_' + id + ')', function (data) {
                if (data.value == undefined || data.value == null || data.value == '') {
                    data.value = $(data.elem).attr('name');
                }
                //选中则放入数组，否则移除
                if (data.elem.checked == true) {
                    dimension.push(data.value)
                } else {
                    dimension.splice($.inArray(data.value, dimension), 1);
                }
                eachCols()
            });
            form.on('checkbox(metrics_' + id + ')', function (data) {
                if (data.value == undefined || data.value == null || data.value == '') {
                    data.value = $(data.elem).attr('name');
                }
                //选中则放入数组，否则移除
                if (data.elem.checked == true) {
                    metrics.push(data.value)
                    report_cols.push(col_arr[data.value])
                    if (data.value == 'sivt_impression'){
                        metrics.push('sivt_rate')
                        report_cols.push(col_arr['sivt_rate'])
                    }
                    if (data.value == 'givt_impression'){
                        metrics.push('givt_rate')
                        report_cols.push(col_arr['givt_rate'])
                    }
                } else {
                    if (data.value == 'sivt_impression'){
                        metrics.splice($.inArray('sivt_rate', metrics), 1);
                        report_cols.splice($.inArray(col_arr['sivt_rate'], report_cols), 1);
                        if($.inArray('total_rate', metrics) > -1){
                            metrics.splice($.inArray('total_rate', metrics), 1);
                            metrics.splice($.inArray('total_ivt', metrics), 1);
                            report_cols.splice($.inArray(col_arr['total_rate'], report_cols), 1);
                            report_cols.splice($.inArray(col_arr['total_ivt'], report_cols), 1);
                        }
                    }
                    if (data.value == 'givt_impression'){
                        metrics.splice($.inArray('givt_rate', metrics), 1);
                        report_cols.splice($.inArray(col_arr['givt_rate'], report_cols), 1);
                        if($.inArray('total_rate', metrics) > -1){
                            metrics.splice($.inArray('total_rate', metrics), 1);
                            metrics.splice($.inArray('total_ivt', metrics), 1);
                            report_cols.splice($.inArray(col_arr['total_rate'], report_cols), 1);
                            report_cols.splice($.inArray(col_arr['total_ivt'], report_cols), 1);
                        }
                    }
                    metrics.splice($.inArray(data.value, metrics), 1);
                    report_cols.splice($.inArray(col_arr[data.value], report_cols), 1);
                }
                let inputs = $('input[lay-filter="metrics_' + id + '"]')
                let isShowTotal = false
                for (var i = 0; i < inputs.length; i++) {
                    if (!inputs[i].checked && (inputs[i].defaultValue == 'sivt_impression' || inputs[i].defaultValue == 'givt_impression')){
                        return
                    }
                    isShowTotal = true
                }
                if (isShowTotal && $.inArray('total_rate', metrics) == -1){
                    metrics.push('total_rate')
                    metrics.push('total_ivt')
                    report_cols.push(col_arr['total_rate'])
                    report_cols.push(col_arr['total_ivt'])
                }
                eachCols()
            });

            $('.layui-fluid').removeClass('layui-show')
            let div = $('#layui-fluid_div_' + id).text();
            if (div != undefined && div != '' && div != null) {

                $('#layui-fluid_div_' + id).addClass('layui-show')
                let new_dimension = fields.dimension != undefined ? fields.dimension : [];
                let new_metrics = fields.metrics != undefined ? fields.metrics : [];

                dimension = new_dimension;// 维度
                metrics = new_metrics;// 指标
                whereData = {
                    'metrics': metrics,
                    'dimension': dimension,
                };
                return false;
            }

            let html = `<div class="layui-fluid layui-show" lay-item-id="${id}" id="layui-fluid_div_${id}" style="padding: 0;display: none">
                            <div class="layui-card">
                                <div class=" layui-card-header layuiadmin-card-header-auto" style="padding-top: 5px;padding-bottom: 0;">
                                    <form class="layui-form layui-form-pane" method="post" lay-filter="report_form_${id}">
                                        <div class="layui-form-item" >
                                            <label class="layui-form-label" style="padding-top: 10px;width: 60px;" >时间</label>
                                            <div class="layui-input-inline" style="margin-top: -7px;">
                                                <input type="text" name="timestamp" id="timestamp_${id}" lay-verify="datetime" class="layui-input" value="" placeholder="查询日期">
                                            </div>
                                        </div>
                                        <div class="layui-form-item" pane="" style="line-height: 32px;margin-bottom: 4px;">
                                            <label class="layui-form-label" style="padding-top: 10px;width: 60px;" >维度</label>
                                            <div class="layui-input-block" id="dimension_${id}" >
                                            </div>
                                        </div>
                                        <div class="layui-form-item" pane="" style="line-height: 32px;margin-bottom: 4px;">
                                            <label class="layui-form-label" style="padding-top: 10px;width: 60px;" >指标</label>
                                            <div class="layui-input-block" id="metrics_${id}">
                                            </div>
                                        </div>
                                        <div class="layui-form-item" >
                                            <label class="layui-form-label layui-from-screen" >筛选</label>
                                            <div class="layui-input-block" id="filter_${id}">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="layui-card-body" style="padding-top: 0;">
                                    <table class="layui-table" id="report_id_${id}" lay-filter="report_filter_${id}" style="margin-top: -2px;">
                                    </table>
                                </div>
                                <script type="text/html" id="report_toolbar_${id}">
                                    <div class="layui-btn-container layui-btn-white">
                                        <button class="layui-btn layui-btn-sm layui-toolbar-style" style="color: #555;" lay-tips="save_tips" lay-event="save_templet_${id}">保存模版</button>
                                        <button class="layui-btn layui-btn-sm layui-toolbar-style" style="color: #555;" lay-tips="del_tips" lay-event="del_templet_${id}">删除模版</button>
                                    </div>
                                <\/script>
                            </div>
                        </div>`;

            $('#template').append(html);


            //维度
            let dimension_html = '';
            $.each(PIXALATE_DIMENSION_LIST, function (k, v) {
                let checkedStr = '';
                if ($.inArray(k, dimension) > -1) {
                    checkedStr = 'checked'
                }
                dimension_html += `<input type="checkbox" name="${k}" value="${k}" lay-filter="dimension_${id}" title="${v}" lay-skin="primary" ${checkedStr}>`
            })

            $('#dimension_' + id).html(dimension_html)

            //指标
            let metrics_html = '';
            $.each(PIXALATE_METRICS_LIST, function (k, v) {
                let checkedStr = '';
                if ($.inArray(k, metrics) > -1) {
                    checkedStr = 'checked'
                }
                metrics_html += `<input type="checkbox" name="${k}" value="${k}" lay-filter="metrics_${id}" title="${v}" lay-skin="primary" ${checkedStr}>`
            })
            $('#metrics_' + id).html(metrics_html)
            form.render('checkbox')

            laydate.render({
                elem: '#timestamp_' + id, type: 'date', range: true, trigger: 'click', isPreview: false
                , btns: ['clear', 'confirm'],
            });

            $.each(PIXALATE_FILTER_LIST, function (k, v) {

                if (v.type == 'input') {
                    let html = `<div class="layui-input-inline" style="width: 13%;margin-top: -7px;">
                                <input  type="text" name="${k}"  placeholder="${v.name}" autocomplete="off" class="layui-input">
                            </div>`
                    $('#filter_' + id).append(html);
                }


                if (v.type == 'select') {

                    let html = `<div class="layui-input-inline" style="width: 13%;margin-top: -7px;">
                                    <div id="report_${k}_${id}"></div>
                                </div>`
                    $('#filter_' + id).append(html);
                    let data_arr = FILTER_DATA[v.data]


                    xmSelect.render({
                        el: '#report_' + k + '_' + id,
                        tips: v.name,
                        name: k,//表单提交时的name
                        // autoRow: true,
                        data: data_arr,
                        initValue: [''],
                        filterable: true,
                        toolbar: {show: true, list: ['CLEAR']},
                    })
                }
            })

            let report_search = `<div class="layui-inline" style="margin-top: -6px;">
                        <button class="layui-btn layui-bg-blue" lay-submit lay-filter="report_search_${id}" >
                            <label>Search</label>
                        </button>
                    </div>`
            $('#filter_' + id).append(report_search);

            let field_info = setNewInfo(id, fields)

            table_config.elem = table_id
            table_config.url = report_data_url
            table_config.cols = report_cols
            table_config.where = field_info
            table_config.is_resize = false;
            table_config.toolbar = true
            adx_table.newTableParam(table_config);

            //监听搜索
            form.on('submit(report_search_' + id + ')', function (data) {
                if (dimension == '') {
                    layui.layer.msg('请选择维度')
                    return false;
                }
                let where = {};
                let field = data.field
                let timestamp = data.field.timestamp
                timestamp = timestamp.split(' - ')
                data.field.s_time = timestamp[0]
                data.field.e_time = timestamp[1]

                $.each(PIXALATE_FILTER_LIST, function (k, v) {

                    if (field[k] != '' && field[k] != undefined && field[k] != null) {
                        if (v.type == 'select') {
                            let arr = field[k].split(',')
                            if (k == 'traffic_type') {
                                arr = field[k]
                            }

                            v.value = arr
                            delete v.name
                            delete v.data
                            where[k] = v
                        }
                        if (v.type == 'input') {

                            if (field[k].indexOf('|') > -1) {
                                let arr = field[k].split('|')
                                if (k != 'not_bundle') {
                                    v.op = 'in'
                                } else {
                                    v.op = 'notin'
                                }
                                v.value = arr
                            } else {
                                if (k != 'not_bundle') {
                                    v.op = 'like'
                                } else {
                                    v.op = 'notin'
                                }
                                v.value = field[k]
                            }

                            delete v.name
                            delete v.data
                            if (k == 'not_bundle') {
                                k = 'app_bundle';
                                if (!$.isArray(v.value)) {
                                    v.value = [v.value]
                                }
                            }
                            where[k] = v
                        }
                    }
                })

                let filter = whereData.dimension.concat(whereData.metrics)
                report_cols = eachData(filter, 'layui-fluid_div_' + id)

                data.field.where = JSON.stringify(where)
                data.field.dimension = whereData.dimension
                data.field.metrics = ['impression', 'givt_impression', 'sivt_impression']

                let compare_where = [];

                if (compare_where.length > 0 && data.field.compare_date == '') {
                    //如果不选择对比时间，但选择了其它条件，则对比时间和筛选时间一致
                    data.field.compare_date = data.field.timestamp
                }

                data.field.compare_where = JSON.stringify(compare_where)
                let now_page_size = $(".layui-laypage-limits").find("option:selected").val();
                if (now_page_size != '' && now_page_size != undefined && now_page_size > 0) {
                    limit = now_page_size
                }


                screen_info = data.field;
                table_config.elem = table_id
                table_config.cols = report_cols
                table_config.url = report_data_url
                table_config.where = data.field
                table_config.is_resize = false;
                table_config.toolbar = true
                adx_table.newTableParam(table_config);
                // adx_table.tableParam('#report_id',report_data_url,'POST',report_cols,true,'','','#report_toolbar',data.field,'full-150',true,limits,limit,'detail_report_'+funGetUTCDateStr(0));
                return false;
            });


            table.on('toolbar(report_filter_' + id + ')', function (obj) {

                switch (obj.event) {
                    case 'save_templet_' + id:
                        setName(id)
                        break;
                    case 'del_templet_' + id:
                        // let id = $('.layui-tab .layui-tab-title .layui-this').attr('lay-id')

                        if (id == 0) {
                            layer.msg('当前节点不可删除');
                            return
                        }
                        layer.confirm('确定删除?', {icon: 3, title: '删除当前查询模版'}, function (index) {
                            delTemplet(id);
                            layer.close(index);
                        });
                        break;
                }
                ;
            });


        }

        function setNewInfo(id, fields) {

            custom_id = id;
            dimension = ['date'];
            // dimension = ['date', 'fraud_type', 'supply_id', 'app_bundle', 'demand_id', 'ad_format'];
            metrics = ['impression', 'givt_impression', 'sivt_impression', 'givt_rate', 'sivt_rate', 'total_ivt', 'total_rate'];
            report_cols = [];
            if (id == 0) {
                fields = {
                    'timestamp': stime + ' - ' + etime,
                    'metrics': metrics,
                    'dimension': dimension,
                    'where': "{}"
                }
                $('#custom_name').val('');
            }

            let new_dimension = fields.dimension != undefined ? fields.dimension : [];
            let new_metrics = fields.metrics != undefined ? fields.metrics : [];

            dimension = new_dimension;// 维度
            metrics = new_metrics;// 指标
            whereData = {
                'metrics': metrics,
                'dimension': dimension,
            };

            $('#timestamp_' + id).val(fields.timestamp);//时间赋值

            //将全部复选框取消选中
            $('input[lay-filter="dimension_' + id + '"]').prop('checked', false)
            $('input[lay-filter="metrics_' + id + '"]').prop('checked', false)

            let div_id = 'layui-fluid_div_' + id
            let filter = new_dimension.concat(new_metrics)

            //处理需要展示的维度和指标
            let column = eachData(filter, div_id)
            report_cols = column

            if (fields.where != undefined && fields.where != null && fields.where != '') {
                //处理筛选数据
                whereDataFormat(fields.where, id);

                let where_data = $.parseJSON(fields.where)
                $.each(where_data, function (k, v) {
                    if (k == 'not_bundle') {
                        where_data[k].op = 'notin';
                        if (!$.isArray(v.value)) {
                            where_data[k].value = [v.value];
                        }
                    }
                })
                fields.where = JSON.stringify(where_data);
                if (fields.where.indexOf('not_bundle') > -1) {
                    fields.where = fields.where.replace('not_bundle', "app_bundle");
                }
            }

            fields.dimension = new_dimension
            fields.metrics = new_metrics
            delete fields.filter

            //获取当前页面的limit
            let now_page_size = $(".layui-laypage-limits").find("option:selected").val();
            if (now_page_size != '' && now_page_size != undefined && now_page_size > 0) {
                limit = now_page_size
            }

            return fields;
        }

    });


</script>
{/block}