{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">
                {if (count($conflicts))}
                <blockquote class="layui-elem-quote" style="color: #721c24">下列数据可能会有冲突，请检查<br>
                    {foreach $conflicts as $k=>$v}
                    <span style="word-wrap: break-word;">{$k}: 【{$v}】</span><br>
                    {/foreach}
                </blockquote>
                {/if}
                <form class="layui-form" method="post" lay-filter="black_white_search_form">
                    <div class="layui-form-item">
                        <div class="layui-input-inline" style="display: none;">
                            <input id="search_parent_id_supply" type="text" name="supply_id">
                            <input id="search_parent_id_demand" type="text" name="demand_id">
                        </div>
                        <div class="layui-input-inline" style="width: 13%;padding-top: 3px;">
                            <input type="text" name="conflict_ids" placeholder="ID(多个竖线分隔)" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-input-inline" style="width: 13%;padding-top: 3px;">
                            <div id="search_type"></div>
                        </div>
                        <div class="layui-input-inline" style="width: 13%;padding-top: 3px;">
                            <div id="search_supply"></div>
                        </div>
                        <div class="layui-input-inline" style="width: 13%;padding-top: 3px;">
                            <div id="search_demand"></div>
                        </div>
                        <div class="layui-input-inline" style="width: 13%;padding-top: 3px;">
                            <div class="">
                                <input type="text" name="content" placeholder="content" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-input-inline" style="width: 10%;padding-top: 3px;">
                            <div id="search_status"></div>
                        </div>
                        <div class="layui-input-inline" style="padding-top: 3px;">
                            <button class="layui-btn layui-bg-blue" lay-submit lay-filter="black_white_search">
                                <label>Search</label>
                            </button>
                            <button type="button" class="layui-btn layui-bg-blue" id="black_white_create"
                                    style="float: right;">
                                <label>Create</label>
                            </button>
                        </div>

                    </div>
                </form>
            </div>

            <div class="layui-card-body">
                <table class="layui-table" id="black_white_id" lay-filter="black_white_filter">
                </table>
            </div>
            <script type="text/html" id="black_white_tool">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
                <!--                <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>-->
            </script>
        </div>

    </div>
</div>

<div id="add_black_white" style="display: none;">
    <div class="layui-form" lay-filter="black_white_form" id="black_white_form" style="margin-top: 30px;">
        <div class="layui-col-md12">

            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color:red"> * </span>Type:</label>
                <div class="layui-input-block layui-input-new">
                    <div id="select_type"></div>
                </div>
            </div>
            <div class="layui-form-item" style="display: none;">
                <div class="layui-input-block layui-input-new">
                    <input id="parent_id_supply" type="text" name="supply_id">
                    <input id="parent_id_demand" type="text" name="demand_id">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">Supply:</label>
                <div class="layui-input-block layui-input-new">
                    <div id="select_supply"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">Demand:</label>
                <div class="layui-input-block layui-input-new">
                    <div id="select_demand"></div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color:red"> * </span>Content</label>
                <div class="layui-input-block layui-input-new">
                    <textarea id="select_textarea" rows="10" name="content" class="layui-textarea"
                              lay-verify="required" placeholder="多个换行输入"></textarea>
                    <div id="select_content"></div>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">Comment</label>
                <div class="layui-input-block layui-input-new">
                    <input name="comment" type="text" value="" placeholder="备注描述" class="layui-input">
                </div>
            </div>
        </div>
    </div>
</div>


{/block}

{block name="css"}
<style>
    .layui-table-cell {
        height: 38px;
        line-height: 38px;
    }

    .layui-input-new {
        width: 80%;
        margin-top: -7px;
    }

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

    .layui-input-block {
        margin-left: 155px !important;
    }

    .layui-card-header {
        line-height: 36px;
    }

    #select_content {
        border: 1px solid #b9bbbe;
        height: 214px;
        overflow: auto;
        margin-left: 50%;
        margin-top: -214px;
        line-height: 21px;
        padding-left: 10px;
    }
    #select_textarea {
        width: 49%;
    }

</style>
{/block}

