{extend name="main" /}

{block name="body"}
{include file="breadcrumb" /}
<div class="layui-container" style="width: 100%">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class=" layui-card-header layuiadmin-card-header-auto">
                <form class="layui-form" method="post" lay-filter="magic_search_form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <div id="search_supply_id"></div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <div id="search_demand_id"></div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <div id="search_platform"></div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <div id="search_status_id"></div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-bg-blue" lay-submit lay-filter="magic_search">
                                <label>Search</label>
                            </button>
                        </div>


                        <div class="layui-inline" style="float: right;right: 15px;">
                            <button type="button" class="layui-btn layui-bg-blue" id="magic_create" >
                                <label>添加</label>
                            </button>
                        </div>

                    </div>
                </form>

            </div>
            <div class="layui-card-body">
                <table class="layui-table" id="magic_id" lay-filter="magic_filter">
                </table>
            </div>
            <script type="text/html" id="magic_tool">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
            </script>
        </div>
        <div class="pages">{$list|raw}</div>
    </div>
</div>


<div id="add_magic" style="display: none">
    <form class="layui-form" lay-filter="magic_form" id="magic_form" style="margin-top: 30px;">
        <div class="layui-form-item">
            <blockquote class="magic_desc">
                magic bundle是一个变换RTB请求参数的功能，只适用于app的流量，不支持site的流量。主要用来变换流量，将supply请求的App A变换成App B发给demand，已获得更好的填充；
                流量只有满足所选的所有规则，请求参数才会被替换成模版规定的参数，不满足的流量不能使用模版，会发送原始请求参数
            </blockquote>
        </div>
        <div class="layui-col-md12">
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">Supply ID:</label>
                    <div class="layui-input-block layui-input-new">
                        <div id="magic_supply_id"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Demand ID:</label>
                    <div class="layui-input-block layui-input-new">
                        <div id="magic_demand_id"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Platform:</label>
                    <div class="layui-input-block layui-input-new">
                        <div id="magic_platform"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Ad Format:</label>
                    <div class="layui-input-block layui-input-new">
                        <div id="magic_ad_format"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">Bundle 黑名单:</label>
                    <div class="layui-input-block layui-input-new">
                        <input type="text" name="bundle_whitelist" value="" placeholder="黑名单内的bundle不使用magic bundle，多个竖线分割" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Bundle 白名单:</label>
                    <div class="layui-input-block layui-input-new">
                        <input type="text" name="bundles" value="" placeholder="空会替换所有bundle，不为空只替换白名单内的bundle，多个竖线分割" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Country:</label>
                    <div class="layui-input-block layui-input-new">
                        <div id="magic_country"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Ratio:</label>
                    <div class="layui-input-block layui-input-new">
                        <input type="text" name="ratio" value="" placeholder="比例，0-100，默认100" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">

            <div class="layui-form-item">
                <label class="layui-form-label">Magic Bundles 模版:</label>
                <div class="layui-input-block layui-input-new">
                    <div id="magic_template_id"></div>
                </div>
            </div>
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">Magic Bundles:</label>-->
<!--                <div class="layui-col-md10" id="magic_bundles" style="width: 80%;background-color: #f6f6f6;padding-bottom: 10px;">-->
<!--                    <div class="layui-inline layui-hand" id="magic_bundles_id" style="padding-top: 10px;margin: 0;left: 5px;">➕</div>-->
<!--                </div>-->
<!--            </div>-->
        </div>
    </form>
</div>
{/block}
{block name="css"}
<style>
    .magic_desc {
        margin-left: 5%;
        margin-right: 5%;
        color: #721c24;
    }

    .layui-table-cell {
        height: 38px;
        line-height: 38px;
    }

    .layui-form-label {
        width: 130px;
    }

    .layui-input-block {
        margin-left: 160px!important;
        margin-right: 65px;
    }

    .layui-hand {
        cursor: pointer;
    }

</style>
{/block}

