<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>报表表头编辑</title>
    <script src="/web/static/lib/jquery/jquery.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css"/>
    <script src="/jd_report/static/plugins/grapesjs/grapes.js" type="text/javascript"></script>

</head>
<style>
    /* Let's highlight canvas boundaries */
    #gjs {
        border: 3px solid #444;
    }

    /* Reset some default styling */
    .gjs-cv-canvas {
        top: 0;
        width: 100%;
        height: 100%;
    }

    .gjs-block {
        width: auto;
        height: auto;
        min-height: auto;
    }

    .panel__top {
        padding: 0;
        width: 100%;
        display: flex;
        position: initial;
        justify-content: center;
        justify-content: space-between;
    }

    .panel__basic-actions {
        position: initial;
    }

    .editor-row {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        flex-wrap: nowrap;
        height: 300px;
    }

    .editor-canvas {
        flex-grow: 1;
    }

    .panel__right {
        flex-basis: 230px;
        position: relative;
        overflow-y: auto;
    }

    .panel__switcher {
        position: initial;
    }

</style>
<body>
<input type="hidden" value="{{ data.report_id }}" id="report-id"/>
<div class="panel__top">
    <div class="panel__basic-actions"></div>
    <div class="panel__switcher"></div>
</div>
<div class="editor-row">
    <div class="editor-canvas">
        <div id="gjs">...</div>
    </div>
    <div class="panel__right">
        <div class="layers-container"></div>
        <div class="styles-container"></div>
    </div>
</div>
<div id="blocks"></div>