{block name="js"}
<script>

    layui.config({
        base: '/static/admin'
    }).extend({ //设定模块别名
        adx_table: '/js/layui_table' //相对于上述 base 目录的子目录
    }).use(['adx_table'], function () {
        let table = layui.table,
            form = layui.form,
            adx_table = layui.adx_table;

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

        let BLACK_WHITE_TYPE_ARR = []
        let search_types = xmSelect.render({
            el: '#search_type',
            tips: 'Type',
            data: BLACK_WHITE_TYPE_ARR,
            initValue: [],
            model: {label: {type: 'text'}, icon: 'hidden'},
            toolbar: {show: true, list: ['CLEAR']},
            name: 'type',//表单提交时的name
            radio: true,//是否开启单选模式
            clickClose: true,
            filterable: true,
        })
        $.ajax({
            url: '/admin/black_white/get_type',
            async: false,
            type: 'POST',
            data: {},
            success: function (result) {
                if (result.code == 1) {
                    BLACK_WHITE_TYPE_ARR = result.data
                    search_types.update({data: BLACK_WHITE_TYPE_ARR});
                }
            }
        });

        initSelectTree('supply', true)
        initSelectTree('demand', true)

        let SSP_DIS = false;
        let DSP_DIS = false;

        function initSelectTree(type, isSearch = false) {
            let data = type === 'supply' ? TREE_SUPPLY_ARR : TREE_DEMAND_ARR
            let elid = isSearch ? '#search_' + type : '#select_' + type
            let id = '#parent_id_' + type
            xmSelect.render({
                el: elid,
                name: type + '_ep',
                tips: capitalizeFirstLetter(type),
                data: data,
                model: {
                    label: {type: 'text'},
                    // icon: 'hidden'
                },
                initValue: [],
                radio: !isSearch,
                clickClose: !isSearch,
                toolbar: {show: true, list: ['CLEAR']},
                filterable: true,
                disabled: !isSearch && ((type === 'supply' && SSP_DIS) || (type === 'demand' && DSP_DIS)),
                tree: {
                    show: true,
                    strict: false,
                    expandedKeys: [-1],
                },
                on: function (data) {
                    if (data.arr.length && data.arr[0].__node.parent != null && !isSearch) {
                        $(id).val(data.arr[0].__node.parent.value);
                    }
                },
                show() {
                    $(id).val('');
                },
                // hide(){
                //     let id = type === 'supply' ? 'demand' : 'supply'
                //     $('#'+id).val('');
                // }
            })
        }


        let black_white_list_url = '/admin/black_white/list';
        let black_white_edit_url = '/admin/black_white/edit';
        let black_white_add_url = '/admin/black_white/add';

        let black_white_cols = [
            {field: 'id', title: 'ID', fixed: 'left', width: '6%'}
            , {
                field: 'type', title: 'Type', fixed: 'left', width: '13%', templet: function (d) {
                    return dataFormat(d.type, BLACK_WHITE_TYPE_ARR)
                }
            }
            , {
                field: 'supply_id', title: 'Supply', width: '13%', templet: function (d) {
                    return dataFormat(d.supply_id, SUPPLY_ALL_ID_ARR)
                }
            }
            , {
                field: 'supply_ep', title: 'SupplyEp', width: '13%', templet: function (d) {
                    return epFormat(d.supply_id, d.supply_ep, SUPPLY_ALL_ENDPOINT_ARR)
                }
            }
            , {
                field: 'demand_id', title: 'Demand', width: '13%', templet: function (d) {
                    return dataFormat(d.demand_id, DEMAND_ALL_ID_ARR)
                }
            }
            , {
                field: 'demand_ep', title: 'DemandEp', width: '13%', templet: function (d) {
                    return epFormat(d.demand_id, d.demand_ep, DEMAND_ALL_ENDPOINT_ARR)
                }
            }
            , {
                field: 'content', title: 'Content', width: 120, templet: function (d) {
                    return contentFormat(d.type, d.content);
                }
            }
            , {field: 'comment', title: 'Comment', width: 120}
            , {field: 'status', title: 'Status', width: '8%', templet: "<div>{{layui.status(d.id,d.status)}}</div>"}
            , {
                field: 'record_time', title: 'Created Time', width: '14%', sort: true, templet: function (d) {
                    return utcToBeijing(d.record_time);
                }
            }
            , {
                field: 'update_time', title: 'Updated Time', width: '14%', sort: true, templet: function (d) {
                    return utcToBeijing(d.update_time);
                }
            }
            , {fixed: 'right', title: 'Operation', toolbar: '#black_white_tool', width: '8%'}
        ]


        adx_table.tableParam('#black_white_id', black_white_list_url, 'POST', black_white_cols, true);

        function epFormat(d, ep, arr) {
            if (!ep) {
                return '';
            }

            let res = ep;
            $.each(arr, function (k, v) {
                if (v.value == d + '_' + ep) {
                    res = v.name
                    return false
                }
            })

            return res;
        }

        function contentFormat(type, content) {
            if (!content) {
                return '';
            }
            let arr = content.split("\n");

            let data = []
            if (type == 1 || type == 2) {
                data = SUPPLY_ALL_ID_ARR
            } else if (type == 5 || type == 6) {
                data = DEMAND_ALL_ID_ARR
            } else {
                return content
            }

            let res = arr
            $.each(data, function (k, v) {
                $.each(arr, function (m, n) {
                    if (v.value == n) {
                        res[m] = v.name
                        return false
                    }
                })
            })

            return res.join('\n');
        }

        //监听表格编辑
        table.on('edit(black_white_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

            //发送请求
            ajaxRequst(send_data, black_white_edit_url);

        });

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

            // 搜索前把demand / supply树形结构值重新赋值，因为子节点没有父节点信息
            // xmSelect.get('#search_supply', true).getValue().forEach( v => {
            //     if ('supply_id' in v){
            //         let arr = data.field.supply_ep.split(',')
            //         let newArr = arr.filter(item => item != v.value)
            //         newArr.splice(newArr.length, 0, v.supply_id +'-'+ v.value)
            //         data.field.supply_ep = newArr.join()
            //     }
            // });
            // xmSelect.get('#search_demand', true).getValue().forEach( v => {
            //     if ('demand_id' in v){
            //         let arr = data.field.demand_ep.split(',')
            //         let newArr = arr.filter(item => item != v.value)
            //         newArr.splice(newArr.length, 0, v.demand_id +'-'+ v.value)
            //         data.field.demand_ep = newArr.join()
            //     }
            // });


            // 重载表格
            table.reload('black_white_id', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                //根据条件查询
                , where: data.field
            });
            return false;
        });

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

        const container1 = document.getElementById('select_textarea');
        const container2 = document.getElementById('select_content');

        container1.addEventListener('scroll', function () {
            container2.scrollTop = container1.scrollTop;
        });

        container2.addEventListener('scroll', function () {
            container1.scrollTop = container2.scrollTop;
        });

        table.on('tool(black_white_filter)', function (obj) {
            SSP_DIS = false;
            DSP_DIS = false;
            initSelectTree('supply')
            initSelectTree('demand')

            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            if (layEvent === 'edit') { //编辑
                add_edit(black_white_edit_url, '编辑黑白名单', data.id);

                let divData = ''
                if (data.type == 1 || data.type == 2) {
                    data.content.split('\n').forEach(value => {
                        SUPPLY_ALL_ID_ARR.forEach(v => {
                            if (v.value == value) {
                                divData += v.name + '\n'
                            }
                        })
                    })
                }else if (data.type == 5 || data.type == 6) {
                    data.content.split('\n').forEach(value => {
                        DEMAND_ALL_ID_ARR.forEach(v => {
                            if (v.value == value) {
                                divData += v.name + '\n'
                            }
                        })
                    })
                }
                var div = document.getElementById("select_content");
                div.innerText = divData;

                let supply = data.supply_ep ? data.supply_id + '-' + data.supply_ep : data.supply_id
                let demand = data.demand_ep ? data.demand_id + '-' + data.demand_ep : data.demand_id
                xmSelect.get('#select_supply', true).setValue([supply])
                xmSelect.get('#select_demand', true).setValue([demand])
                xmSelect.get('#select_type', true).setValue([data.type])
                if (!data.supply_ep && data.supply_id) {
                    data.supply_id = 0
                }
                if (!data.demand_ep && data.demand_id) {
                    data.demand_id = 0
                }
                if (disabled_ssp_arr.includes(data.type)) {
                    SSP_DIS = true;
                    // DSP_DIS = false;
                    initSelectTree('supply')
                    // initSelectTree('demand')
                } else if (disabled_dsp_arr.includes(data.type)) {
                    // SSP_DIS = false;
                    DSP_DIS = true;
                    // initSelectTree('supply')
                    initSelectTree('demand')
                }

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

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

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

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

            } else {
                black_white_status = 8002;
                $(this).val(black_white_status);
            }
            form.render('checkbox')
            let send_data = {}
            send_data['id'] = id;
            send_data['status'] = black_white_status

            //更新信息
            ajaxRequst(send_data, black_white_edit_url);

        });

        //添加
        $('#black_white_create').click(function () {
            $('#select_type').val('');
            $('#select_supply').val('');
            $('#select_demand').val('');
            add_edit(black_white_add_url, '新增黑白名单');
        })

        selectInit()

        // 黑名单类型为ssp/dsp时，对应下拉框不可选中
        let disabled_ssp_arr = [1, 2, 3, 4]
        let disabled_dsp_arr = [5, 6, 7, 8]

        function selectInit() {

            xmSelect.render({
                el: '#select_type',
                data: BLACK_WHITE_TYPE_ARR,
                name: 'type',//表单提交时的name
                radio: true,//是否开启单选模式
                clickClose: true,
                initValue: [],
                filterable: true,
                model: {label: {type: 'text'}, icon: 'hidden'},
                on: function (data) {
                    //arr:  当前已选中的数据
                    var arr = data.arr;
                    let formData = form.val("black_white_form");
                    if (disabled_ssp_arr.includes(arr[0].value)) {
                        SSP_DIS = true;
                        DSP_DIS = false;
                        initSelectTree('supply')
                        initSelectTree('demand')
                    } else if (disabled_dsp_arr.includes(arr[0].value)) {
                        SSP_DIS = false;
                        DSP_DIS = true;
                        initSelectTree('supply')
                        initSelectTree('demand')
                    } else {
                        SSP_DIS = false;
                        DSP_DIS = false;
                        initSelectTree('supply')
                        initSelectTree('demand')
                    }
                },
            })

            initSelectTree('supply')
            initSelectTree('demand')

        }

        let obj = {'comment': '', 'type': '', 'select_supply': '', 'select_demand': '', 'parent_id': '', 'content': ''}

        function add_edit(url, title, id = 0) {
            selectInit()

            form.val("black_white_form", obj);

            layer.open({
                type: 1,
                title: [title, 'text-align: center;'],
                content: $('#add_black_white'),
                area: ['85%', '90%'],
                shade: [0.01, '#fff'],
                btn: ['保存', '取消'],
                btnAlign: 'c',
                success: function (layero, index) {
                    // 解决按enter键重复弹窗问题
                    $(':focus').blur();
                    // 添加form标识
                    layero.addClass('layui-form');
                },
                yes: function (index, layero) {

                    let data = form.val("black_white_form");
                    if (data.type === '') {
                        layer.msg('请选择Type');
                        return false;
                    }
                    if (disabled_ssp_arr.includes(parseInt(data.type))) {
                        data.supply_id = ''
                        data.supply_ep = ''
                    }
                    if (disabled_dsp_arr.includes(parseInt(data.type))) {
                        data.demand_id = ''
                        data.demand_ep = ''
                    }
                    if (data.supply_ep === '' && data.demand_ep === '') {
                        layer.msg('请选择Supply或者Demand');
                        return false;
                    }
                    if (id > 0) {
                        data.id = id;
                    }
                    ajaxRequst(data, url, index);
                },
                btn2: function (index, layero) {
                    layer.close(index);
                }
            })

        }


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

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

                        if (index != '') {
                            let tableWhere = form.val("black_white_search_form");
                            adx_table.tableParam('#black_white_id', black_white_list_url, 'POST', black_white_cols, true, '', '', '', tableWhere);
                            layer.close(index);
                        }
                        return true;

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

            });
        }

    });

</script>
{/block}