<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('知识库内容列表')" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <input name="catId" type="hidden">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label th:text="#{kbcontent.query.title}"></label>
                                <input type="text" name="title"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;<span th:text="#{btn.search}"></span></a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;<span th:text="#{btn.reset}"></span></a>
                                <a class="btn btn-info btn-rounded btn-sm" onclick="window.history.back()"><i class="fa fa-check-circle-o"></i>&nbsp;<span th:text="#{btn.back}"></span></a>
                            </li>
                        </ul>
                    </div>
                </form>
                <div class="row" th:if="${ccLlmKbCat != null}">
                    <div class="col-sm-12">
                        <div class="alert alert-info" style="margin:10px 15px 0 15px;padding:10px 15px;font-size:14px;">
                            <strong th:text="#{kbcontent.label.cat}"></strong>
                            <span th:text="${ccLlmKbCat.cat}"></span>
                            <span th:if="${ccLlmKbCat.description != null and ccLlmKbCat.description != ''}">
                &nbsp;&nbsp;:&nbsp;&nbsp;<span th:text="${ccLlmKbCat.description}"></span>
            </span>
                        </div>
                    </div>
                </div>

            </div>

            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="aicall:kbcontent:add">
                    <i class="fa fa-plus"></i> <span th:text="#{btn.add}"></span>
                </a>
                <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="aicall:kbcontent:edit">
                    <i class="fa fa-edit"></i> <span th:text="#{btn.edit}"></span>
                </a>
                <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="aicall:kbcontent:remove">
                    <i class="fa fa-remove"></i> <span th:text="#{btn.del}"></span>
                </a>
                <a class="btn btn-info" onclick="exportExcel()" shiro:hasPermission="aicall:kbcontent:add">
                    <i class="fa fa-download"></i> <span th:text="#{btn.export}"></span>
                </a>
                <a class="btn btn-warning" onclick="importExcel()" >
                    <i class="fa fa-upload"></i> <span th:text="#{btn.import}"></span>
                </a>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>

     <!-- 上传弹窗 -->
     <div class="modal fade" id="importModal" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                     <h4 class="modal-title" th:text="#{kbcontent.form.importModal.title}"></h4>
                 </div>
                 <form id="importForm" enctype="multipart/form-data" class="form-horizontal">
                     <div class="modal-body">
                         <div class="form-group">
                             <label class="col-sm-3 control-label" th:text="#{kbcontent.form.importModal.label}"></label>
                             <div class="col-sm-8">
                                 <input type="file" name="file" class="form-control" accept=".xlsx,.xls">
                             </div>
                         </div>
                         <div class="form-group">
                             <div class="col-sm-offset-3 col-sm-8">
                                 <a class="btn btn-success btn-xs" href="#" onclick="$.table.downloadTemplate()"><i class="fa fa-file-excel-o"></i> <span th:text="#{kbcontent.form.importModal.download}"></span></a>
                             </div>
                         </div>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-primary" onclick="submitImport()"> <span th:text="#{btn.ok}"></span></button>
                         <button type="button" class="btn btn-default" data-dismiss="modal"> <span th:text="#{btn.cancel}"></span></button>
                     </div>
                 </form>
             </div>
         </div>
     </div>

     <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('aicall:kbcontent:edit')}]];
        var removeFlag = [[${@permission.hasPermi('aicall:kbcontent:remove')}]];
        var prefix = ctx + "aicall/kbcontent";
        var defaultCatId = [[${catId}]] || '';

        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add?catId=" + defaultCatId,
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                modalName: "知识库内容",
                columns: [{
                    checkbox: true
                },
                {
                    field: 'id',
                    title: '主键id',
                    visible: false
                },
                {
                    field: 'title',
                    title: i18n('kbcontent.table.title'),
                },
                {
                    field: 'content',
                    title: i18n('kbcontent.table.content'),
                },
                {
                    title: i18n('kbcontent.table.opra'),
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>' + i18n('btn.edit') + '</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>' + i18n('btn.del') + '</a>');
                        return actions.join('');
                    }
                }]
            };
            $('[name="catId"]').val(defaultCatId);
            console.log($('[name="catId"]').val());
            $.table.init(options);
        });

        /** 导出 */
        function exportExcel() {
            var catId = $('[name="catId"]').val() || defaultCatId;
            if (!catId) { $.modal.alertWarning("请先选择分类"); return; }
            location.href = prefix + "/export/" + catId;
        }
        /** 下载模板 */
        $.table.downloadTemplate = function(){
            location.href = prefix + "/importTemplate";
        };
        /** 导入 */
        function importExcel() {
            var catId = $('[name="catId"]').val() || defaultCatId;
            if (!catId) { $.modal.alertWarning("请先选择分类"); return; }
            $('#importModal').modal('show');
        }
        function submitImport() {
            var catId = $('[name="catId"]').val() || defaultCatId;
            var formData = new FormData($('#importForm')[0]);
            $.ajax({
                url: prefix + "/importData/" + catId,
                type: 'post',
                data: formData,
                processData: false,
                contentType: false,
                success: function (r) {
                    $('#importModal').modal('hide');
                    $.modal.alertSuccess(r.msg);
                    $.table.refresh();
                }
            });
        }

    </script>
</body>
</html>