import { Vue, Component, Watch } from 'vue-property-decorator';
import { VNode } from 'vue';
import { on } from '@ibizstudio/runtime';
import { ModelClipboardItem } from './model-clipboard-item/model-clipboard-item';
import { ModelClipboardController } from './controller/model-clipboard-controller';
import { ModelData } from './model-data';
import './model-clipboard.less';

/**
 * 粘贴板
 *
 * @export
 * @class ModelClipboard
 * @extends {Vue}
 */
@Component({
    components: {
        'model-clipboard-item': ModelClipboardItem
    }
})
export class ModelClipboard extends Vue {

    /**
     * 模型操作通用控制器
     *
     * @protected
     * @type {ModelClipboardController}
     * @memberof ModelClipboard
     */
    protected controller: ModelClipboardController = ModelClipboardController.getInstance();

    /**
     * @description 视图层级
     * @private
     * @type {*}
     * @memberof ModelClipboard
     */
    private zIndex: number = 100;

    /**
     * 组件新建完毕
     *
     * @memberof ModelClipboard
     */
    created(): void {
        on(document, 'keydown', (e: KeyboardEvent) => {
            if (e.keyCode === 27) {
                e.stopPropagation();
                this.controller.showChange(false);
            }
        });
    }

    @Watch('controller.isShowModelClipboard', { deep: true, immediate: true })
    showChange(newVal: boolean, oldVal: boolean) {
      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: string, wrap: string) {
      this.$store.commit('upZIndex');
      this.zIndex = this.$store.getters.getZIndex();
      const element: Element = this.$el;
      const maskTag: any = element.getElementsByClassName(mask)[0];
      const warpTag: any = element.getElementsByClassName(wrap)[0];
      if (maskTag && warpTag) {
        maskTag.style.zIndex = this.zIndex;
        warpTag.style.zIndex = this.zIndex;
      }
    }

    /**
     * 清空所有
     *
     * @memberof ModelClipboard
     */
    removeAll(): void {
        if (this.controller.items.length > 0) {
            this.$Modal.confirm({
                title: '确认删除所有?',
                content: '确认删除当前粘贴板的数据?',
                onOk: () => {
                    this.controller.clearAll();
                }
            });
        }
    }

    /**
     * 绘制抽屉内容
     *
     * @returns {VNode}
     * @memberof ModelClipboard
     */
    renderDrawerContent(): VNode {
        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: ModelData, i: number) => {
                            return <model-clipboard-item key={item.uuid} data={item} on-delete={() => this.controller.removeByIndex(i)} />;

                        })}
                    </el-timeline>
                </div>
            </div>
        </drawer >
    }

    /**
     * 绘制内容
     *
     * @returns {*}
     * @memberof ModelClipboard
     */
    render(): any {
        return <div class="model-clipboard">
            {this.renderDrawerContent()}
        </div>;
    }

}