{block name="js"}
<script>

    let is_auth = {$is_auth}

    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,
            adx_table = layui.adx_table;

        let magic_list_url = '/admin/magicBundle/index';
        let magic_edit_url = '/admin/magicBundle/edit';
        let magic_add_url = '/admin/magicBundle/add';


        let status_data = [{'name':'开启','value':8001},{'name':'关闭','value':8002}]

        xmSelect.render({
            el: '#search_status_id',
            tips: 'Status',
            data: status_data,
            initValue: [8001],
            model: {label: {type: 'text'}},
            name: 'status',//表单提交时的name
            radio: true,//是否开启单选模式
            clickClose: true,
        })

        let magic_demand_id = xmSelect.render({
            el: '#magic_demand_id',
            tips: 'Demand',
            data: DEMAND_ALL_ID_ARR,
            name: 'demand_id',//表单提交时的name
            radio: true,//是否开启单选模式
            clickClose: true,
            filterable: true,
            toolbar: {show: true, list: ['CLEAR']},
        })

        let magic_supply_id = xmSelect.render({
            el: '#magic_supply_id',
            tips: 'Supply ID',
            data: SUPPLY_ALL_ID_ARR,
            name: 'supply_id',//表单提交时的name
            layVerify: 'supply_id',
            layVerType: 'tips',
            radio: true,//是否开启单选模式
            clickClose: true,
            filterable: true,
            toolbar: {show: true, list: ['CLEAR']},
        })

        let search_demand_id = xmSelect.render({
            el: '#search_demand_id',
            tips: 'Demand ID',
            data: DEMAND_ALL_ID_ARR,
            model: {label: {type: 'text'}},
            name: 'demand_id',//表单提交时的name
            radio: true,//是否开启单选模式
            clickClose: true,
            filterable: true,
            toolbar: {show: true, list: ['CLEAR']},
        })

        let search_supply_id = xmSelect.render({
            el: '#search_supply_id',
            tips: 'Supply ID',
            data: SUPPLY_ALL_ID_ARR,
            name: 'supply_id',//表单提交时的name
            layVerify: 'supply_id',
            layVerType: 'tips',
            radio: true,//是否开启单选模式
            clickClose: true,
            filterable: true,
            toolbar: {show: true, list: ['CLEAR']},
        })

        let magic_platform = xmSelect.render({
            el: '#magic_platform',
            tips: 'Platform',
            data: PLATFORM_ARR,
            toolbar: {show: true, list: ['CLEAR']},
            name: 'platform',//表单提交时的name
            layVerify: 'platform',
            layVerType: 'tips',
            radio: true,//是否开启单选模式
            clickClose: true,
        })

        let platform = xmSelect.render({
            el: '#search_platform',
            tips: 'Platform',
            data: PLATFORM_ARR,
            toolbar: {show: true, list: ['CLEAR']},
            name: 'platform',//表单提交时的name
            layVerify: 'platform',
            layVerType: 'tips',
            radio: true,//是否开启单选模式
            clickClose: true,
        })

        let magic_ad_format = xmSelect.render({
            el: '#magic_ad_format',
            tips: 'Ad Format',
            data: AD_FORMAT_ARR,
            toolbar: {show: true, list: ['CLEAR']},
            name: 'ad_format',//表单提交时的name
            radio: true,//是否开启单选模式
            clickClose: true,
        })

        let magic_country = xmSelect.render({
            el: '#magic_country',
            tips: 'Country',
            data: COUNTRY_LIST,
            name: 'country',//表单提交时的name
            prop: {
                name: 'name_cn',
                value: 'code',
            },
            filterable: true,
            toolbar: {show: true, list: ['CLEAR']},
        })
        let magic_template_id = xmSelect.render({
            el: '#magic_template_id',
            tips: 'Magic Bundle 模版',
            data: [],
            name: 'request_tpl_ids',//表单提交时的name
            filterable: true,
            toolbar: {show: true, list: ['CLEAR']},
        })
        $.ajax({
            url: "/admin/magicBundle/gettemplates",
            type: 'get',
            async: false,
            success: function (res) {
                if (res.code === 0){
                    magic_template_id.update({data:res.data})
                }
            }
        });

        let magic_cols = [
            {field:'id', title: 'ID', fixed: 'left', width:'6%' }
            ,{field:'supply_id', title: 'Supply ID', fixed: 'left', width:'14%', templet:function(d){
                    return dataFormat(d.supply_id,SUPPLY_ALL_ID_ARR)
                }}
            ,{field:'demand_id', title: 'Demand ID', fixed: 'left', width:'14%', templet:function(d){
                    return dataFormat(d.demand_id,DEMAND_ALL_ID_ARR)
                }}
            ,{field:'platform', title: 'Platform', width:'12%', templet:function(d){
                    return '<div id="platform-' + d.id + '" ></div>'
                } }
            ,{field:'ad_format', title: 'Ad Format', width:'12%', templet:function(d){
                    return '<div id="ad_format-' + d.id + '" ></div>'
                } }
            ,{field:'country', title: 'Country', width:'14%', templet:function(d){
                    return '<div id="country-' + d.id + '" ></div>'
                } }
            ,{field:'bundles', title: 'Bundles',width:'12%', edit:'text' }
            ,{field:'magic_bundles', title: 'Magic Bundles',width:'12%', edit:'text' }
            ,{field:'request_tpl_ids', title: 'Magic Bundles 模版',width:'12%', edit:'text' }
            ,{field:'bundle_whitelist', title: 'Bundle Whitelist', width:'12%', edit:'text' }
            ,{field:'ratio', title: 'Ratio', width:'6%', edit:'text' }
            ,{field:'status', title: 'Status', width:'8%',  templet:"<div>{{layui.status(d.id,d.status)}}</div>"}
            ,{field:'record_time', title: 'Record Time', width:'15%' }
            ,{field:'update_time', title: 'Update Time', width:'15%' }
            ,{fixed: 'right', title:'操作', toolbar: '#magic_tool', width:'6%'}
        ]

        let done = function (res){
            res.data.forEach(item =>  {

                let platform = xmSelect.render({
                    el: '#platform-' + item.id,
                    autoRow: true,
                    initValue: [item.platform],
                    model: { type: 'fixed',
                        label: {type: 'text'}
                    },
                    radio: true,//是否开启单选模式
                    clickClose: true,
                    toolbar: {show: true, list: ['CLEAR']},
                    data: PLATFORM_ARR,
                    on: function(data){
                        //arr:  当前多选已选中的数据
                        let arr = data.arr;
                        let send_data = {}
                        send_data['id'] = item.id;
                        send_data['platform'] = arr[0].value
                        //更新信息
                        editInfo(send_data)
                    },
                })

                let ad_format = xmSelect.render({
                    el: '#ad_format-' + item.id,
                    autoRow: true,
                    initValue: [item.ad_format],
                    model: { type: 'fixed', label: {
                            type: 'text', text: {
                                separator: '|',
                            }}},
                    toolbar: {show: true, list: ['CLEAR']},
                    data: AD_FORMAT_ARR,
                    radio: true,//是否开启单选模式
                    clickClose: true,
                    on: function(data){
                        //arr:  当前多选已选中的数据
                        let arr = data.arr;
                        let send_data = {}
                        send_data['id'] = item.id;
                        send_data['ad_format'] = arr[0].value
                        //更新信息
                        editInfo(send_data)
                    },
                })

                let countryData = item.country.split('|');
                let country = xmSelect.render({
                    el: '#country-' + item.id,
                    autoRow: true,
                    initValue: countryData,
                    prop: {
                        name: 'code',
                        value: 'code',
                    },
                    filterable: true,
                    model: { type: 'fixed', label: {
                            type: 'text', text: {
                                separator: '|',
                            }
                        }},
                    toolbar: {show: true, list: ['CLEAR']},
                    data: COUNTRY_LIST,
                    on: function(data){
                        //arr:  当前多选已选中的数据
                        let arr = data.arr;
                        let country_arr = [];
                        for(let i = 0; i < arr.length; i++) {
                            country_arr.push(arr[i].code);
                        }
                        let country_str = country_arr.join("|");
                        let send_data = {}
                        send_data['id'] = item.id;
                        send_data['country'] = country_str

                        //更新信息
                        editInfo(send_data)
                    },
                })

            })
            $(window).unbind("resize")
        }

        let table_config = {
            elem : '#magic_id',
            url : magic_list_url,
            cols : magic_cols,
            page : true,
            done : done,
            is_resize : false
        }
        adx_table.newTableParam(table_config);

        $('#magic_create').click(function (){
            add_edit(magic_add_url);
        });

        table.on('tool(magic_filter)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            if(layEvent === 'edit'){ //编辑
                add_edit(magic_edit_url,data.id);

                formatMagicBundles(data.magic_bundles)
                magic_demand_id.setValue([data.demand_id]);
                magic_supply_id.setValue([data.supply_id]);
                magic_platform.setValue([data.platform]);

                let countryData = data.country.split('|');
                magic_country.setValue(countryData);
                magic_ad_format.setValue([data.ad_format]);
                magic_template_id.setValue(data.hasOwnProperty("request_tpl_ids") && data.request_tpl_ids.length > 0 ? data.request_tpl_ids.split("|") : [])

                form.val('magic_form',data);
            }
        });

        //监听表格编辑
        table.on('edit(magic_filter)', function (obj) {

            let id = obj.data.id
            let fieldStr = obj.field;
            let value = obj.value;

            let send_data = {}
            send_data['id'] = id;
            send_data[fieldStr] = value

            //更新信息
            editInfo(send_data)
        });

        //监听搜索
        form.on('submit(magic_search)', function (data) {

            // 重载表格
            table_config.where = data.field;
            table_config.url = magic_list_url;
            table_config.is_resize = false;
            adx_table.newTableParam(table_config);
            return false;
        });

        //定义开关方法
        layui.status = function (id,val){
            if (val == 8001) {
                return "   <input type='checkbox' idval="+id+" id='magic_status' lay-filter='magic_status' value= "+val+"  lay-skin='switch' lay-text='ON|OFF' checked>"
            } else {
                return "   <input type='checkbox' idval="+id+" id='magic_status' lay-filter='magic_status' value= "+val+"   lay-skin='switch' lay-text='ON|OFF'>"
            }
        }

        //监听开关
        form.on('switch(magic_status)', function (obj) {

            let magic_status = this.value
            let checked = obj.elem.checked;
            let id = $(this).attr('idval');

            if (checked == true){
                magic_status = 8001;
                $(this).val(magic_status);

            } else {
                magic_status = 8002;
                $(this).val(magic_status);
            }
            form.render('checkbox')
            let send_data = {}
            send_data['id'] = id;
            send_data['status'] = magic_status
            //更新信息
            editInfo(send_data)

        });


        function editInfo(send_data){
            $.ajax({
                url: magic_edit_url,
                type: "post",
                async: false,
                data: send_data,
                success: function (result) {
                    if (result.code == 1) {
                        layer.msg("操作成功", {time:800})
                    }else if (result.code == 0) {
                        layer.msg(result.msg);
                    }
                },
                error: function(error) {
                    layer.msg('操作异常');
                }

            });
        }

        function add_edit(url,id = 0){
            let title = id + '编辑'
            if (id == 0){
                title = '添加';
                magic_demand_id.setValue([]);
                magic_supply_id.setValue([]);
                magic_platform.setValue([]);
                magic_country.setValue([]);
                magic_ad_format.setValue([]);
            }
            $('#magic_bundles input').val('');
            $('#magic_form')[0].reset();

            layer.open({
                type: 1,
                title: [title,'text-align: center;'],
                content: $('#add_magic'),
                area: ['90%', '90%'],
                shade:[0.01,'#fff'],
                btn: ['保存', '取消'],
                btnAlign: 'c',
                success: function (layero,index){
                    // 解决按enter键重复弹窗问题
                    $(':focus').blur();
                    // 添加form标识
                    layero.addClass('layui-form');
                    // 将保存按钮改变成提交按钮
                    layero.find('.layui-layer-btn0').attr({
                        'lay-filter' : 'add_edit_submit',
                        'lay-submit' : ''
                    });

                    formatMagicBundles([])
                },
                yes: function (index, layero) {
                    form.on('submit(add_edit_submit)', function(obj){

                        let magic_bundles = [];
                        let magic_id =$("#magic_bundles input[name='magic_bundle_id']");
                        let magic_name =$("#magic_bundles input[name='magic_bundle_name']");
                        let magic_pub =$("#magic_bundles input[name='magic_bundle_pub']");

                        $.each(magic_id,function (k,v){
                            let val = $(v).val()
                            let name = $(magic_name[k]).val();
                            let pub = $(magic_pub[k]).val();
                            if (val != '' && name != '' && pub != ''){
                                magic_bundles[k] = {'id': val,'name' : name,'pub' : pub}
                            }
                        })

                        magic_bundles = JSON.stringify(magic_bundles)
                        console.log('magic_bundles',magic_bundles)

                        let data = obj.field;
                        delete data.magic_bundle_id;
                        delete data.magic_bundle_name;
                        delete data.magic_bundle_pub;
                        data.country = data.country.replace(/,/g, "|");
                        data.request_tpl_ids = data.request_tpl_ids.replace(/,/g, "|");
                        if (id > 0){
                            data.id = id;
                        }
                        data.magic_bundles = magic_bundles

                        ajaxRequst(data,url,index);
                    })
                },
                btn2: function (index, layero) {
                    layer.close(index);
                }
            })
        }

        function ajaxRequst(dataInfo,url,index = ''){

            $.ajax({
                url: url,
                type: "post",
                data: dataInfo,
                success: function (result) {
                    if (result.code == 1) {
                        layer.msg("操作成功", {time:800})

                        if (index != ''){
                            let tableWhere = form.val("magic_search_form");
                            table_config.where = tableWhere;
                            table_config.url = magic_list_url;
                            table_config.is_resize = false;
                            adx_table.newTableParam(table_config);
                            // adx_table.tableParam('#magic_id',magic_list_url,'POST',magic_cols,true,{},done,'',tableWhere);
                            layer.close(index);
                        }
                        return true;

                    }else if (result.code == 0) {
                        layer.msg(result.msg);
                        return false;
                    }
                },
                error: function(error) {
                    layer.msg('操作异常');
                }

            });
        }


        let id = 2;
        $('#magic_bundles_id').on('click',function (){

            let magic_bundles_html = `<div class="layui-inline layui-magic-bundle" id="text_${id}" style="width: 92%;padding: 10px 0 0 10px;margin: 0;">
                                        <span class="layui-input-inline" style="width: 31%;">
                                            <input type="text" name="magic_bundle_id" value="" placeholder="ID" class="layui-input">
                                        </span>
                                        <span class="layui-input-inline" style="width: 31%;">
                                            <input type="text" name="magic_bundle_name" value="" placeholder="Name" class="layui-input">
                                        </span>
                                        <span class="layui-input-inline" style="width: 31%;">
                                            <input type="text" name="magic_bundle_pub" value="" placeholder="Pub" class="layui-input">
                                        </span>
                                    </div>
                                    <div class="layui-input-del layui-inline layui-hand layui-magic-bundle" id="text_del_${id}" div_id="text_${id}" style="padding-top: 10px;margin: 0;">➖</div>`;

            $(this).before(magic_bundles_html);
            id = id+1

            $('.layui-input-del').on('click',function (){
                let div_id = $(this).attr('div_id');
                $('#'+div_id).remove();
                $(this).remove();
                id = id-1
            })
        })


        function formatMagicBundles(json_str){
            let magic_bundles = [];
            try {
                 magic_bundles = $.parseJSON(json_str);
            } catch (e) {}

            if (magic_bundles.length <= 0){
                magic_bundles = [{"id":"","name":"","pub":""},{"id":"","name":"","pub":""}];
            }

            $('#magic_bundles .layui-magic-bundle').remove();
            let count = magic_bundles.length
            $.each(magic_bundles,function (mk,mv){

                let magic_bundles_html = `<div class="layui-inline layui-magic-bundle" id="text_${mk}" style="width: 92%;padding: 10px 0 0 10px;margin: 0;">
                                        <span class="layui-input-inline" style="width: 31%;">
                                            <input type="text" name="magic_bundle_id" value="${mv.id}" placeholder="ID" class="layui-input">
                                        </span>
                                        <span class="layui-input-inline" style="width: 31%;">
                                            <input type="text" name="magic_bundle_name" value="${mv.name}" placeholder="Name" class="layui-input">
                                        </span>
                                        <span class="layui-input-inline" style="width: 31%;">
                                            <input type="text" name="magic_bundle_pub" value="${mv.pub}" placeholder="Pub" class="layui-input">
                                        </span>
                                    </div>
                                    <div class="layui-input-del layui-inline layui-hand layui-magic-bundle" id="text_del_${mk}" div_id="text_${mk}" style="padding-top: 10px;margin: 0;">➖</div>`;

                $('#magic_bundles_id').before(magic_bundles_html);
                $('.layui-input-del').on('click',function (){
                    let div_id = $(this).attr('div_id');
                    $('#'+div_id).remove();
                    $(this).remove();
                })
            })
        }


    });
</script>
{/block}