Calculation/app/public/js/shares/cs_tools.js

'use strict';

/**
 * cs_errorList：错误列表
 * 使用范围：
 *    台账分解（原报）、台账修订（原报）、计量台账（所有角色）
 *
 * posSearch & billsSearch：台账搜索相关
 * 使用范围：
 *    0号台账：台账分解、台账审批、台账修订、部位台账；
 *    期计量：计量台账、部位台账
 *
 * 所有工具均基于spreadjs，请放在gc.spread.sheets.all.10.0.1.min.js/spreadjs_zh.js之后
 *
 * @author Mai
 * @date
 * @version
 */

const showSideTools = function (show) {
    const left = $('#left-view'), right = $('#right-view'), parent = left.parent();
    if (show) {
        right.show();
        autoFlashHeight();
        /**
         * right.show()后, parent被撑开成2倍left.height, 导致parent.width减少了10px
         * 第一次left.width调整后，parent的缩回left.height, 此时parent.width又增加了10px
         * 故需要通过最终的parent.width再计算一次left.width
         *
         * Q: 为什么不通过先计算left.width的宽度，以避免计算两次left.width?
         * A: 右侧工具栏不一定显示，当右侧工具栏显示过一次后，就必须使用parent和right来计算left.width
         *
         */
            //left.css('width', parent.width() - right.outerWidth());
            //left.css('width', parent.width() - right.outerWidth());
        const percent = 100 - right.outerWidth() /parent.width() * 100;
        left.css('width', percent + '%');
    } else {
        left.width(parent.width());
        right.hide();
    }
};

const showSelectTab = function(select, spread, afterShow) {
    const tab = $(select), tabPanel = $(tab.attr('content'));
    $('a', '#side-menu').removeClass('active');
    tab.addClass('active');
    $('.tab-content .tab-pane').removeClass('active');
    tabPanel.addClass('active');
    showSideTools(true);
    spread && spread.refresh();
    if (afterShow) afterShow();
};

