{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="af_search_form">
                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" name="pid" value="" placeholder="pid" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <div id="search_mode_id"></div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-bg-blue" lay-submit lay-filter="af_search">
                                <label>Search</label>
                            </button>
                        </div>

<!--                        <div class="layui-inline" >-->
<!--                            <button type="button" class="layui-btn layui-bg-blue" id="af_create" >-->
<!--                                <label>添加</label>-->
<!--                            </button>-->
<!--                        </div>-->
                    </div>
                </form>

            </div>
            <div class="layui-card-body">
                <table class="layui-table" id="af_id" lay-filter="af_filter">
                </table>
            </div>
            <script type="text/html" id="af_tool">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit_mode">配置模式</a>
            </script>
        </div>
        <div class="pages">{$list|raw}</div>
    </div>
</div>


<div id="add_af" style="display: none">
    <form class="layui-form" lay-filter="af_form" id="af_form" style="margin-top: 30px;">
        <div class="layui-col-md12">
            <div class="layui-form-item">
                <label class="layui-form-label">模式:</label>
                <div class="layui-input-block layui-input-new">
                    <div id="mode_id"></div>
                </div>
            </div>
        </div>
    </form>
</div>
{/block}
{block name="css"}
<style>
    .layui-table-cell {
        height: 38px;
        line-height: 38px;
    }

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

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

</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 af_list_url = '/admin/AfModeConfig/index';
        let af_edit_url = '/admin/AfModeConfig/edit';
        let af_add_url = '/admin/AfModeConfig/add';


        let mode_data = [{'name':'启用','value':'enabled'},{'name':'禁用','value':'disabled'},{'name':'仅报告','value':'report-only'}]
        let mode_id = xmSelect.render({
            el: '#mode_id',
            tips: '模式',
            data: mode_data,
            name: 'mode',//表单提交时的name
            radio: true,//是否开启单选模式
            clickClose: true,
        })

        xmSelect.render({
            el: '#search_mode_id',
            tips: '模式',
            data: mode_data,
            name: 'mode',//表单提交时的name
            radio: true,//是否开启单选模式
            clickClose: true,
        })

        let af_cols = [
            {field:'id', title: 'ID', fixed: 'left', width:'6%' }
            ,{field:'pid', title: 'PID',width:'16%' }
            ,{field:'mode', title: '模式',width:'14%' }
            ,{field:'comment', title: '备注', width:'28%', edit:'text' }
            ,{field:'redord_time', title: '创建时间',width:'15%', sort: true, templet:function (d) {
                    return utcToBeijing(d.redord_time);
                }}
            ,{field:'edit_time', title: '更新时间',width:'15%', sort: true, templet:function (d) {
                    return utcToBeijing(d.edit_time);
                }}
            ,{fixed: 'right', title:'操作', toolbar: '#af_tool', width:'10%'}
        ]

        let limits = [10, 20, 30, 50];
        let limit = 10
        let table_config = {
            elem : '#af_id',
            url : af_list_url,
            cols : af_cols,
            page : true,
            limits : limits,
            limit : limit,
            height : 'full-150',
            toolbar : '#toolbar',
        }
        adx_table.newTableParam(table_config);

        $('#af_create').click(function (){
            add_edit(af_add_url);
        });

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

            if(layEvent === 'edit_mode'){ //编辑
                add_edit(af_edit_url,data.id);
                mode_id.setValue([data.mode]);
                form.val('af_form',data);
            }
        });

        //监听表格编辑
        table.on('edit(af_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(af_search)', function (data) {

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


        function editInfo(send_data){
            $.ajax({
                url: af_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 + '编辑'

            layer.open({
                type: 1,
                title: [title,'text-align: center;'],
                content: $('#add_af'),
                area: ['90%', '95%'],
                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' : ''
                    });
                },
                yes: function (index, layero) {
                    form.on('submit(add_edit_submit)', function(obj){
                        let data = obj.field;
                        if (data.demand_id == ''){
                            layer.msg('请选择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",
                data: dataInfo,
                success: function (result) {
                    if (result.code == 1) {
                        layer.msg("操作成功", {time:800})
                        if (index != ''){
                            table_config.where = form.val("af_search_form");
                            adx_table.newTableParam(table_config);
                            layer.close(index);
                        }
                        return true;
                    }else if (result.code == 0) {
                        layer.msg(result.msg);
                        return false;
                    }
                },
                error: function(error) {
                    layer.msg('操作异常');
                }
            });
        }
    });
</script>
{/block}