import { __decorate } from "tslib";
import { Vue, Component, Emit, Prop } from 'vue-property-decorator';
import { on } from '@ibizstudio/runtime';
import { ModelService } from '../service/model-service';
import draggable from 'vuedraggable';
import './model-clipboard-import-view.less';
import { ModelClipboardController } from '../controller/model-clipboard-controller';
/**
 * 粘贴板模型导入视图
 *
 * @export
 * @class ModelClipboardImportView
 * @extends {Vue}
 */
let ModelClipboardImportView = class ModelClipboardImportView extends Vue {
    constructor() {
        super(...arguments);
        /**
         * 已拖入的模型
         *
         * @protected
         * @type {ModelData[]}
         * @memberof ModelClipboardImportView
         */
        this.items = [];
        /**
         * 已经导入的条数
         *
         * @protected
         * @type {ModelData[]}
         * @memberof ModelClipboardImportView
         */
        this.importItems = [];
        /**
         * 所有模型
         *
         * @protected
         * @type {any[]}
         * @memberof ModelClipboardImportView
         */
        this.models = [];
        /**
         * 是否在编辑界面更改过模型
         *
         * @protected
         * @type {boolean}
         * @memberof ModelClipboardImportView
         */
        this.isModelChange = false;
        /**
         * 参数
         *
         * @protected
         * @type {OpenParams}
         * @memberof ModelClipboardImportView
         */
        this.param = {};
        /**
         * 字符创模型
         *
         * @protected
         * @type {string}
         * @memberof ModelClipboardImportView
         */
        this.modelStr = '';
        /**
         * 模型操作服务
         *
         * @protected
         * @type {ModelService}
         * @memberof ModelClipboardImportView
         */
        this.service = ModelService.getInstance();
        /**
         * 是否正在加载状态
         *
         * @protected
         * @type {boolean}
         * @memberof ModelClipboardImportView
         */
        this.isLoading = false;
    }
    /**
     * 组件创建完毕
     *
     * @memberof ModelClipboardImportView
     */
    created() {
        on(document, 'keydown', (e) => {
            if (e.keyCode === 27 && this.isLoading === false) {
                this.closeView();
            }
        });
    }
    /**
     * 设置参数
     *
     * @param {*} param
     * @memberof StudioModelEditor
     */
    setParam(param) {
        if (param && !Object.is(JSON.stringify(param), JSON.stringify(this.param))) {
            this.param = param;
            this.clearAllData();
        }
    }
    /**
     * 发送关闭事件
     *
     * @protected
     * @memberof ModelClipboardImportView
     */
    close() {
        this.$Message.destroy();
    }
    /**
     * 保存完毕事件
     *
     * @protected
     * @memberof ModelClipboardImportView
     */
    saved() { }
    /**
     * 关闭当前视图
     *
     * @protected
     * @memberof ModelClipboardImportView
     */
    closeView() {
        if (this.isModelChange) {
            this.$Modal.confirm({
                title: '确认关闭',
                content: '模型数据已变更，确认关闭吗?',
                onOk: () => {
                    this.close();
                    this.clearAllData();
                },
            });
        }
        else {
            this.close();
        }
    }
    /**
     * 模型编辑变更
     *
     * @protected
     * @param {string} val
     * @memberof ModelClipboardImportView
     */
    modelChange(val) {
        if (!Object.is(this.modelStr, val)) {
            this.modelStr = val;
            this.isModelChange = true;
        }
    }
    /**
     * 重置模型，此发放提供给模型重新计算使用。用于覆盖人为修改内容
     *
     * @protected
     * @param {string} val
     * @memberof ModelClipboardImportView
     */
    initModel(val) {
        this.modelStr = val;
        this.isModelChange = false;
    }
    /**
     * 清除当前已计算模型
     *
     * @protected
     * @memberof ModelClipboardImportView
     */
    clearModel() {
        if (this.isModelChange) {
            this.$Modal.confirm({
                title: '确认清除?',
                content: '模型数据已变更，将同已拖入模型一同清空，确认清除吗？',
                onOk: () => {
                    this.clearAllData();
                },
            });
        }
        else {
            this.clearAllData();
        }
    }
    /**
     * 拖入模型变更
     *
     * @protected
     * @param {*} e
     * @memberof ModelClipboardImportView
     */
    dropModelChange(e) {
        if (this.isModelChange) {
            this.$Modal.confirm({
                title: '确认操作?',
                content: '检测到输入框内容已手动修改，该操作后输入框内容将重新计算，确认操作吗？',
                onOk: () => {
                    this.calcModeStr();
                },
                onCancel: () => {
                    if (e && e.added && e.added.newIndex) {
                        this.items.splice(e.added.newIndex, 1);
                    }
                },
            });
        }
        else {
            this.calcModeStr();
        }
    }
    /**
     * 保存模型
     *
     * @protected
     * @param {*} [params={}]
     * @returns {Promise<void>}
     * @memberof ModelClipboardImportView
     */
    async saveModel(params = {}) {
        this.$Message.destroy();
        try {
            this.models = JSON.parse(this.modelStr);
        }
        catch (error) {
            this.$Message.error({ content: '模型数据格式异常，请检查!', closable: true, duration: 0 });
            return;
        }
        this.isLoading = true;
        this.importItems = [];
        let isError = false;
        for (let i = 0; i < this.models.length; i++) {
            const item = this.models[i];
            params = { srfdename: this.param.srfDeName, srfmodel: item, srfparentdata: this.param.srfParentData };
            try {
                const res = await this.service.saveModel(params, { srfdename: this.param.srfDeName });
                if (res.ok) {
                    this.isModelChange = false;
                    this.importItems.push(item);
                    this.saved();
                }
                else {
                    Vue.prototype.$message({ message: res.statusText, type: 'error', showClose: true, center: true, duration: 0 });
                    isError = true;
                    break;
                }
            }
            catch (err) {
                if (err) {
                    Vue.prototype.$message({ message: err.message, type: 'error', showClose: true, center: true, duration: 0 });
                }
                isError = true;
                break;
            }
        }
        if (!isError) {
            this.$Modal.confirm({
                title: '关闭导入界面?',
                content: '已导入完毕，确认关闭导入界面!',
                onOk: () => {
                    this.close();
                },
            });
        }
        setTimeout(() => {
            this.isLoading = false;
        }, 300);
    }
    /**
     * 计算模型文本内容
     *
     * @protected
     * @param {ModelData[]} [items=this.items]
     * @memberof ModelClipboardImportView
     */
    calcModeStr(items = this.items) {
        this.$Message.warning('编辑框内，模型内容已重新计算!');
        this.models = [];
        items.forEach((item) => {
            this.models.push(...item.models);
        });
        try {
            this.initModel(JSON.stringify(this.models, null, 2));
        }
        catch (error) {
            console.log(error);
        }
    }
    /**
     * 删除拖拽项
     *
     * @protected
     * @param {number} i
     * @memberof ModelClipboardImportView
     */
    deleteDropItem(i) {
        this.items.splice(i, 1);
        this.calcModeStr();
    }
    /**
     * 格式化数据
     *
     * @protected
     * @memberof ModelClipboardImportView
     */
    formatData() {
        try {
            this.modelStr = JSON.stringify(JSON.parse(this.modelStr), null, 2);
            return true;
        }
        catch (error) {
            this.$Message.error({
                content: '格式有误无法格式化，请检查!',
                duration: 2.5,
            });
        }
        return false;
    }
    /**
     * 绘制已拖入模型项
     *
     * @protected
     * @param {ModelData} item
     * @returns {*}
     * @memberof ModelClipboardImportView
     */
    renderDragItem(item, i) {
        return (<div class='model-drag-item'>
        <div class='actions'>
          <div class='action-item delete' on-click={() => this.deleteDropItem(i)}>
            <i class='ivu-icon ivu-icon-md-close'/>
          </div>
        </div>
        <div class='title'>{item.title}</div>
        <div class='date'>{item.createdDate}</div>
      </div>);
    }
    /**
     * 绘制素材区模型项
     *
     * @protected
     * @param {ModelData} item
     * @returns {*}
     * @memberof ModelClipboardImportView
     */
    renderMaterialItem(item) {
        return (<div class='model-material-item'>
        <div class='title'>{item.title}</div>
        <div class='date'>{item.createdDate}</div>
      </div>);
    }
    /**
     * 绘制内容
     *
     * @returns {*}
     * @memberof ModelClipboardImportView
     */
    render() {
        const items = ModelClipboardController.getInstance().items.filter((item) => {
            if (!Object.is(this.param.srfDeName, item.srfDeName) || this.items.findIndex((self) => Object.is(self.uuid, item.uuid)) !== -1) {
                return;
            }
            return item;
        });
        return (<el-card class='model-clipboard-import-view' v-loading={this.isLoading} element-loading-text={'数据导入中：' + this.importItems.length + ' / ' + this.models.length} element-loading-spinner='el-icon-loading' element-loading-background='rgba(0, 0, 0, 0.8)'>
        <div slot='header' class='model-clipboard-import-view-header'>
          <span>模型导入</span>
          <i-button title='关闭模型导入窗口' type='text' ghost on-click={() => this.closeView()}>
            关闭
          </i-button>
        </div>
        <div class='model-clipboard-import-view-content'>
          <div class='import-warp'>
            <div class='drop-area'>
              <div class='drop-area-header'></div>
              <draggable class='drop-area-draggable' on-change={(evt) => this.dropModelChange(evt)} group={ModelClipboardController.getInstance().draggableOption.group} list={this.items}>
                {this.items.map((item, i) => {
                return this.renderDragItem(item, i);
            })}
              </draggable>
              1
              <div v-show={this.items.length === 0} class='drop-tooltip'>
                请从右侧素材区拖入
              </div>
            </div>
            <div class='model-edit'>
              <app-code-editor language='json' key='code-content-ftl' value={this.modelStr} on-change={(val) => this.modelChange(val)} codetype='json' height='100%'></app-code-editor>
              <div class='edit-actions'>
                <i-button size='small' title='清空当前已拖入模型' ghost on-click={() => this.clearModel()}>
                  清空
                </i-button>
                <i-button size='small' title='格式化编辑框内JSON数据' ghost on-click={() => this.formatData()}>
                  格式化
                </i-button>
                <i-button size='small' title='导入模型数据' ghost on-click={() => this.saveModel()}>
                  导入
                </i-button>
              </div>
            </div>
          </div>
          <div class='model-material-warp'>
            <div class='model-material-title'>模型素材</div>
            <draggable class='model-material-content' sort={false} group={ModelClipboardController.getInstance().draggableOption.noPutGroup} list={items}>
              {items.map((item) => {
                return this.renderMaterialItem(item);
            })}
            </draggable>
            <div v-show={items.length === 0} class='model-material-tooltip'>
              暂无数据
            </div>
          </div>
        </div>
      </el-card>);
    }
    /**
     * 清理数据
     *
     * @protected
     * @memberof ModelClipboardImportView
     */
    clearAllData() {
        this.items = [];
        this.models = [];
        this.importItems = [];
        this.modelStr = '';
        this.isModelChange = false;
    }
};
__decorate([
    Prop({ default: false })
], ModelClipboardImportView.prototype, "isClose", void 0);
__decorate([
    Emit('close')
], ModelClipboardImportView.prototype, "close", null);
__decorate([
    Emit('saved')
], ModelClipboardImportView.prototype, "saved", null);
ModelClipboardImportView = __decorate([
    Component({
        components: {
            draggable,
        },
    })
], ModelClipboardImportView);
export { ModelClipboardImportView };