<!DOCTYPE html>
<!-- saved from url=(0052)file:///Users/homelink/Desktop/work/Excel/index.html -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>{{ data.name }}-设计</title>
    <link rel="stylesheet" href="/jd_report/static/plugins/font-awesome/css/font-awesome.css">

    <script src="/web/static/lib/jquery/jquery.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/jd_report/static/src/css/index.css">
    <script src="https://cdn.jsdelivr.net/npm/handsontable@7.0.3/dist/handsontable.full.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/handsontable@7.0.3/dist/handsontable.full.min.css" rel="stylesheet"
          media="screen">


</head>
<body>
<input type="hidden" value="{{ data.report_id }}" id="report-id"/>
<div id="vm">
    <div class="head" style="height: 70px !important;">
        <div class="tool" style="padding: 0px !important;">
            <div id="begin" class="tool-box" style="display: flex;">
                <div class="tool-item file">
                    <div class="left"><i class="fa fa-folder-open"></i>
                        <div class="icon"><span>文件</span> <i class="fa fa-caret-down"></i></div>
                        <div hidden="hidden" class="tool-list" style="display: none;">
                            <li data-family="SimSun" class="tool-list-item">新建</li>
                            <li data-family="SimSun" class="tool-list-item">
                                本地打开
                                <input id="openFile" type="file" accept="application/vnd.ms-excel" hidden="hidden"></li>
                            <li data-family="SimSun" class="tool-list-item">本地保存</li>
                        </div>
                    </div>
                    <div class="right">
                        <div class="common save-file-online"><i aria-hidden="true" class="fa fa-file-text-o"></i>
                            打开
                        </div>
                        <div class="common save-file-online" onclick="onSave();"><i aria-hidden="true"
                                                                                    class="fa fa-floppy-o"></i>
                            保存
                        </div>
                    </div>
                </div>
                <div class="tool-item plate">
                    <button class="copy"><i class="fa fa-files-o"></i> <span>复制</span></button>
                    <button class="cut"><i class="fa fa-scissors"></i> <span>剪切</span></button>
                    <div class="paste"><i class="fa fa-clipboard"></i> <span>粘贴</span></div>
                </div>
                <div class="tool-item format">
                    <div class="brush"><i class="fa fa-paint-brush"></i> <span>格式刷</span></div>
                </div>
                <div class="tool-item word">
                    <div class="input">
                        <div class="family"><input value="宋体"> <i class="fa fa-caret-down down"></i>
                            <div hidden="hidden" class="tool-list" style="display: none;">
                                <li data-family="SimSun" class="tool-list-item">宋体</li>
                                <li data-family="SimHei" class="tool-list-item">黑体</li>
                                <li data-family="Microsoft Yahei" class="tool-list-item">微软雅黑</li>
                            </div>
                        </div>
                        <div class="size"><input value="12"> <i class="fa fa-caret-down down"></i> <i
                                class="fa fa-plus-square"></i> <i class="fa fa-minus-square"></i>
                            <div hidden="hidden" class="tool-list" style="display: none;">
                                <li class="tool-list-item">6</li>
                                <li class="tool-list-item">8</li>
                                <li class="tool-list-item">10</li>
                                <li class="tool-list-item">12</li>
                                <li class="tool-list-item">14</li>
                                <li class="tool-list-item">16</li>
                                <li class="tool-list-item">18</li>
                                <li class="tool-list-item">22</li>
                            </div>
                        </div>
                    </div>
                    <div class="quick">
                        <div title="加粗" class="bold"><i class="fa fa-bold"></i></div>
                        <div title="斜体" class="italic"><i class="fa fa-italic"></i></div>
                        <div title="下划线" class="under-line"><i class="fa fa-underline"></i></div>
                        <div id="font-color" title="颜色" class="color"><i class="fa fa-font"></i> <i
                                class="fa fa-caret-down"></i></div>
                        <div id="bg-color" title="背景色" class="bg-color"><i class="fa fa-shower"></i> <i
                                class="fa fa-caret-down"></i></div>
                        <div title="边框" class="border"><i class="fa fa-table"></i> <i class="fa fa-caret-down"></i>
                            <div hidden="hidden" class="tool-list" style="display: none;">
                                <li class="tool-list-item">取消边框</li>
                                <li class="tool-list-item">添加边框</li>
                                <li class="tool-list-item">左边框</li>
                                <li class="tool-list-item">右边框</li>
                                <li class="tool-list-item">上边框</li>
                                <li class="tool-list-item">下边框</li>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tool-item flex">
                    <div class="vertical">
                        <div title="靠上" class="top"><i class="fa fa-sort-asc"></i></div>
                        <div title="居中" class="middle"><i class="fa fa-sort"></i></div>
                        <div title="靠下" class="bottom"><i class="fa fa-sort-desc"></i></div>
                        <div title="减少缩进量" class="outdent"><i class="fa fa-outdent"></i></div>
                        <div title="添加缩进量" class="indent"><i class="fa fa-indent"></i></div>
                    </div>
                    <div class="horizontal">
                        <div title="靠左" class="left"><i class="fa fa-align-left"></i></div>
                        <div title="居中" class="center"><i class="fa fa-align-center"></i></div>
                        <div title="靠右" class="right"><i class="fa fa-align-right"></i></div>
                        <div title="两边布局" class="between"><i class="fa fa-align-justify"></i></div>
                        <div title="平均分布" class="around"><i class="fa fa-exchange"></i></div>
                    </div>
                </div>
                <div class="tool-item mergeCell" onclick="mergeCell();">
                    <div class="columns"><i class="fa fa-columns"></i></div>
                    <div class="icon" onclick="toggle(this);"><span>合并/拆分单元格</span> <i class="fa fa-caret-down"></i>
                    </div>
                    <div hidden="hidden" class="tool-list" style="display: none;z-index: 99999;">
                        <li class="tool-list-item">合并单元格</li>
                        <li class="tool-list-item">拆分单元格</li>
                    </div>
                </div>
                <div class="tool-item insertCell">
                    <div class="insert"><i class="fa fa-sign-in"></i></div>
                    <div class="icon" onclick="toggle(this);"><span>插入单元格</span> <i class="fa fa-caret-down"></i></div>
                    <div hidden="hidden" class="tool-list" style="display: none;z-index: 99999;">
                        <li class="tool-list-item">活动单元格上移</li>
                        <li class="tool-list-item">活动单元格左移</li>
                        <li class="tool-list-item" onclick="addRow(this)">添加整行</li>
                        <li class="tool-list-item" onclick="addCol(this)">添加整列</li>
                    </div>
                </div>
                <div class="tool-item unsertCell">
                    <div class="unsert"><i class="fa fa-sign-out"></i></div>
                    <div class="icon" onclick="toggle(this);"><span>删除单元格</span> <i class="fa fa-caret-down"></i></div>
                    <div hidden="hidden" class="tool-list" style="display: none;z-index: 99999;">
                        <li class="tool-list-item">下方单元格上移</li>
                        <li class="tool-list-item">右方单元格左移</li>
                        <li class="tool-list-item" onclick="delRow(this)">删除整行</li>
                        <li class="tool-list-item" onclick="delCol(this)">删除整列</li>
                    </div>
                </div>
                <div class="tool-item function">
                    <div class="formula"><i class="fa fa-header"></i></div>
                    <div class="icon"><span>函数</span></div>
                    <div hidden="hidden" class="tool-list" style="display: none;">
                        <li class="tool-list-item">求和</li>
                        <li class="tool-list-item">平均值</li>
                        <li class="tool-list-item">最大值</li>
                        <li class="tool-list-item">最小值</li>
                    </div>
                </div>
            </div>
            <div id="console" style="height: 20px;text-align: center;">这里是控制台</div>
            <div id="formula" class="tool-box" style="display: none;">
                <div class="tool-item count">
                    <div class="left">
                        <div class="formula"><i class="fa fa-header"></i></div>
                        <div class="icon"><span>运算函数</span></div>
                        <div hidden="hidden" class="tool-list" style="display: none;">
                            <li class="tool-list-item">求和</li>
                            <li class="tool-list-item">最大值</li>
                            <li class="tool-list-item">最小值</li>
                            <li class="tool-list-item">平均值</li>
                        </div>
                    </div>
                    <div class="right">
                        <div class="common sum-function"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            求和函数
                        </div>
                        <div class="common max-function"><i aria-hidden="true" class="fa fa-maxcdn"></i>
                            最大值
                        </div>
                        <div class="common min-function"><i aria-hidden="true" class="fa fa-dot-circle-o"></i>
                            最小值
                        </div>
                    </div>
                </div>
                <div class="tool-item time">
                    <div class="left">
                        <div class="formula"><i class="fa fa-calendar-o"></i></div>
                        <div class="icon"><span>时间函数</span></div>
                        <div hidden="hidden" class="tool-list" style="display: none;">
                            <li class="tool-list-item">获取当前时间</li>
                        </div>
                    </div>
                    <div class="right">
                        <div class="common sum-function"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            获取当前时间
                        </div>
                    </div>
                </div>
                <div class="tool-item check-table">
                    <div class="left">
                        <div class="formula"><i class="fa fa-table"></i></div>
                        <div class="icon"><span>查表函数</span></div>
                        <div hidden="hidden" class="tool-list" style="display: none;">
                            <li class="tool-list-item">二维表查值</li>
                            <li class="tool-list-item">三维表查值</li>
                        </div>
                    </div>
                    <div class="right">
                        <div class="common sum-function"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            二维表查值
                        </div>
                        <div class="common sum-function"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            三维表查值
                        </div>
                    </div>
                </div>
                <div class="tool-item check-table">
                    <div class="left">
                        <div class="formula"><i class="fa fa-database"></i></div>
                        <div class="icon"><span>数据库函数</span></div>
                        <div hidden="hidden" class="tool-list" style="display: none;">
                            <li class="tool-list-item">时段日旬月最大</li>
                            <li class="tool-list-item">时段日旬月最小</li>
                            <li class="tool-list-item">时段日旬月平均值</li>
                        </div>
                    </div>
                    <div class="right">
                        <div class="common sum-function"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            时段日旬月最大
                        </div>
                        <div class="common sum-function"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            时段日旬月最小
                        </div>
                        <div class="common sum-function"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            时段日旬月平均值
                        </div>
                    </div>
                </div>
                <div class="tool-item term">
                    <div class="left">
                        <div class="formula"><i class="fa fa-deaf"></i></div>
                        <div class="icon"><span>条件函数</span></div>
                        <div hidden="hidden" class="tool-list" style="display: none;">
                            <li class="tool-list-item">根据条件返回数据值</li>
                        </div>
                    </div>
                    <div class="right">
                        <div class="common sum-function"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            根据条件返回数据值
                        </div>
                    </div>
                </div>
                <div class="tool-item term">
                    <div class="left">
                        <div class="formula"><i class="fa fa-tint"></i></div>
                        <div class="icon"><span>水务计算函数</span></div>
                        <div hidden="hidden" class="tool-list" style="display: none;">
                            <li class="tool-list-item">水库水量平衡计算</li>
                        </div>
                    </div>
                    <div class="right">
                        <div class="common sum-function"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            水库水量平衡计算
                        </div>
                    </div>
                </div>
            </div>
            <div id="data" hidden="hidden" class="tool-box" style="display: none;">
                <div class="tool-item attr-bind">
                    <div class="left">
                        <div class="top"><i aria-hidden="true" class="fa fa-paperclip"></i></div>
                        <div class="icon"><span>属性绑定</span></div>
                    </div>
                    <div class="right">
                        <div class="common sishuiwei"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            死水位
                        </div>
                        <div class="common xunxianshuiwei"><i aria-hidden="true" class="fa fa-maxcdn"></i>
                            汛限水位
                        </div>
                        <div class="common shejishuiwei"><i aria-hidden="true" class="fa fa-dot-circle-o"></i>
                            设计水位
                        </div>
                    </div>
                </div>
                <div class="tool-item value-bind">
                    <div class="left">
                        <div class="top"><i aria-hidden="true" class="fa fa-gg"></i></div>
                        <div class="icon"><span>值绑定</span></div>
                    </div>
                    <div class="right">
                        <div class="common rukuliuliang"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            入库流量
                        </div>
                        <div class="common chukuliuliang"><i aria-hidden="true" class="fa fa-maxcdn"></i>
                            出库流量
                        </div>
                        <div class="common qishuiliuliang"><i aria-hidden="true" class="fa fa-dot-circle-o"></i>
                            弃水流量
                        </div>
                    </div>
                </div>
                <div class="tool-item timer-bind">
                    <div class="left">
                        <div class="top"><i aria-hidden="true" class="fa fa-clock-o"></i></div>
                        <div class="icon"><span>时间绑定</span></div>
                    </div>
                    <div class="right">
                        <div class="common rukuliuliang"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            入库流量
                        </div>
                        <div class="common chukuliuliang"><i aria-hidden="true" class="fa fa-maxcdn"></i>
                            出库流量
                        </div>
                        <div class="common qishuiliuliang"><i aria-hidden="true" class="fa fa-dot-circle-o"></i>
                            弃水流量
                        </div>
                    </div>
                </div>
                <div class="tool-item data-bind">
                    <div class="left">
                        <div class="top"><i aria-hidden="true" class="fa fa-cubes"></i></div>
                        <div class="icon"><span>导入数据</span></div>
                    </div>
                    <div class="left"></div>
                </div>
            </div>
            <div id="instrument" hidden="hidden" class="tool-box" style="display: none;"></div>
            <div id="system" hidden="hidden" class="tool-box" style="display: none;"></div>
        </div>
    </div>

    <div id="content" class="content" style="margin-top: 35px;">

    </div>

