import { __decorate } from "tslib";
import { Prop, Vue } from 'vue-property-decorator';
import { mergeDeepRight } from 'ramda';
import './design-material-panel-base.less';
/**
 * 拖拽面板
 *
 * @export
 * @class DesignMaterialPanelBase
 * @extends {Vue}
 */
export class DesignMaterialPanelBase extends Vue {
    constructor() {
        super(...arguments);
        /**
         * 数据
         *
         * @type {IMaterialItem[]}
         * @memberof DesignMaterialPanelBase
         */
        this.list = [];
        /**
         * 过滤参数
         *
         * @memberof DesignMaterialPanelBase
         */
        this.searchValue = '';
        /**
         * 拖拽参数
         *
         * @private
         * @type {sortable.Options}
         * @memberof DesignMaterialPanelBase
         */
        this.options = {
            group: {
                name: this.ctx.tag,
                pull: 'clone',
                put: false,
            },
            sort: false,
        };
    }
    created() {
        this.componentCreated();
    }
    /**
     * 组件创建完毕
     *
     * @memberof DesignMaterialPanelBase
     */
    componentCreated() { }
    mounted() {
        this.el = this.$refs.panel;
        this.options = mergeDeepRight(this.options, this.generateOption());
        this.componentMounted();
    }
    /**
     * 组件加载完毕
     *
     * @memberof DesignMaterialPanelBase
     */
    componentMounted() { }
    destroyed() {
        this.componentDestroyed();
    }
    /**
     * 组件销毁
     *
     * @memberof DesignMaterialPanelBase
     */
    componentDestroyed() { }
    /**
     * 生成拖拽面板参数
     *
     * @return {*}  {sortable.Options}
     * @memberof DesignMaterialPanelBase
     */
    generateOption() {
        return {};
    }
    /**
     * 容器样式名称
     *
     * @return {*}
     * @memberof DesignMaterialPanelBase
     */
    getClass() {
        return {
            'ibz-design-material-panel': true,
            'ant-row': true,
        };
    }
    /**
     * 容器样式
     *
     * @return {*}
     * @memberof DesignMaterialPanelBase
     */
    getStyle() {
        return {};
    }
    getFilterList(list) {
        const items = list || this.list;
        if (!this.searchValue && Object.is(this.searchValue, '')) {
            return items;
        }
        const regExp = this.searchValue
            .trimStart()
            .trimEnd()
            .toLowerCase();
        return items.filter((item) => {
            const text = item.text.toLowerCase();
            if (text.indexOf(regExp) >= 0) {
                return true;
            }
            else {
                return false;
            }
        });
    }
    /**
     * 监听素材项双击
     *
     * @author zhanghengfeng
     * @date 2023-05-18 14:05:54
     * @param {MouseEvent} e
     * @param {IMaterialItem} _item
     */
    onItemDblClick(e, _item) {
        e.stopPropagation();
    }
    /**
     * 绘制内容
     *
     * @param {CreateElement} _h
     * @return {*}  {VNode[]}
     * @memberof DesignMaterialPanelBase
     */
    renderContentList(_h) {
        const isSearch = this.searchValue && !Object.is(this.searchValue, '');
        const regExp = this.searchValue
            .trimStart()
            .trimEnd()
            .toLowerCase();
        const items = isSearch
            ? this.getFilterList()
            : this.list;
        return items.length > 0 ? (items.map((item, index) => {
            let iconVNode = null;
            if (item.icon) {
                if (item.icon.endsWith('.svg')) {
                    iconVNode = <ion-icon src={item.icon} class='icon-svg'></ion-icon>;
                }
                else if (item.icon.endsWith('</svg>')) {
                    const svg = URL.createObjectURL(new Blob([item.icon], { type: "image/svg+xml;charset=utf-8" }));
                    iconVNode = <img class='editor-picture' src={svg}/>;
                }
                else {
                    iconVNode = <img class='editor-picture' src={`${item.icon}`}/>;
                }
            }
            else if (item.iconcls) {
                iconVNode = <div class='icon'>
                        <i class={item.iconcls}/>
                    </div>;
            }
            return (<div key={index} class='material-item ant-col-12'>
                        <div class='svg-wrapper'>
                            <svg height='30' width='100%' xmlns='http://www.w3.org/2000/svg'>
                                <rect id='shape' height='30' width='100%'/>
                            </svg>
                            <div class='content' title={item.text} on-dblclick={(e) => this.onItemDblClick(e, item)}>
                                {iconVNode}
                                <div class='label'>{item.text}</div>
                            </div>
                        </div>
                    </div>);
        })) : (<div class='material-empty'>暂无数据</div>);
    }
    render(h) {
        return (<draggable sort={false} group={this.options.group} class={this.getClass()} style={this.getStyle()} list={this.getFilterList().map(item => item.data)}>
                {this.renderContentList(h)}
            </draggable>);
    }
}
__decorate([
    Prop()
], DesignMaterialPanelBase.prototype, "ctx", void 0);
__decorate([
    Prop()
], DesignMaterialPanelBase.prototype, "searchValue", void 0);