{extend name="public/container"}
{block name="head"}
<style>
    .layui-table-cell img {
        max-width: 100%;
        height: 50px;
        cursor: pointer;
    }

    .layui-table-cell .layui-btn-container {
        overflow: hidden;
    }
</style>
{/block}
{block name="content"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">客服话术</div>
        <div class="layui-card-body">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <form class="layui-form layui-form-pane">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">话术分类</label>
                                <div class="layui-input-inline">
                                    <select name="cate_id" lay-search="">
                                        {volist name='cate' id='vc'}
                                        <option value="{$vc.id}">{$vc.name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" id="del-cate-btn">
                                    删除此话术分类
                                </button>
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="edit-cate-btn">
                                    编辑话术分类
                                </button>
                                <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="search" lay-filter="search">
                                    <i class="layui-icon">&#xe615;</i>搜索
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-btn-container">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" data-type="add" onclick="action.open_add('{:Url('add_speech_cate')}','添加分类')">
                            <i class="layui-icon">&#xe608;</i>添加分类
                        </button>
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" data-type="add" onclick="action.open_add('{:Url('add_speech')}','添加话术')">
                            <i class="layui-icon">&#xe608;</i>添加话术
                        </button>
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" data-type="refresh" onclick="window.location.reload()">
                            <i class="layui-icon">&#xe669;</i>刷新
                        </button>
                    </div>
                    <table class="layui-hide" id="List" lay-filter="List"></table>
                    <script type="text/html" id="act">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" onclick="dropdown(this)">
                            <i class="layui-icon">&#xe625;</i>操作
                        </button>
                        <ul class="layui-nav-child layui-anim layui-anim-upbit">
                            <li>
                                <a lay-event="edit_speech">
                                    <i class="iconfont icon-bianji"></i> 编辑话术
                                </a>
                            </li>
                            <li>
                                <a lay-event='delete'>
                                    <i class="iconfont icon-shanchu"></i> 删除话术
                                </a>
                            </li>
                        </ul>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{__ADMIN_PATH}js/layuiList.js"></script>
{/block}
{block name="script"}
<script>
    var $ = layui.jquery;
    var layer = layui.layer;
    //实例化form
    layList.form.render();

    layList.tableList({
        o: "List",
        done: () => {

        }
    }, "{:Url('list')}", function() {
        return [{
                field: "id",
                title: "编号",
                align: 'center',
                width: '5%'
            },
            {
                field: "cate_name",
                title: "分类",
                align: 'center',
            },
            {
                field: "title",
                title: "标题",
                align: "center"
            },
            {
                field: "message",
                title: "内容",
                align: "center"
            },
            {
                field: "sort",
                title: "排序",
                align: "center",
                width: '5%'
            },
            {
                field: "add_time",
                title: "添加时间",
                align: "center"
            },
            {
                title: '操作',
                align: 'center',
                toolbar: '#act',
                minWidth: 81,
                width: '8%'
            }
        ];
    });



    $(document).click(function(e) {
        $('.layui-nav-child').hide();
    })

    function dropdown(that) {
        var oEvent = arguments.callee.caller.arguments[0] || event;
        oEvent.stopPropagation();
        var offset = $(that).offset();
        var top = offset.top - $(window).scrollTop();
        var index = $(that).parents('tr').data('index');
        $('.layui-nav-child').each(function(key) {
            if (key != index) {
                $(this).hide();
            }
        })
        if ($(document).height() < top + $(that).next('ul').height()) {
            $(that).next('ul').css({
                'padding': 10,
                'top': -($(that).parent('td').height() / 2 + $(that).height() + $(that).next('ul').height() / 2),
                'min-width': 'inherit',
                'position': 'absolute'
            }).toggle();
        } else {
            $(that).next('ul').css({
                'padding': 10,
                'top': $(that).parent('td').height() / 2 + $(that).height(),
                'min-width': 'inherit',
                'position': 'absolute'
            }).toggle();
        }
    }

    const action = {
        open_add: function(url, title) {
            layer.open({
                type: 2 //Page层类型
                    ,
                area: ['50%', '50%'],
                title: title,
                shade: 0.6 //遮罩透明度
                    ,
                maxmin: true //允许全屏最小化
                    ,
                anim: 1 //0-6的动画形式，-1不开启
                    ,
                content: url,
                end: function() {
                    location.reload();
                }
            });
        }
    };

    layList.tool((event, data, obj) => {
        switch (event) {
            case "edit_speech":
                const url = "{:Url('add_speech')}?id=" + data.id;
                action.open_add(url, "编辑话术");
                break;
            case "delete":
                layer.confirm('确定要删除此话术吗?', function(index) {
                    const loadIdx = layer.load(1);

                    $.ajax({
                        method: "POST",
                        url: "{:Url('del_speech')}",
                        data: {
                            id: data.id
                        },
                        dataType: "json",
                        success(res) {
                            layer.close(loadIdx);
                            layer.close(index);
                            if (res.code === 200) {
                                layer.msg(res.msg, () => {
                                    window.location.reload();
                                });
                            } else {
                                layer.msg(res.msg);
                            }
                        },
                        error(err) {
                            layer.close(loadIdx);
                            layer.close(index);
                        }
                    });


                });
                break;
        }
    });

    //查询
    layList.search('search', function(where) {
        layList.reload({
            ...where
        }, true);
    });


    $("#del-cate-btn").click(() => {
        const cate_id = $('select[name=cate_id]').val();

        if (cate_id == 0) return layer.msg('此分类不能删除！');

        $.ajax({
            method: "POST",
            url: "{:Url('del_speech_cate')}",
            data: {
                id: cate_id
            },
            dataType: "json",
            success(res) {
                if (res.code === 200) {
                    layer.msg(res.msg, () => {
                        window.location.reload();
                    });
                } else {
                    layer.msg(res.msg);
                }
            },
            error(err) {
                layer.msg(err.msg);
            }
        })
    });

    $("#edit-cate-btn").click(() => {
        const cate_id = $('select[name=cate_id]').val();

        if (cate_id == 0) return layer.msg('此分类不能编辑！');

        action.open_add("{:Url('add_speech_cate')}?id=" + cate_id, "编辑分类");
    });
</script>
{/block}