import { __decorate } from "tslib";
import { acc } from '@ibizstudio/api';
import { isNilOrEmpty } from 'qx-util';
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import { getFormItemIcon } from '../../utils';
import './design-structure-tree.less';
/**
 * 设计结构树
 *
 * @export
 * @class DesignStructureTree
 * @extends {Vue}
 */
let DesignStructureTree = class DesignStructureTree extends Vue {
    constructor() {
        super(...arguments);
        this.searchValue = '';
        /**
         * 树数据
         *
         * @type {any[]}
         * @memberof DesignStructureTree
         */
        this.items = [];
        this.subs = [];
    }
    searchValueChange(val) {
        const tree = this.$refs.tree;
        tree === null || tree === void 0 ? void 0 : tree.filter(val);
    }
    created() {
        this.nodeSelect = this.nodeSelect.bind(this);
        this.masterLoaded = this.masterLoaded.bind(this);
        this.ctx.evt.on('loaded', this.masterLoaded);
        this.ctx.ctrl.select.evt.on('change', this.selectChange);
        this.subs.push(...acc.commandLocals(() => {
            this.load();
        }, ['update', 'create', 'remove'], this.ctx.ctrl.itemEntity.codeName.toUpperCase()));
    }
    mounted() {
        this.tree = this.$refs.tree;
    }
    destroyed() {
        this.ctx.evt.off('loaded', this.masterLoaded);
        this.ctx.ctrl.select.evt.off('change', this.selectChange);
        this.subs.forEach(str => {
            acc.unsubscribeLocal(str);
        });
    }
    /**
     * 选中数据变更
     *
     * @param {*} data
     * @memberof DesignStructureTree
     */
    selectChange(data) {
        if (!this.tree.getNode(data.srfkey)) {
            return;
        }
        this.selectNodeData = this.generateTreeNode(data);
        this.tree.setCurrentKey(data.srfkey);
    }
    /**
     * 主数据加载完毕
     *
     * @memberof DesignStructureTree
     */
    masterLoaded() {
        this.load();
    }
    /**
     * 加载数据
     *
     * @return {*}  {Promise<void>}
     * @memberof DesignStructureTree
     */
    async load() {
        const { ctrl } = this.ctx;
        const s = await ctrl.itemService;
        if (s && s[this.datasetInterface]) {
            const res = await s[this.datasetInterface](this.ctx.context);
            if (res.ok) {
                this.formatData(res.data);
                const { select } = ctrl;
                if (select.data) {
                    this.$nextTick(() => {
                        this.selectChange(select.data);
                    });
                }
            }
        }
        else {
            console.warn(`指定数据集接口「${this.datasetInterface}」不存在!`);
        }
    }
    /**
     * 格式化数据
     *
     * @param {any[]} items
     * @memberof DesignStructureTree
     */
    formatData(items) {
        this.items = [];
        items.forEach((item) => {
            // 表单看是否是表单分页，别的看srfpkey
            if (this.isFormDesign ? item.itemtype == "FORMPAGE" : isNilOrEmpty(item.srfpkey)) {
                const node = this.generateTreeNode(item);
                this.calcTreeLevel(node, items);
                this.items.push(node);
            }
        });
    }
    /**
     * 计算树层级
     *
     * @param {any} node
     * @param {any[]} items
     * @memberof DesignStructureTree
     */
    calcTreeLevel(node, items) {
        node.children = items
            .filter((item) => item.srfpkey === node.id)
            .map((item) => {
            const childNode = this.generateTreeNode(item);
            this.calcTreeLevel(childNode, items);
            return childNode;
        });
    }
    /**
     * 生成树节点数据
     *
     * @param {*} data
     * @return {*}  {*}
     * @memberof DesignStructureTree
     */
    generateTreeNode(data) {
        return {
            text: data.text,
            id: data.srfkey,
            data: data,
        };
    }
    filterTreeNode(value, data, node) {
        if (value) {
            const regExp = value
                .trimStart()
                .trimEnd()
                .toLowerCase();
            const text = data.text.toLowerCase();
            if (text.indexOf(regExp) >= 0) {
                return true;
            }
            else {
                return false;
            }
        }
        else {
            return true;
        }
    }
    /**
     * 树选中
     *
     * @param {*} data
     * @param {*} node
     * @memberof DesignStructureTree
     */
    nodeSelect(data, _node) {
        this.ctx.ctrl.select.set(data.data);
    }
    /**
     * @description 判断节点是否可拖拽
     * @param {*} node
     * @return {*}  {boolean}
     * @memberof DesignStructureTree
     */
    allowDrag(node) {
        if (node.level === 0 || Object.is(node.data.data.detailtype, 'FORMPAGE')) {
            return false;
        }
        return true;
    }
    /**
     * @description 是否可放置
     * @param {*} draggingNode
     * @param {*} dropNode
     * @param {*} type
     * @return {*}  {boolean}
     * @memberof DesignStructureTree
     */
    allowDrop(draggingNode, dropNode, type) {
        if (Object.is(type, 'inner')) {
            if (Object.is(dropNode.data.data.detailtype, 'GROUPPANEL') || Object.is(dropNode.data.data.detailtype, 'FORMPAGE') || Object.is(dropNode.data.data.pvparttype, 'CONTAINER')) {
                return true;
            }
            return false;
        }
        else {
            if (dropNode.level === 0) {
                return false;
            }
            if (Object.is(dropNode.data.data.detailtype, 'FORMPAGE') && !Object.is(draggingNode.data.data.detailtype, 'FORMPAGE')) {
                return false;
            }
            return true;
        }
    }
    /**
     * @description 树节点拖拽
     * @param {*} before
     * @param {*} after
     * @param {*} inner
     * @param {*} event
     * @memberof DesignStructureTree
     */
    async treeNodeChange(before, after, inner, event) {
        const beforeData = before.data.data;
        const afterData = after.data.data;
        let parent = after.parent.data.data;
        if (afterData.srfdename == 'PSAPPPVPART') {
            beforeData.ppsapppvpartid = afterData.ppsapppvpartid || null;
            beforeData.ppsapppvpartname = afterData.ppsapppvpartname || null;
            if (inner === 'inner') {
                parent = after.data.data;
                beforeData.ppsapppvpartid = afterData.psapppvpartid || null;
                beforeData.ppsapppvpartname = afterData.psapppvpartname || null;
            }
        }
        else {
            beforeData.ppsdeformdetailid = afterData.ppsdeformdetailid || null;
            beforeData.ppsdeformdetailname = afterData.ppsdeformdetailname || null;
            if (inner === 'inner') {
                parent = after.data.data;
                beforeData.ppsdeformdetailid = afterData.psdeformdetailid || null;
                beforeData.ppsdeformdetailname = afterData.psdeformdetailname || null;
            }
        }
        const srfpkey = parent ? parent.srfkey : null;
        const items = await this.ctx.ctrl.itemService.selectLocal(this.ctx.context, {
            srfpkey,
        });
        const index = items.findIndex((item) => {
            if (afterData.srfdename == 'PSAPPPVPART') {
                return Object.is(item.psapppvpartid, beforeData.psapppvpartid);
            }
            return Object.is(item.psdeformdetailid, beforeData.psdeformdetailid);
        });
        if (!Object.is(index, -1)) {
            const beforeIndex = items.findIndex((item) => {
                if (afterData.srfdename == 'PSAPPPVPART') {
                    return Object.is(item.psapppvpartid, beforeData.psapppvpartid);
                }
                return Object.is(item.psdeformdetailid, beforeData.psdeformdetailid);
            }) || 0;
            items.splice(beforeIndex, 1);
        }
        const afterIndex = items.findIndex((item) => {
            if (afterData.srfdename == 'PSAPPPVPART') {
                return Object.is(item.psapppvpartid, afterData.psapppvpartid);
            }
            return Object.is(item.psdeformdetailid, afterData.psdeformdetailid);
        }) || 0;
        items.splice(Object.is(inner, 'before') ? afterIndex : afterIndex + 1, 0, beforeData);
        this.ctx.ctrl.itemService.disableAcc();
        for (let i = 0; i < items.length; i++) {
            items[i].ordervalue = (i + 1) * 100;
            await this.ctx.ctrl.itemService.UpdateTemp(this.ctx.context, items[i]);
        }
        this.ctx.ctrl.itemService.enableAcc();
        this.$emit('update-order');
    }
    /**
     * 绘制树节点
     *
     * @param {CreateElement} _h
     * @param {*} context
     * @memberof LogicTree
     */
    renderTreeItem(_h, context) {
        const { data } = context;
        return (<div class={['design-structure-tree-item', this.isFormDesign ? 'form-design-tree-item' : '']}>
            {this.isFormDesign ? this.getTreeNodeIcon(data === null || data === void 0 ? void 0 : data.data) : null}
            <div class='text'>{data === null || data === void 0 ? void 0 : data.text}</div>
          </div>);
    }
    /**
     * 获取树节点对应icon图标
     *
     * @author zhanghengfeng
     * @date 2023-03-28 11:03:24
     * @param {IPSDEFormDetail} data
     * @return {*}
     */
    getTreeNodeIcon(data) {
        if (!data || !data.itemtype) {
            return null;
        }
        const type = data.itemtype;
        switch (type) {
            case 'FORMPAGE':
            case 'TABPANEL':
                return <i class='iconfont icon-tab'></i>;
            case 'GROUPPANEL':
                return <i class='iconfont icon-group'></i>;
            case 'RAWITEM':
                return this.getRawItemIcon(data);
            case 'BUTTON':
                return <i class='iconfont icon-button'></i>;
            case 'IFRAME':
                return <i class='iconfont icon-iframe'></i>;
            case 'FORMITEMEX':
                return <i class='iconfont icon-link'></i>;
            case 'DRUIPART':
                return <i class='iconfont icon-drpart'></i>;
            case 'MDCTRL':
                return <i class='iconfont icon-drpart'></i>;
            case 'FORMITEM':
                return <i class={getFormItemIcon(data)}></i>;
            default:
                return null;
        }
    }
    /**
     * 获取数据itemtype属性值为RAWITEM的icon图标
     *
     * @author zhanghengfeng
     * @date 2023-03-28 11:03:54
     * @param {IPSDEFormDetail} data
     * @return {*}
     */
    getRawItemIcon(data) {
        if (!data.contenttype) {
            return null;
        }
        const type = data.contenttype.toLowerCase();
        const rawItemIcon = {
            html: './assets/svg/raw-html.svg',
            image: './assets/svg/raw-image.svg',
            video: './assets/svg/raw-video.svg',
            placeholder: './assets/svg/raw-placeholder.svg',
            divider: './assets/svg/raw-divider.svg',
            info: './assets/svg/raw-info.svg',
            warning: './assets/svg/raw-warning.svg',
            error: './assets/svg/raw-error.svg',
        };
        if (type === 'raw') {
            return <i class='iconfont icon-code'></i>;
        }
        else if (Object.prototype.hasOwnProperty.call(rawItemIcon, type) && rawItemIcon[type]) {
            return <ion-icon src={rawItemIcon[type]} class='icon'></ion-icon>;
        }
        return null;
    }
    render(h) {
        return (<div class='design-structure-tree'>
                {h('el-tree', {
                ref: 'tree',
                class: 'design-tree',
                props: {
                    data: this.items,
                    draggable: true,
                    'allow-drag': this.allowDrag,
                    'allow-drop': this.allowDrop,
                    'node-key': 'id',
                    'highlight-current': true,
                    'default-expand-all': true,
                    'expand-on-click-node': false,
                    'auto-expand-parent	': false,
                    indent: 8,
                    'render-content': this.renderTreeItem,
                    'filter-node-method': this.filterTreeNode,
                },
                on: {
                    'current-change': this.nodeSelect,
                    'node-drop': this.treeNodeChange,
                },
            })}
            </div>);
    }
};
__decorate([
    Prop()
], DesignStructureTree.prototype, "ctx", void 0);
__decorate([
    Prop({ default: 'FetchDefault' })
], DesignStructureTree.prototype, "datasetInterface", void 0);
__decorate([
    Prop({ default: false })
], DesignStructureTree.prototype, "isFormDesign", void 0);
__decorate([
    Prop()
], DesignStructureTree.prototype, "searchValue", void 0);
__decorate([
    Watch('searchValue')
], DesignStructureTree.prototype, "searchValueChange", null);
DesignStructureTree = __decorate([
    Component({})
], DesignStructureTree);
export { DesignStructureTree };