<button onclick="storeTemplate()">存储模版</button>
<script type="text/javascript">
    var reportId = $('#report-id').val();
    var currentHtml = '';
    var currentCss = '';
    // var currentHtml = '';
    // var currentCss = '';
    editor = grapesjs.init({
        container: '#gjs',
        components: '<p>hello world</p>',
        style: '.txt-red{color: red}',
        height: '300px',
        width: 'auto',
        // Disable the storage manager for the moment
        storageManager: {
            id: 'gjs-',             // Prefix identifier that will be used inside storing and loading
            type: 'remote',          // Type of the storage
            urlStore: '/store-template',
            urlLoad: '/load-template?id=' + reportId,
            // autosave: true,         // Store data automatically
            // autoload: true,         // Autoload stored data on init
            stepsBeforeSave: 1,     // If autosave enabled, indicates how many changes are necessary before store method is triggered
            storeComponents: true,  // Enable/Disable storing of components in JSON format
            storeStyles: true,      // Enable/Disable storing of rules in JSON format
            storeHtml: true,        // Enable/Disable storing of components as HTML string
            storeCss: true,         // Enable/Disable storing of rules as CSS string
            contentTypeJson: true,
            header: {'Content-Type': 'application/json'},
            params: {
                report_id: reportId,
            },
            fetchOptions: {
                method: "post"
            },

        },
        layerManager: {
            appendTo: '.layers-container'
        },
        // We define a default panel as a sidebar to contain layers
        panels: {
            defaults: [{
                id: 'layers',
                el: '.panel__right',
                // Make the panel resizable
                resizable: {
                    maxDim: 350,
                    minDim: 200,
                    tc: 0, // Top handler
                    cl: 1, // Left handler
                    cr: 0, // Right handler
                    bc: 0, // Bottom handler
                    // Being a flex child we need to change `flex-basis` property
                    // instead of the `width` (default)
                    keyWidth: 'flex-basis',
                }
            },
                {
                    id: 'panel-switcher',
                    el: '.panel__switcher',
                    buttons: [{
                        id: 'show-layers',
                        active: true,
                        label: 'Layers',
                        command: 'show-layers',
                        // Once activated disable the possibility to turn it off
                        togglable: false,
                    }, {
                        id: 'show-style',
                        active: true,
                        label: 'Styles',
                        command: 'show-styles',
                        togglable: false,
                    }]
                }
            ]
        },
        blockManager: {
            appendTo: '#blocks',
            blocks: [
                // {
                //     id: 'header', // id is mandatory
                //     label: '<b>Section</b>', // You can use HTML/SVG inside labels
                //     attributes: {class: 'gjs-block-section'},
                //     content: '<section>' +
                //     '<h1 style="text-align: center; font-size: 34px; font-weight: bold;margin-bottom: 5px; margin-top: 5px;">配种记录分析报表</h1>' +
                //     '</section>',
                // },
                // {
                //     id: 'param',
                //     label: 'Text',
                //     content: '<div data-gjs-type="text" style="text-align: center;">开始日期：&#123;&#123;date_start&#125;&#125; 结束日期: &#123;&#123;date_end&#125;&#125; 组织: &#123;&#123;company_name&#125;&#125;</div>',
                // }, {
                //     id: 'image',
                //     label: 'Image',
                //     // Select the component once it's dropped
                //     select: true,
                //     // You can pass components as a JSON instead of a simple HTML string,
                //     // in this case we also use a defined component type `image`
                //     content: {type: 'image'},
                //     // This triggers `active` event on dropped components and the `image`
                //     // reacts by opening the AssetManager
                //     activate: true,
                // },
                {
                    id: 'report-head',
                    label: 'report',
                    select: true,
                    content: '    <div style="text-align: center">\n' +
                    '        <h2>报表名称</h2>\n' +
                    '    </div>\n' +
                    '    <div style="border: grey 1px solid; padding: 20px; margin-bottom: 20px; background: rgb(242, 248, 254);">\n' +
                    '        <div style="border: grey 1px solid; padding: 5px; background: rgb(255, 255, 228); margin-bottom: 5px">\n' +
                    '            <h3 style="margin: 0">报表说明</h3>\n' +
                    '        </div>\n' +
                    '        <table id="headerTable" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000"\n' +
                    '           class="table table-condensed order-content cell-border compact stripe"\n' +
                    '           style="border-collapse:collapse;width: 100%;">\n' +
                    '        <thead>\n' +
                    '        <tr>\n' +
                    '            <th style="width: 25%; padding: 5px;">\n' +
                    '                筛选条件\n' +
                    '            </th>\n' +
                    '            <th style="width: 25%; padding: 5px;">\n' +
                    '                变量值\n' +
                    '            </th>\n' +
                    '            <th style="width: 25%; padding: 5px;">\n' +
                    '                筛选条件\n' +
                    '            </th>\n' +
                    '            <th style="width: 25%; padding: 5px;">\n' +
                    '                变量值\n' +
                    '            </th>\n' +
                    '        </tr>\n' +
                    '        </thead>\n' +
                    '        <tbody>\n' +
                    '        <tr>\n' +
                    '            <td><span>组织</span></td>\n' +
                    '            <td><span>&#123;&#123;company_id&#125;&#125;</span></td>\n' +
                    '            <td><span>开始日期</span></td>\n' +
                    '            <td><span>&#123;&#123;date_start&#125;&#125;</span></td>\n' +
                    '        </tr>\n' +
                    '        <tr>\n' +
                    '            <td><span>开始日期</span></td>\n' +
                    '            <td><span>&#123;&#123;date_start&#125;&#125;</span></td>\n' +
                    '            <td><span>开始日期</span></td>\n' +
                    '            <td><span>&#123;&#123;date_start&#125;&#125;</span></td>\n' +
                    '        </tr>\n' +
                    '        <tr>\n' +
                    '            <td><span>结束日期</span></td>\n' +
                    '            <td><span>&#123;&#123;date_end&#125;&#125;</span></td>\n' +
                    '            <td><span>结束日期</span></td>\n' +
                    '            <td><span>&#123;&#123;date_end&#125;&#125;</span></td>\n' +
                    '        </tr>\n' +
                    '        <tr>\n' +
                    '            <td><span>时间区间</span></td>\n' +
                    '            <td><span>本周</span></td>\n' +
                    '            <td><span>时间区间</span></td>\n' +
                    '            <td><span>本周</span></td>\n' +
                    '        </tr>\n' +
                    '        </tbody>\n' +
                    '    </table>\n' +
                    '    </div>' +
                    '<style>' +
                    '#headerTable tbody td {\n' +
                    '    background: rgb(240, 240, 233) !important\n' +
                    '}' +
                    '#headerTable thead tr th {\n' +
                    '    background: rgb(210, 222, 242) !important;\n' +
                    '}' +
                    '#headerTable td, th {\n' +
                    '    border: 1px solid #000000;\n' +
                    '    border-right: 0px solid #000000;\n' +
                    '    text-align: center;\n' +
                    '    vertical-align: middle !important;\n' +
                    '}' +
                    '</style>',
                    activate: true
                },
                // {
                //     id: 'button-box',
                //     label: 'Button',
                //     select: true,
                //     content: '<div class="toolbar">\n' +
                //         '                <button type="button" class="print_button">\n' +
                //     '                    <span>打印</span>\n' +
                //     '                </button>\n' +
                //     '                <button type="button" class="refresh_button">\n' +
                //     '                    <span>刷新</span>\n' +
                //     '                </button>\n' +
                //     '                <button type="button" class="close_button">\n' +
                //     '                    <span>返回</span>\n' +
                //     '                </button>' +
                //     '         <button type="button" class="excel_button" id="exportExcel" onclick="exportExcel()">\n' +
                //     '                        导出Excel\n' +
                //     '         </button>\n' +
                //     '</div>' +
                //     '<style>' +
                //     '    .toolbar {\n' +
                //     '                    position: absolute;\n' +
                //     '                    left:0;\n' +
                //     '                    top:0;\n' +
                //     '                    display:flex;\n' +
                //     '                    flex-wrap:nowrap;\n' +
                //     '                    align-items:center;\n' +
                //     '\n' +
                //     '                    }\n' +
                //     '                    .toolbar > button {\n' +
                //     '                    display: inline-block;\n' +
                //     '                    border-radius: 4px;\n' +
                //     '                    background-color: #449d44;\n' +
                //     '                    border-color:#255625;\n' +
                //     '                    border: none;\n' +
                //     '                    color: #FFFFFF;\n' +
                //     '                    text-align: center;\n' +
                //     '                    font-size: 10px;\n' +
                //     '                    height: 28px;\n' +
                //     '                    transition: all 0.5s;\n' +
                //     '                    cursor: pointer;\n' +
                //     '                    margin: 5px;\n' +
                //     '                    vertical-align:middle;\n' +
                //     '                    } ' +
                //     '            .print_button {\n' +
                //     '                position: absolute;\n' +
                //     '                left:0;\n' +
                //     '                top:0;\n' +
                //     '                display: inline-block;\n' +
                //     '                border-radius: 4px;\n' +
                //     '                background-color: #449d44;\n' +
                //     '                border-color:#255625;\n' +
                //     '                border: none;\n' +
                //     '                color: #FFFFFF;\n' +
                //     '                text-align: center;\n' +
                //     '                font-size: 10px;\n' +
                //     '                width: 60px;\n' +
                //     '                height: 28px;\n' +
                //     '                transition: all 0.5s;\n' +
                //     '                cursor: pointer;\n' +
                //     '                margin: 5px;\n' +
                //     '                vertical-align:middle;\n' +
                //     '                }\n' +
                //     '\n' +
                //     '                .print_button span {\n' +
                //     '                cursor: pointer;\n' +
                //     '                display: inline-block;\n' +
                //     '                position: relative;\n' +
                //     '                transition: 0.5s;\n' +
                //     '                }\n' +
                //     '\n' +
                //     '                .print_button span:after {\n' +
                //     '                content: \'»\';\n' +
                //     '                position: absolute;\n' +
                //     '                opacity: 0;\n' +
                //     '                top: 0;\n' +
                //     '                right: -20px;\n' +
                //     '                transition: 0.5s;\n' +
                //     '                }\n' +
                //     '\n' +
                //     '                .print_button:hover span {\n' +
                //     '                padding-right: 15px;\n' +
                //     '                }\n' +
                //     '\n' +
                //     '                .print_button:hover span:after {\n' +
                //     '                opacity: 1;\n' +
                //     '                right: 0;\n' +
                //     '                }\n' +
                //     '\n' +
                //     '                .refresh_button {\n' +
                //     '                position: absolute;\n' +
                //     '                left:80px;\n' +
                //     '                top:0;\n' +
                //     '                display: inline-block;\n' +
                //     '                border-radius: 4px;\n' +
                //     '                background-color: #449d44;\n' +
                //     '                border-color:#255625;\n' +
                //     '                border: none;\n' +
                //     '                color: #FFFFFF;\n' +
                //     '                text-align: center;\n' +
                //     '                font-size: 10px;\n' +
                //     '                width: 60px;\n' +
                //     '                height: 28px;\n' +
                //     '                transition: all 0.5s;\n' +
                //     '                cursor: pointer;\n' +
                //     '                margin: 5px;\n' +
                //     '                vertical-align:middle;\n' +
                //     '                }\n' +
                //     '\n' +
                //     '                .refresh_button span {\n' +
                //     '                cursor: pointer;\n' +
                //     '                display: inline-block;\n' +
                //     '                position: relative;\n' +
                //     '                transition: 0.5s;\n' +
                //     '                }\n' +
                //     '\n' +
                //     '                .refresh_button span:after {\n' +
                //     '                content: \'»\';\n' +
                //     '                position: absolute;\n' +
                //     '                opacity: 0;\n' +
                //     '                top: 0;\n' +
                //     '                right: -20px;\n' +
                //     '                transition: 0.5s;\n' +
                //     '                }\n' +
                //     '\n' +
                //     '                .refresh_button:hover span {\n' +
                //     '                padding-right: 15px;\n' +
                //     '                }\n' +
                //     '\n' +
                //     '                .refresh_button:hover span:after {\n' +
                //     '                opacity: 1;\n' +
                //     '                right: 0;\n' +
                //     '                }\n' +
                //     '\n' +
                //     '                .close_button {\n' +
                //     '                position: absolute;\n' +
                //     '                left:160px;\n' +
                //     '                top:0;\n' +
                //     '                display: inline-block;\n' +
                //     '                border-radius: 4px;\n' +
                //     '                background-color: #449d44;\n' +
                //     '                border-color:#255625;\n' +
                //     '                border: none;\n' +
                //     '                color: #FFFFFF;\n' +
                //     '                text-align: center;\n' +
                //     '                font-size: 10px;\n' +
                //     '                width: 60px;\n' +
                //     '                height: 28px;\n' +
                //     '                transition: all 0.5s;\n' +
                //     '                cursor: pointer;\n' +
                //     '                margin: 5px;\n' +
                //     '                vertical-align:middle;\n' +
                //     '                }\n' +
                //     '\n' +
                //     '                .close_button span {\n' +
                //     '                cursor: pointer;\n' +
                //     '                display: inline-block;\n' +
                //     '                position: relative;\n' +
                //     '                transition: 0.5s;\n' +
                //     '                }\n' +
                //     '\n' +
                //     '                .close_button span:after {\n' +
                //     '                content: \'»\';\n' +
                //     '                position: absolute;\n' +
                //     '                opacity: 0;\n' +
                //     '                top: 0;\n' +
                //     '                right: -20px;\n' +
                //     '                transition: 0.5s;\n' +
                //     '                }\n' +
                //     '\n' +
                //     '                .close_button:hover span {\n' +
                //     '                padding-right: 15px;\n' +
                //     '                }\n' +
                //     '\n' +
                //     '                .close_button:hover span:after {\n' +
                //     '                opacity: 1;\n' +
                //     '                right: 0;\n' +
                //     '                }' +
                //     '</style>',
                //     activate: true,
                // }
            ]
        },
        // The Selector Manager allows to assign classes and
        // different states (eg. :hover) on components.
        // Generally, it's used in conjunction with Style Manager
        // but it's not mandatory
        selectorManager: {
            appendTo: '.styles-container'
        },
        styleManager: {
            appendTo: '.styles-container',
            sectors: [{
                name: 'Dimension',
                open: false,
                // Use built-in properties
                buildProps: ['float', 'position', 'text-align', 'display', 'font-family', 'font-weight', 'border', 'border-style', 'border-color', 'border-width', 'box-shadow', 'background-repeat', 'background-position', 'background-attachment', 'background-size', 'transition', 'transition-duration', 'transition-property', 'transition-timing-function', 'top', 'right', 'bottom', 'left', 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height', 'font-size', 'letter-spacing', 'line-height', 'text-shadow', 'border-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius', 'perspective', 'transform', 'transform-rotate-x', 'transform-rotate-y', 'transform-rotate-z', 'transform-scale-x', 'transform-scale-y', 'transform-scale-z', 'color', 'background-color', 'background', 'background-image', 'cursor', 'flex-direction', 'flex-wrap', 'justify-content', 'align-items', 'align-content', 'order', 'flex-basis', 'flex-grow', 'flex-shrink', 'align-self', 'overflow', 'overflow-x', 'overflow-y'],
                // Use `properties` to define/override single property
                properties: [
                    {
                        // Type of the input,
                        // options: integer | radio | select | color | slider | file | composite | stack
                        type: 'integer',
                        name: 'The width', // Label for the property
                        property: 'width', // CSS property (if buildProps contains it will be extended)
                        units: ['px', '%'], // Units, available only for 'integer' types
                        defaults: 'auto', // Default value
                        min: 0, // Min value, available only for 'integer' types
                    }
                ]
            }, {
                name: 'Extra',
                open: false,
                buildProps: ['background-color', 'box-shadow', 'custom-prop'],
                properties: [
                    {
                        id: 'custom-prop',
                        name: 'Custom Label',
                        property: 'font-size',
                        type: 'select',
                        defaults: '32px',
                        // List of options, available only for 'select' and 'radio'  types
                        options: [
                            {value: '12px', name: 'Tiny'},
                            {value: '18px', name: 'Medium'},
                            {value: '32px', name: 'Big'},
                        ],
                    }
                ]
            }]
        },
    });
    editor.Panels.addPanel({
        id: 'panel-top',
        el: '.panel__top',
    });
    editor.Panels.addPanel({
        id: 'basic-actions',
        el: '.panel__basic-actions',
        buttons: [
            {
                id: 'visibility',
                active: true, // active by default
                className: 'btn-toggle-borders',
                label: '<u>B</u>',
                command: 'sw-visibility', // Built-in command
            }, {
                id: 'export',
                className: 'btn-open-export',
                label: 'Exp',
                command: 'export-template',
                context: 'export-template', // For grouping context of buttons from the same panel
            }, {
                id: 'show-json',
                className: 'btn-show-json',
                label: 'JSON',
                context: 'show-json',
                // command(editor) {
                //     editor.Modal.setTitle('Components JSON')
                //         .setContent("")
                //         .open();
                // },
            }
        ],
    });
    editor.Commands.add('show-layers', {
        getRowEl: function (editor) {
            return editor.getContainer().closest('.editor-row');
        },
        getLayersEl: function (row) {
            return row.querySelector('.layers-container')
        },

        run: function (editor, sender) {
            const lmEl = this.getLayersEl(this.getRowEl(editor));
            lmEl.style.display = '';
        },
        stop: function (editor, sender) {
            const lmEl = this.getLayersEl(this.getRowEl(editor));
            lmEl.style.display = 'none';
        }
    });
    editor.Commands.add('show-styles', {
        getRowEl: function (editor) {
            return editor.getContainer().closest('.editor-row');
        },
        getStyleEl: function (row) {
            return row.querySelector('.styles-container')
        },

        run: function (editor, sender) {
            const smEl = this.getStyleEl(this.getRowEl(editor));
            smEl.style.display = '';
        },
        stop: function (editor, sender) {
            const smEl = this.getStyleEl(this.getRowEl(editor));
            smEl.style.display = 'none';
        },
    });

    function storeTemplate() {
        editor.store(function (result) {
            console.log('result', result)
        });
    }

    editor.DomComponents.clear()
</script>
</body>
</html>