</div>
<script>
    var MAX_ROW_COUNT = 50;//表格定义最多行数。
    var MAX_COL_COUNT = 50;//表格定义最多列数。
    init();

    function init() {
        $("#content").handsontable({
            licenseKey: 'non-commercial-and-evaluation',
            data: Handsontable.helper.createSpreadsheetData(MAX_ROW_COUNT, MAX_COL_COUNT),
            colWidths: 200,
            width: '100%',
            height: 900,
            rowHeights: 30,
            rowHeaders: true,
            colHeaders: true,
            mergeCells: true,
            outsideClickDeselects: false
        });
        var table = $('.content').handsontable('getInstance');
        table.clear();
        table.selectCell(0, 0);//避免clear()引起全选
        loadData();
    }

    function loadData() {
        var reportId = $("#report-id").val();
        $.get('/v1/jd_report/table_def', {id: reportId}, function (result) {
            var jsonResult = JSON.parse(result);
            console.log(jsonResult)
            if (jsonResult.code == 0) {
                initTableDefData(jsonResult.data);
            }
        });
    }

    /**
     * 根据服务器返回的表格定义数据，加载数据到表格中。
     **/
    function initTableDefData(defData) {
        var cellList = defData.cell_list;
        console.log(cellList);
        var tableInfo = parseTableData(cellList);
        var table = $('.content').handsontable('getInstance');
        table.loadData(tableInfo.data);
        table = table.getPlugin('mergeCells');
        var mergeList = tableInfo.merge;
        console.log(mergeList);
        if (mergeList && mergeList.length > 0) {
            for (var i = 0; i < mergeList.length; i++) {
                var m = mergeList[i];
                table.merge(m['y1'], m['x1'], m['y2'], m['x2']);
            }
        }

    }

    function onSave() {
        var tableData = getTableData();
        var mergeInfo = getMergeInfo();
        console.log('mergeInfo is', mergeInfo);
        console.log('tableData is', tableData);
        for (var rowIndex in tableData) {
            for (var colIndex in tableData[rowIndex]) {
                var itemData = tableData[rowIndex][colIndex];
                for (var i in mergeInfo) {
                    if (itemData['row_index'] == mergeInfo[i]['y1'] && itemData['col_index'] == mergeInfo[i]['x1']) {
                        itemData['merge_x1'] = mergeInfo[i]['x1'];
                        itemData['merge_y1'] = mergeInfo[i]['y1'];
                        itemData['merge_x2'] = mergeInfo[i]['x2'];
                        itemData['merge_y2'] = mergeInfo[i]['y2'];
                    }
                }
            }
        }
        console.log(tableData);
        $.post("/v1/jd_report/save", {data: JSON.stringify(tableData), id: $("#report-id").val()}, function (result) {
            console.log(result);
        });
    }

    /**
     * 表格数据转换成[[{row_index:xx,col_index:xx,style:xx,value:xx}]]格式数据。
     * */
    function getTableData() {
        var table = $('.content').handsontable('getInstance');
        var data = table.getData();
        var tableData = [];
        for (var rowIndex in data) {
            var rowData = [];
            for (var colIndex in data[rowIndex]) {
                var item = data[rowIndex][colIndex];
                if (item) {
                    var cell = {
                        'row_index': parseInt(rowIndex),
                        'col_index': parseInt(colIndex),
                        'style': '',
                        'value': item
                    }
                    rowData.push(cell);
                }
            }
            if (rowData.length > 0) {
                tableData.push(rowData);
            }
        }
        return tableData;
    }

    /**
     * 数据库数据转成表格数据。(getTableData的反向）
     **/
    function parseTableData(cellDefList) {
        var tableData = [];

        for (var r = 0; r < MAX_ROW_COUNT; r++) {
            var row = [];
            for (var c = 0; c < MAX_COL_COUNT; c++) {
                row.push('');
            }
            tableData.push(row);
        }
        var mergeList = [];
        for (var i in cellDefList) {
            var cell = cellDefList[i];
            var colIndex = cell['col_index'];
            var rowIndex = cell['row_index'];
            var value = cell['value'];
            var style = cell['style'];
            var mergeX1 = cell['merge_x1'];
            var mergeY1 = cell['merge_y1'];
            var mergeX2 = cell['merge_x2'];
            var mergeY2 = cell['merge_y2'];

            while (rowIndex >= tableData.length) {
                var row = [];
                for (var c = 0; c < MAX_COL_COUNT; c++) {
                    row.push('');
                }
                tableData.push(row);
            }

            var row = tableData[rowIndex];
            while (colIndex >= row.length) {
                row.push('');
            }
            row[colIndex] = value;
            if (mergeX1 != mergeX2 || mergeY1 != mergeY2) {
                mergeList.push({
                    'x1': mergeX1,
                    'y1': mergeY1,
                    'x2': mergeX2,
                    'y2': mergeY2
                })
            }
        }

        return {'data': tableData, 'merge': mergeList, 'style': []};
    }

    /**
     * 获取表格合并信息
     */
    function getMergeInfo() {
        var table = $('.content').handsontable('getInstance');
        var table = table.getPlugin('mergeCells');
        var aa = table.mergedCellsCollection.mergedCells;
        var mergeInfo = [];
        if (aa) {
            for (var index in aa) {
                var item = aa[index];
                var x = item['col'];
                var y = item['row'];
                var mergeXCount = item['colspan'];
                var mergeYCount = item['rowspan'];
                var toX = x + mergeXCount - 1;
                var toY = y + mergeYCount - 1;
                mergeInfo.push({
                    'x1': x,
                    'y1': y,
                    'x2': toX,
                    'y2': toY
                })
            }
        }

        return mergeInfo;
    }

    function toggle(obj) {
        console.log(obj);
        $(obj).parents('.tool-item').find('.tool-list').toggle();
    }

    function addRow(obj) {
        $(obj).parents('.tool-list').toggle();
        var table = $('.content').handsontable('getInstance');
        var selected = table.getSelected();
        console.log(selected);
        if (selected && selected.length > 0) {
            var row = selected[0][0];
            table.alter('insert_row', row);
        } else {

        }
    }

    function addCol(obj) {
        $(obj).parents('.tool-list').toggle();
        var table = $('.content').handsontable('getInstance');
        var selected = table.getSelected();
        console.log(selected);
        if (selected && selected.length > 0) {
            var col = selected[0][1];
            table.alter('insert_col', col);
        } else {

        }
    }

    function delRow(obj) {
        $(obj).parents('.tool-list').toggle();
        var table = $('.content').handsontable('getInstance');
        var selected = table.getSelected();
        console.log(selected);
        if (selected && selected.length > 0) {
            var row = selected[0][0];
            table.alter('remove_row', row);
        } else {

        }
    }

    function delCol(obj) {
        $(obj).parents('.tool-list').toggle();
        var table = $('.content').handsontable('getInstance');
        var selected = table.getSelected();
        console.log(selected);
        if (selected && selected.length > 0) {
            var col = selected[0][1];
            table.alter('remove_col', col);
        } else {

        }
    }


    function mergeCell() {
        var table = $('#content').handsontable('getInstance');
        var cellRange = table.getSelectedRange();
        console.log(cellRange);
        if (cellRange && cellRange.length > 0) {
            var from = cellRange[0]['from'];
            var to = cellRange[0]['to'];
            table = table.getPlugin('mergeCells');
            //table.enablePlugin();
            //var a = table.mergedCellInfoCollection.getInfo(from['row'], from['to']);

            var a = table.toggleMergeOnSelection(cellRange);
            console.log(a);
            //table.mergeSelection(cellRange);
            //table.merge(from['row'], from['col'], to['row'], to['col']);
        }
    }
</script>
</body>
</html>