import { __decorate } from "tslib";
import { Vue, Component, Watch } from 'vue-property-decorator';
import { on } from '@ibizstudio/runtime';
import { ModelClipboardItem } from './model-clipboard-item/model-clipboard-item';
import { ModelClipboardController } from './controller/model-clipboard-controller';
import './model-clipboard.less';
/**
 * 粘贴板
 *
 * @export
 * @class ModelClipboard
 * @extends {Vue}
 */
let ModelClipboard = class ModelClipboard extends Vue {
    constructor() {
        super(...arguments);
        /**
         * 模型操作通用控制器
         *
         * @protected
         * @type {ModelClipboardController}
         * @memberof ModelClipboard
         */
        this.controller = ModelClipboardController.getInstance();
        /**
         * @description 视图层级
         * @private
         * @type {*}
         * @memberof ModelClipboard
         */
        this.zIndex = 100;
    }
    /**
     * 组件新建完毕
     *
     * @memberof ModelClipboard
     */
    created() {
        on(document, 'keydown', (e) => {
            if (e.keyCode === 27) {
                e.stopPropagation();
                this.controller.showChange(false);
            }
        });
    }
    showChange(newVal, oldVal) {
        if (newVal !== undefined) {
            if (newVal) {
                this.handleZIndex('ivu-drawer-mask', 'ivu-drawer-wrap');
            }
            else if (oldVal == true && this.zIndex) {
                this.$store.commit('downZIndex');
            }
        }
    }
    /**
     * @description 处理z-index
     * @param {string} mask
     * @param {string} wrap
     * @memberof ModelClipboard
     */
    handleZIndex(mask, wrap) {
        this.$store.commit('upZIndex');
        this.zIndex = this.$store.getters.getZIndex();
        const element = this.$el;
        const maskTag = element.getElementsByClassName(mask)[0];
        const warpTag = element.getElementsByClassName(wrap)[0];
        if (maskTag && warpTag) {
            maskTag.style.zIndex = this.zIndex;
            warpTag.style.zIndex = this.zIndex;
        }
    }
    /**
     * 清空所有
     *
     * @memberof ModelClipboard
     */
    removeAll() {
        if (this.controller.items.length > 0) {
            this.$Modal.confirm({
                title: '确认删除所有?',
                content: '确认删除当前粘贴板的数据?',
                onOk: () => {
                    this.controller.clearAll();
                }
            });
        }
    }
    /**
     * 绘制抽屉内容
     *
     * @returns {VNode}
     * @memberof ModelClipboard
     */
    renderDrawerContent() {
        return <drawer class-name="model-clipboard-drawer" placement="right" width="500" closable={false} v-model={this.controller.isShowModelClipboard}>
            <div class="model-clipboard-warp">
                <div class="model-clipboard-header">
                    <div class="title">
                        模型粘贴板
                    </div>
                    <div class="actions">
                        <i-button size="small" on-click={() => this.removeAll()}>清空</i-button>
                        <i-button size="small" class="close" type="text" ghost icon="md-close" on-click={() => this.controller.showChange(false)}/>
                    </div>
                </div>
                <div class="model-clipboard-content">
                    <el-timeline>
                        {this.controller.items.map((item, i) => {
                return <model-clipboard-item key={item.uuid} data={item} on-delete={() => this.controller.removeByIndex(i)}/>;
            })}
                    </el-timeline>
                </div>
            </div>
        </drawer>;
    }
    /**
     * 绘制内容
     *
     * @returns {*}
     * @memberof ModelClipboard
     */
    render() {
        return <div class="model-clipboard">
            {this.renderDrawerContent()}
        </div>;
    }
};
__decorate([
    Watch('controller.isShowModelClipboard', { deep: true, immediate: true })
], ModelClipboard.prototype, "showChange", null);
ModelClipboard = __decorate([
    Component({
        components: {
            'model-clipboard-item': ModelClipboardItem
        }
    })
], ModelClipboard);
export { ModelClipboard };