(function($){
    /**
     * 错误列表
     * @param setting
     * {
     *      tabSelector: 'a[content=#error-list]',
     *      selector: '#error-list',
     *      relaSpread: ledgerSpread,
     *      storeKey: 'ledger-error-' + tenderId,
     * }
     * @returns {{spread: *}}
     */
    $.cs_errorList = function (setting) {
        if (!setting.spreadSetting) {
            setting.spreadSetting = {
                cols: [
                    {title: '行号', field: 'serialNo', width: 50, formatter: '@'},
                    {
                        title: '错误类型', field: 'errorType', width: 60, formatter: '@',
                        getValue: function (x) {
                            switch (x.errorType) {
                                case 'qty': return '数量';
                                case 'tp': return '金额';
                                default: return '';
                            }
                        }
                    },
                    {title: '清单编号', field: 'b_code', width: 135, formatter: '@'},
                    {title: '清单名称', field: 'name', width: 215, formatter: '@'},
                ],
                emptyRows: 0,
                headRows: 1,
                headRowHeight: [32],
                defaultRowHeight: 21,
                headerFont: '12px 微软雅黑',
                font: '12px 微软雅黑',
                selectedBackColor: '#fffacd',
                readOnly: true,
            };
        }

        const clearErrorData = function () {
            if (setting.storeKey) removeLocalCache(setting.storeKey);
        };

        const autoShowHistory = function (show) {
            if (setting.storeKey) {
                setLocalCache(setting.storeKey + '-showHis', show.toString());
            }
        };

        if (setting.selector && setting.relaSpread) {
            const resultId = setting.id + '-spread';
            const obj = $(setting.selector);
            obj.html(
                '                        <div id="' + resultId + '" class="sjs-sh">\n' +
                '                        </div>'
            );
            autoFlashHeight();

            const spread = SpreadJsObj.createNewSpread($('#' + resultId)[0]);
            const sheet = spread.getActiveSheet();
            SpreadJsObj.initSheet(sheet, setting.spreadSetting);

            spread.getActiveSheet().bind(spreadNS.Events.CellDoubleClick, function (e, info) {
                const sheet = info.sheet;
                const data = sheet.zh_data;
                if (!data) { return }

                const curBills = data[info.row];
                if (!curBills) { return }

                SpreadJsObj.locateTreeNode(setting.relaSpread.getActiveSheet(), curBills.ledger_id, true);
                if (setting.afterLocated) {
                    setting.afterLocated();
                }
            });

            const loadErrorData = function (data, his = false) {
                const sourceTree = setting.relaSpread.getActiveSheet().zh_tree;
                if (!sourceTree) return;

                for (const d of data) {
                    d.serialNo = sourceTree.getNodeIndex(sourceTree.getItems(d.ledger_id)) + 1;
                }
                data.sort(function (a, b) {
                    return a.serialNo - b.serialNo;
                });

                SpreadJsObj.loadSheetData(sheet, SpreadJsObj.DataType.Data, data);
                if (!his && setting.storeKey) {
                    setLocalCache(setting.storeKey, JSON.stringify(data));
                }
                $(setting.tabSelector).show();
            };
            const showErrorList = function () {
                const tab = $(setting.tabSelector), tabPanel = $(tab.attr('content'));
                $('a', '#side-menu').removeClass('active');
                tab.addClass('active');
                $('.tab-content .tab-pane').removeClass('active');
                tabPanel.addClass('active');
                showSideTools(true);
                spread.refresh();
                if (setting.afterShow) setting.afterShow();
            };
            const loadHisErrorData = function () {
                if (setting.storeKey) {
                    const storeStr = getLocalCache(setting.storeKey);

                    const storeData = storeStr ? JSON.parse(storeStr) : [];
                    if (storeData.length > 0) {
                        loadErrorData(storeData, true);
                        const showHis = getLocalCache(setting.storeKey + '-showHis');
                        if (showHis === 'true') {
                            showErrorList();
                            removeLocalCache(setting.storeKey + '-showHis');
                        }
                    }
                }
            };
            return {
                spread: spread,
                loadErrorData: loadErrorData,
                clearErrorData: clearErrorData,
                loadHisErrorData: loadHisErrorData,
                show: showErrorList,
                autoShowHistory: autoShowHistory,
            };
        } else {
            const loadErrorData = function (data) {
                if (setting.storeKey) {
                    setLocalCache(setting.storeKey, JSON.stringify(data));
                }
            };
            return {
                loadErrorData: loadErrorData,
                clearErrorData: clearErrorData,
                autoShowHistory: autoShowHistory,
            };
        }
    };

    $.ledger_checkList = function (setting) {
        const checkTypeText = [];
        for (const ct in setting.checkType) {
            checkTypeText[setting.checkType[ct].value] = setting.checkType[ct].text;
        }
        if (!setting.spreadSetting) {
            setting.spreadSetting = {
                cols: [
                    {
                        title: '类型', field: 'type', width: 150, formatter: '@',
                        getValue: function (data){
                            if (setting.checkType) {
                                return checkTypeText[data.type] || '';
                            } else {
                                return '';
                            }
                        }
                    },
                    {title: '行号', field: 'serialNo', hAlign: 1, width: 40, formatter: '@'},
                    {title: '项目节编号', field: 'code', width: 80, formatter: '@'},
                    {title: '清单编号', field: 'b_code', width: 80, formatter: '@'},
                    {title: '名称', field: 'name', width: 150, formatter: '@'},
                ],
                emptyRows: 0,
                headRows: 1,
                headRowHeight: [32],
                defaultRowHeight: 21,
                headerFont: '12px 微软雅黑',
                font: '12px 微软雅黑',
                selectedBackColor: '#fffacd',
                readOnly: true,
            };
        }

        const clearCheckData = function () {
            if (setting.storeKey) removeLocalCache(setting.storeKey);
        };

        const autoShowHistory = function (show) {
            if (setting.storeKey) {
                setLocalCache(setting.storeKey + '-showHis', show.toString());
            }
        };

        if (setting.selector && setting.relaSpread) {
            const resultId = setting.id + '-spread';
            const obj = $(setting.selector);
            const dropdown = [];
            if (setting.checkType) {
                dropdown.push('<div class="dropdown">');
                dropdown.push('<button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="'+ setting.id + 'drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">所有类型</button>');
                dropdown.push('<div class="dropdown-menu" aria-labelledby="'+ setting.id + 'drop">');
                dropdown.push('<a class="dropdown-item" href="javascript: void(0);" check-type="all">所有类型</a>');
                for (const ct in setting.checkType) {
                    dropdown.push('<a class="dropdown-item" href="javascript: void(0);" check-type="' + setting.checkType[ct].value +'">' + setting.checkType[ct].text + '</a>');
                }
                dropdown.push('</div>');
                dropdown.push('</div>');
            }
            obj.html(
                '<div class="sjs-bar">\n' +
                '    <div class="pb-1 d-flex">\n' + dropdown.join('') +
                '        <span class="ml-auto pr-2" id="' + setting.id + '-time">检查时间：2020-08-01 13:20:25</span>\n' +
                '    </div>\n' +
                '</div>' +
                '<div id="' + resultId + '" class="sjs-sh">\n' +
                '</div>'
            );
            autoFlashHeight();


            const spread = SpreadJsObj.createNewSpread($('#' + resultId)[0]);
            const sheet = spread.getActiveSheet();
            SpreadJsObj.initSheet(sheet, setting.spreadSetting);

            spread.getActiveSheet().bind(spreadNS.Events.CellDoubleClick, function (e, info) {
                const sheet = info.sheet;
                const data = sheet.zh_data;
                if (!data) { return }

                const curBills = data[info.row];
                if (!curBills) { return }

                SpreadJsObj.locateTreeNode(setting.relaSpread.getActiveSheet(), curBills.ledger_id, true);
                if (setting.afterLocated) {
                    setting.afterLocated();
                }
            });

            const filterCheckData = function () {
                const filter = $(this).attr('check-type');
                $('#' + setting.id + 'drop').html(this.innerHTML);
                for (const d of sheet.zh_data) {
                    if (filter === 'all') {
                        d.visible = true;
                    } else {
                        d.visible = d.type == filter;
                    }
                }
                SpreadJsObj.refreshTreeRowVisible(sheet);
            };
            $('a[check-type]').bind('click', filterCheckData);

            const hideCheckData = function () {
                const tab = $(setting.tabSelector), tabPanel = $(tab.attr('content'));
                if (tab.hasClass('active')) {
                    $('a', '#side-menu').removeClass('active');
                    tab.addClass('active');
                    $('.tab-content .tab-pane').removeClass('active');
                    tabPanel.addClass('active');
                    showSideTools(false);
                    if (spread) spread.refresh();
                    if (setting.afterShow) setting.afterShow();
                    tab.hide();
                }
            };

            const loadCheckData = function (data, his = false) {
                const sourceTree = setting.relaSpread.getActiveSheet().zh_tree;
                if (!sourceTree) return;

                for (const d of data.warning_data) {
                    d.serialNo = sourceTree.getNodeIndex(sourceTree.getItems(d.ledger_id)) + 1;
                }

                $('#' + setting.id + '-time').html('检查时间：' + moment(data.check_time).format('YYYY-MM-DD HH:mm:ss'));
                SpreadJsObj.loadSheetData(sheet, SpreadJsObj.DataType.Data, data.warning_data);
                if (!his && setting.storeKey) {
                    setLocalCache(setting.storeKey, JSON.stringify(data));
                }
                $(setting.tabSelector).show();
            };
            const showCheckList = function () {
                const tab = $(setting.tabSelector), tabPanel = $(tab.attr('content'));
                $('a', '#side-menu').removeClass('active');
                tab.addClass('active');
                $('.tab-content .tab-pane').removeClass('active');
                tabPanel.addClass('active');
                showSideTools(true);
                spread.refresh();
                if (setting.afterShow) setting.afterShow();
            };
            const loadHisCheckData = function () {
                if (setting.storeKey) {
                    const storeStr = getLocalCache(setting.storeKey);

                    const storeData = storeStr ? JSON.parse(storeStr) : null;
                    if (storeData) {
                        loadCheckData(storeData, true);
                        const showHis = getLocalCache(setting.storeKey + '-showHis');
                        if (showHis === 'true') {
                            showCheckList();
                            removeLocalCache(setting.storeKey + '-showHis');
                        }
                    }
                }
            };
            return {
                spread: spread,
                loadCheckData: loadCheckData,
                clearCheckData: clearCheckData,
                loadHisCheckData: loadHisCheckData,
                show: showCheckList,
                hide: hideCheckData,
                autoShowHistory: autoShowHistory,
            };
        } else {
            const loadCheckData = function (data) {
                if (setting.storeKey) {
                    setLocalCache(setting.storeKey, JSON.stringify(data));
                }
            };
            return {
                loadCheckData: loadCheckData,
                clearCheckData: clearCheckData,
                autoShowHistory: autoShowHistory,
            };
        }
    };

    $.posSearch = function (setting) {
        if (!setting.selector || !setting.searchSpread) return;
        const searchHtml =
            '                                <div class="ml-2">\n' +
            '                                    <div class="input-group input-group-sm">\n' +
            '                                        <input type="text" class="form-control" placeholder="输入名称查找" id="pos-keyword">\n' +
            '                                        <div class="input-group-append">\n' +
            '                                            <span class="input-group-text" id="pos-search-hint">结果：0</span>\n' +
            '                                        </div>\n' +
            '                                        <div class="input-group-append" >\n' +
            '                                            <button class="btn btn-outline-secondary" type="button" title="上一个" id="search-pre-pos"><i class="fa fa-angle-double-left"></i></button>\n' +
            '                                            <button class="btn btn-outline-secondary" type="button" title="下一个" id="search-next-pos"><i class="fa fa-angle-double-right"></i></button>\n' +
            '                                        </div>\n' +
            '                                    </div>\n' +
            '                                </div>\n';
        $(setting.selector).html(searchHtml);
        const sheet = setting.searchSpread.getActiveSheet();
        const searchObj = (function () {
            let resultArr = [];
            const search = function (keyword) {
                if (keyword && keyword !== '') {
                    resultArr = [];
                    const sortData = sheet.zh_data;
                    if (sortData) {
                        for (let i = 0, iLength = sortData.length; i < iLength; i++) {
                            const sd = sortData[i];
                            if (sd.name && sd.name.indexOf(keyword) > -1) {
                                resultArr.push({index: i, data: sd});
                            }
                        }
                    }
                } else {
                    resultArr = [];
                }
                $('#pos-search-hint').html('结果：' + resultArr.length);
            };
            const searchAndLocate = function (keyword) {
                search(keyword);
                if (resultArr.length > 0) {
                    const sel = sheet.getSelections()[0];
                    const curRow = sel ? sel.row : 0;
                    const pos = resultArr[0];
                    if (pos.index !== curRow) {
                        sheet.setSelection(pos.index, sel ? sel.col : 0, 1, 1);
                        sheet.getParent().focus();
                        sheet.showRow(pos.index, spreadNS.VerticalPosition.center);
                        SpreadJsObj.reloadRowsBackColor(sheet, [pos.index, curRow]);
                    }
                }
            };
            const locateNext = function () {
                if (resultArr.length > 0) {
                    const sel = sheet.getSelections()[0];
                    const curRow = sel ? sel.row : 0;
                    let next = _.find(resultArr, function (d) {
                        return d.index > curRow;
                    });
                    if (!next) next = resultArr[0];
                    if (next.index !== curRow) {
                        sheet.setSelection(next.index, sel ? sel.col : 0, 1, 1);
                        sheet.getParent().focus();
                        sheet.showRow(next.index, spreadNS.VerticalPosition.center);
                        SpreadJsObj.reloadRowsBackColor(sheet, [next.index, curRow]);
                    }
                }
            };
            const locatePre = function () {
                if (resultArr.length > 0) {
                    const sel = sheet.getSelections()[0];
                    const curRow = sel ? sel.row : 0;
                    let next = _.findLast(resultArr, function (d) {
                        return d.index < curRow;
                    });
                    if (!next) next = resultArr[resultArr.length - 1];
                    if (next.index !== curRow) {
                        sheet.setSelection(next.index, sel ? sel.col : 0, 1, 1);
                        sheet.getParent().focus();
                        sheet.showRow(next.index, spreadNS.VerticalPosition.center);
                        SpreadJsObj.reloadRowsBackColor(sheet, [next.index, curRow]);
                    }
                }
            };
            return {search, searchAndLocate, locateNext, locatePre};
        })();
        // $('#pos-keyword').bind('input propertychange', function () {
        //     posSearch.search(this.value);
        // });
        $('#pos-keyword').bind('keydown', function(e){
            if (e.keyCode == 13) searchObj.searchAndLocate(this.value);
        });
        $('#search-pre-pos').click(function () {
            searchObj.locatePre();
        });
        $('#search-next-pos').click(function () {
            searchObj.locateNext();
        });
        return searchObj;
    };
    $.billsSearch = function (setting) {
        if (!setting.selector || !setting.searchSpread || !setting.resultSpreadSetting) return;
        if (!setting.searchRangeStr) setting.searchRangeStr = '项目节编号/清单编号/名称';
        const resultId = setting.id + '-search-result';
        const obj = $(setting.selector);
        let filter = [];
        if (setting.searchOver || setting.searchEmpty) {
            filter.push('<select class="form-control form-control-sm" id="search-filter">');
            filter.push('<option value="">台账</option>');
            if (setting.customSearch) {
                for (const cs of setting.customSearch) {
                    if (cs.valid) filter.push('<option value="' + cs.key + '">' + cs.title + '</option>');
                }
            }
            filter.push('</select>');
            // filter.push('<div class="input-group-prepend">');
            // filter.push('<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">台账</button>');
            // filter.push('<div class="dropdown-menu">');
            // filter.push('<a class="dropdown-item" href="javascripty: void(0)" id="search-bills">台账</a>');
            // filter.push('<a class="dropdown-item" href="javascripty: void(0)" id="search-over">超计</a>');
            // filter.push('<a class="dropdown-item" href="javascripty: void(0)" id="search-less">漏计</a>');
            // filter.push('</div>');
            // filter.push('</div>');
        }
        obj.html(
            '                        <div class="sjs-bar">\n' +
            '                            <div class="input-group input-group-sm pb-1">\n' +
            '                                <div class="input-group-prepend">\n' +
            filter.join('') +
            '                                </div>' +
            '                                <input id="searchKeyword" type="text" class="form-control" autocomplete="off" placeholder="可查找 ' + setting.searchRangeStr + '" aria-label="Recipient\'s username" aria-describedby="button-addon2">\n' +
            '                                <div class="input-group-append">\n' +
            '                                    <button class="btn btn-outline-secondary" type="button"">搜索</button>\n' +
            '                                </div>\n' +
            '                            </div>\n' +
            '                        </div>\n' +
            '                        <div id="' + resultId + '" class="sjs-sh">\n' +
            '                        </div>'
        );
        autoFlashHeight();
        const resultSpread = SpreadJsObj.createNewSpread($('#' + resultId)[0]);
        SpreadJsObj.initSheet(resultSpread.getActiveSheet(), setting.resultSpreadSetting);
        const searchSheet = setting.searchSpread.getActiveSheet();
        let searchResult = [];
        const search = function () {
            const filter = $('#search-filter').val();
            if (filter) {
                searchCustom(filter);
            } else {
                searchBills();
            }
        };
        const searchBills = function () {
            const keyword = $('#searchKeyword', obj).val();
            searchResult = [];
            const sortData = SpreadJsObj.getSortData(searchSheet);
            for (const node of sortData) {
                if ((node.code && node.code.indexOf(keyword) > -1) ||
                    node.b_code && node.b_code.indexOf(keyword) > -1 ||
                    node.name && node.name.indexOf(keyword) > -1) {
                    const data = JSON.parse(JSON.stringify(node));
                    data.visible = true;
                    searchResult.push(data);
                }
            }
            SpreadJsObj.loadSheetData(resultSpread.getActiveSheet(), 'data', searchResult);
        };
        const getCheckFun = function (key) {
            const cs = setting.customSearch.find(function (x) {return x.key === key});
            return cs ? cs.check : null;
        };
        const searchCustom = function (key) {
            const keyword = $('#searchKeyword', obj).val();
            const checkFun = getCheckFun(key);
            searchResult = [];
            const sortData = SpreadJsObj.getSortData(searchSheet);
            for (const node of sortData) {
                if (node.children && node.children.length > 0) continue;
                if (checkFun && checkFun(node)) {
                    if (!keyword ||
                        (node.code && node.code.indexOf(keyword) > -1) ||
                        (node.b_code && node.b_code.indexOf(keyword) > -1) ||
                        (node.name && node.name.indexOf(keyword) > -1)) {
                        const data = JSON.parse(JSON.stringify(node));
                        data.visible = true;
                        searchResult.push(data);
                    }
                }
            }
            calculateCompletePercent(searchResult);
            SpreadJsObj.loadSheetData(resultSpread.getActiveSheet(), 'data', searchResult);
        };
        const calculateCompletePercent = function (searchResult) {
            if (!searchResult) return;
            for (const sr of searchResult) {
                const base = ZhCalc.add(sr.total_price, sr.end_qc_tp);
                sr.complete_percent = base !== 0 ? ZhCalc.mul(ZhCalc.div(sr.end_gather_tp, base), 100, 2) : 0;
            }
        };

        $('input', obj).bind('keydown', function (e) {
            if (e.keyCode == 13) search();
        });
        $('button', obj).bind('click', () => {search()});
        resultSpread.getActiveSheet().bind(spreadNS.Events.CellDoubleClick, function (e, info) {
            const sheet = info.sheet;
            const data = sheet.zh_data;
            if (!data) { return }

            const curBills = data[info.row];
            if (!curBills) { return }

            SpreadJsObj.locateTreeNode(searchSheet, curBills.ledger_id, true);
            if (setting.afterLocated) {
                setting.afterLocated();
            }
        });
        return {spread: resultSpread};
    };

    $.billsTag = function (setting) {
        if (!setting.selector || !setting.relaSpread) return;
        if (!setting.tagType) setting.tagType = [
            {tagClass: 'text-primary', color: '#007bff'},
            {tagClass: 'text-success', color: '#28a745'},
            {tagClass: 'text-danger', color: '#dc3545'},
            {tagClass: 'text-warning', color: '#da9500'},
            {tagClass: 'text-info', color: '#17a2b8'},
        ];
        const obj = $(setting.selector);
        const html = [], pageLength = 15;
        let billsTags = [], classIndexes = [], billsIndexes = {}, curShow = [];
        html.push('<div class="sjs-bar d-flex justify-content-between">');
        // 下拉过滤
        html.push('<div class="dropdown mr-2">');
        html.push('<a class="btn btn-sm btn-outline-secondary" id="dmb-bills-tag" data-toggle="dropdown" title="优先显示" aria-expanded="false"><i class="fa fa-list-ol" id="bills-tag-filter"></i></a>');
        html.push('<div class="dropdown-menu" aria-labelledby="dmb-bills-tag" style="min-width: 60px; position: absolute; transform: translate3d(0px, 22px, 0px); top: 0px; left: 0px; will-change: transform;" x-placement="bottom-start">');
        html.push('<a class="dropdown-item" href="javascript: void(0);" tagType="all" ><i class="fa fa-list-ol"></i></a>');
        for (const t of setting.tagType) {
            html.push(`<a class="dropdown-item ${t.tagClass}" href="javascript: void(0);" tagType="${t.tagClass}" ><i class="fa fa-tag"></i></a>`);
            t.tags = [];
            classIndexes.push(t);
        }
        html.push('</div>', '</div>');
        // 搜索框
        html.push('<div class="input-group input-group-sm">');
        html.push('<input type="text" class="form-control" placeholder="可查找 项目节编号 / 清单编号 /名称" id="bills-tag-keyword" autocomplete="off">');
        html.push('<div class="input-group-append">', '<div class="input-group-cancel">',
            '<a href="javascript: void(0);" id="bills-tag-clear" class="text-danger"><i class="fa fa-times-circle" title="移除搜索结果"></i></a>', '</div>',
            '<button class="btn btn-outline-secondary" type="button" id="bills-tag-search">搜索</button>', '</div>');
        html.push('</div>');
        html.push('</div>');
        // 书签列表
        html.push('<div class="sjs-sh" style="overflow: auto;" id="bills-tag-list"></div>');
        obj.html(html.join(''));

        const clearViewTags = function () {
            const viewTags = $('.tag-item', obj);
            if (viewTags && viewTags.length > 0) viewTags.remove();
            billsTags.forEach(x => {x.display = false});
        };

        const getTagEditHtml = function(tag) {
            const tagClass = classIndexes.find(x => {return x.color === tag.color}) || {};
            const tagHtml = [];
            tagHtml.push('<div name="tag-edit">');
            tagHtml.push('<div class="card-header p-2"><div class="dropdown">');
            tagHtml.push(`<a class="pull-left mr-2" href="javascript: void(0);" id="tag-change-color" tag-color="${tag.color}" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tag ${tagClass.tagClass}" title="修改书签颜色"></i></a>`);
            // 下拉选择颜色
            tagHtml.push('<div class="dropdown-menu" aria-labelledby="tag-change-color" style="min-width:60px">',
                '<a class="dropdown-item text-primary" href="javascript: void(0);" name="tag-color"><i class="fa fa-tint"></i></a>',
                '<a class="dropdown-item text-success " href="javascript: void(0);" name="tag-color"><i class="fa fa-tint"></i></a>',
                '<a class="dropdown-item text-danger " href="javascript: void(0);" name="tag-color"><i class="fa fa-tint"></i></a>',
                '<a class="dropdown-item text-warning " href="javascript: void(0);" name="tag-color"><i class="fa fa-tint"></i></a>',
                '<a class="dropdown-item text-info " href="javascript: void(0);" name="tag-color"><i class="fa fa-tint"></i></a>', '</div>');
            tagHtml.push('</div>');
            tag.node && tagHtml.push((tag.node.code || '') + (tag.node.b_code || ''), ' / ', tag.node.name || '');
            tagHtml.push('</div>');

            tagHtml.push('<div class="card-body p-2">');
            tagHtml.push('<p class="card-text">', '<textarea class="form-control form-control-sm p-1" id="tag-comment">', tag.comment, '</textarea>', '</p>');

            tagHtml.push('<div class="d-flex justify-content-between">');
            // 参与人可见
            tagHtml.push('<div class="custom-control custom-switch mr-2">');
            tagHtml.push('<input type="checkbox" class="custom-control-input custom-control-warning-input" id="tag-share"', tag.share ? 'checked' : '', '>');
            tagHtml.push('<label class="custom-control-label custom-control-warning-label" for="tag-share" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="所有参与台帐审批管理的用户都可以看到这条书签"><i class="fa fa-users"></i> 参与者可见</label>');
            tagHtml.push('</div>');
            // 编辑按钮
            tagHtml.push('<div>', '<button type="button" class="btn btn-sm btn-outline-danger mr-3" id="tag-del"><i class="fa fa-close"></i>  删除书签</button>',
                '<button type="button" class="btn btn-sm btn-outline-success mr-1" id="tag-edit-ok"><i class="fa fa-check"></i> 确定</button>',
                '<button type="button" class="btn btn-sm btn-outline-secondary" id="tag-edit-cancel">取消</button>', '</div>');
            tagHtml.push('</div>');

            tagHtml.push('</div>');

            tagHtml.push('</div>');
            return tagHtml.join('');
        };

        const getTagDisplayHtml = function (tag) {
            const tagClass = classIndexes.find(x => {return x.color === tag.color}) || {};
            const tagHtml = [];
            tagHtml.push('<div name="tag-view">');
            tagHtml.push('<div class="card-header p-2"><div class="dropdown">');
            tagHtml.push(`<div class="pull-left mr-2"><i class="fa fa-tag ${tagClass.tagClass}"></i></div>`);
            tagHtml.push('</div>');
            tag.node && tagHtml.push((tag.node.code || '') + (tag.node.b_code || ''), ' / ', tag.node.name || '');
            if (tag.share) {
                tagHtml.push('<i class="fa fa-users pull-right text-warning" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="所有参与台帐审批管理的用户都可以看到这条书签"></i>')
            }
            tagHtml.push('<div class="pull-right edit-tag-btn">');
            const lid = tag.node ? tag.node.ledger_id : -1;
            tagHtml.push(`<a class="mr-1" name="bills-tag-locate" href="javascript: void(0);" lid="${lid}"><i class="fa fa-crosshairs"></i> 定位</a>`);
            if (tag.uid === userID) tagHtml.push(`<a href="javascript: void(0);" name="bills-tag-edit" tag-id="${tag.id}"><i class="fa fa-edit"></i> 编辑</a>`);
            tagHtml.push('</div>');
            tagHtml.push('<div class="card-body p-2">', '<p class="card-text">', tag.comment, '</p>', '</div>');
            tagHtml.push('</div>');
            return tagHtml.join('');
        };

        const searchTagsAndShow = function () {
            const keyword = $('#bills-tag-keyword').val();
            const filterClass = $('#bills-tag-filter')[0].classList;
            const tagClass = filterClass.length > 2 ? filterClass[2] : null;
            const ci = tagClass ? classIndexes.find(x => {return x.tagClass === tagClass}) : null;
            curShow = billsTags.filter(x => {
                if (ci && ci.color !== x.color) return false;
                if (!keyword) return true;
                if (x.node.code && x.node.code.indexOf(keyword) >= 0) return true;
                if (x.node.b_code && x.node.b_code.indexOf(keyword) >= 0) return true;
                if (x.node.name && x.node.name.indexOf(keyword) >= 0) return true;
                return false;
            });
            reloadViewTags();
        };

        const refreshTagView = function (tag) {
            const obj = $('#bills-tag-' + tag.id);
            if (obj && obj.length > 0) {
                obj.html(getTagDisplayHtml(tag));
            }
        };

        const refreshBillsTagView = function (bills) {
            const bi = billsIndexes[bills.id] || [];

            for (const tag of bi) {
                refreshTagView(tag);
            }
        };

        const reviewTag = function (tag, isTop = false) {
            const obj = $('#bills-tag-' + tag.id);
            if (obj && obj.length > 0) {
                obj.html(getTagDisplayHtml(tag));
            } else {
                const objHtml = [];
                objHtml.push(`<div class="card border-primary my-2 tag-item" id="bills-tag-${tag.id}" tag-id="${tag.id}">`);
                objHtml.push(getTagDisplayHtml(tag));
                objHtml.push('</div>');
                if (isTop) {
                    $('#bills-tag-list').prepend(objHtml.join(''));
                } else {
                    $('#bills-tag-list').append(objHtml.join(''));
                }
            }
            tag.display = true;
        };

        const loadViewTags = function () {
            let showCount = 0;
            for (const t of curShow) {
                if (showCount >= pageLength) continue;
                if (t.display) continue;
                reviewTag(t);
                showCount++;
            }
        };

        const reloadViewTags = function () {
            clearViewTags();
            $("#bills-tag-lis").scrollTop(0);
            loadViewTags();
        };

        const _addToBillsIndex = function(data, isTop = false) {
            let bi = billsIndexes[data.lid];
            if (!bi) {
                bi = [];
                billsIndexes[data.lid] = bi;
            }
            isTop ? bi.unshift(data) : bi.push(data);
        };

        const loadDatas = function (datas) {
            billsTags = [];
            billsIndexes = {};
            for (const d of datas) {
                billsTags.push(d);
                _addToBillsIndex(d);
            }
            curShow = billsTags;
            reloadViewTags();
        };

        const updateDatas = function (data) {
            const refresh = {};
            if (data.add) {
                billsTags.push(data.add);
                _addToBillsIndex(data.add, true);
                refresh.add = data.add;
            }
            if (data.del) {
                const delTag = billsTags.find(x => {return x.id === data.del});
                billsTags.splice(billsTags.indexOf(delTag), 1);
                if (delTag.node) {
                    const bi = billsIndexes[delTag.node.id];
                    bi.splice(bi.indexOf(delTag), 1);
                }
                refresh.del = delTag;
            }
            if (data.update) {
                const updateTag = billsTags.find(x => {return x.id === data.update.id});
                for (const prop in data.update) {
                    updateTag[prop] = data.update[prop];
                }
                refresh.update = updateTag;
            }
            return refresh;
        };

        const updateDatasAndShow = function (data) {
            const relaBills = [];
            const refresh = updateDatas(data);
            if (refresh.add) {
                reviewTag(refresh.add, true);
                relaBills.push(refresh.add.node);
            }
            if (refresh.del) {
                $('#bills-tag-' + refresh.del.id).remove();
                relaBills.push(refresh.del.node);
            }
            if (refresh.update) {
                refreshTagView(refresh.update);
                relaBills.push(refresh.update.node);
            }
            return relaBills;
        };

        const show = function () {
            showSelectTab(setting.selector, null, setting.afterShow);
        };

        const getBillsTagsColor = function (id) {
            const billsTags = billsIndexes[id] || [];
            return billsTags.length > 0 ? billsTags.map(x => {return x.color}) : undefined;
        };

        const getBillsTagsInfo = function (id) {
            const billsTags = billsIndexes[id] || [];
            return billsTags.length > 0 ? billsTags.map(x => {
                const tagClass = classIndexes.find(tc => {return tc.color === x.color}) || {};
                return {color: x.color, comment: x.comment, tagClass: tagClass.tagClass};
            }) : undefined;
        };

        $('body').on('click', '[name=bills-tag-locate]', function () {
            const lid = parseInt(this.getAttribute('lid'));
            SpreadJsObj.locateTreeNode(setting.relaSpread.getActiveSheet(), lid);
            setting.afterLocated && setting.afterLocated();
        });
        $('body').on('click', '[name=bills-tag-edit]', function () {
            const tagId = this.getAttribute('tag-id');
            const tag = billsTags.find(x => {return x.id == tagId});
            if (tag) {
                const obj = $('#bills-tag-' + tag.id);
                $('[name=tag-view]', obj).hide();
                obj.append(getTagEditHtml(tag));
            }
        });
        $('body').on('click', '#tag-edit-cancel', function () {
            const obj = $('[name=tag-edit]').parent();
            $('[name=tag-edit]').remove();
            $('[name=tag-view]', obj).show();
        });
        $('body').on('click', '#tag-del', function () {
            const obj = $('[name=tag-edit]').parent();
            postData(setting.updateUrl, {del: parseInt(obj.attr('tag-id'))}, function (result) {
                if (!result.del) return;

                const bills = updateDatasAndShow(result);
                setting.afterModify && setting.afterModify(bills);
            });
        });
        $('body').on('click', '#tag-edit-ok', function () {
            const obj = $('[name=tag-edit]').parent();
            const data = {
                id: parseInt(obj.attr('tag-id')),
                share: $('#tag-share')[0].checked,
                comment: $('#tag-comment').val(),
                color: $('#tag-change-color').attr('tag-color'),
            };
            postData(setting.updateUrl, {update: data}, function (result) {
                if (!result.update) return;

                const bills = updateDatasAndShow(result);
                setting.afterModify && setting.afterModify(bills);
            });
        });
        $('body').on('click', '[name=tag-color]', function () {
            const tagClass = this.classList[1];
            const ci = classIndexes.find(tc => {return tc.tagClass === tagClass});
            const tcc = $('#tag-change-color');
            tcc.attr('tag-color', ci.color);
            tcc.find('i').attr('class', 'fa fa-tag ' + tagClass);
        });
        $('body').on('click', '[tagType]', function () {
            const tagClass = this.getAttribute('tagType');
            if (tagClass === 'all') {
                $('#bills-tag-filter').attr('class', 'fa fa-list-ol');
            } else {
                $('#bills-tag-filter').attr('class', 'fa fa-tag ' + tagClass);
            }
            searchTagsAndShow();
        });
        // 防抖
        function debounce(fun, delay) {
            let timer = null;
            return function () {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(fun, delay);
            }
        }
        $('#bills-tag-list').bind('scroll', debounce(function (e) {
            const obj = $('#bills-tag-list');
            var sum = obj[0].scrollHeight;
            if (sum <= obj.scrollTop() + obj.height()) {
                loadViewTags();
            }
        }, 300));
        $('#bills-tag-clear').bind('click', () => {
            if (!$('#bills-tag-keyword').val()) return;
            $('#bills-tag-keyword').val('');
            searchTagsAndShow();
        });
        $('#bills-tag-search').bind('click', () => {searchTagsAndShow();});
        $('#bills-tag-keyword').bind('keydown', e => {if (e.keyCode === 13) searchTagsAndShow();});

        return { loadDatas, updateDatasAndShow, show, getBillsTagsColor, getBillsTagsInfo, refreshBillsTagView, }
    }
})(jQuery);