import { __decorate } from "tslib";
import { Vue, Component, Prop, Emit, Watch } from 'vue-property-decorator';
import './design-tabs.less';
/**
 * 拖拽设计标签页
 *
 * @export
 * @class DesignTabs
 * @extends {Vue}
 */
let DesignTabs = class DesignTabs extends Vue {
    constructor() {
        super(...arguments);
        /**
         * 当前激活标签页
         *
         * @type {string}
         * @memberof DesignTabs
         */
        this.activeTab = '';
        /**
         * 拖拽配置
         *
         * @type {*}
         * @memberof DesignTabs
         */
        this.options = {
            group: {
                name: 'form-design-' + this.name,
            },
        };
    }
    watchList() {
        if (this.list && this.list.length > 0) {
            const item = this.list.find((item) => item.srfkey === this.activeTab);
            if (!item) {
                this.activeTab = this.list[0].srfkey;
            }
        }
        else {
            this.activeTab = '';
        }
    }
    /**
     * 监控activeItem值变更
     *
     * @param {*} val
     * @param {*} oldVal
     * @memberof DesignTabs
     */
    watchActiveItem(val, oldVal) {
        if (this.activeItem) {
            this.activeTab = this.activeItem.srfkey;
        }
    }
    /**
     * 激活项变更
     *
     * @param {*} item
     * @memberof DesignTabs
     */
    activeItemChange(item) { }
    /**
     * 激活标签页
     *
     * @param {*} item
     * @memberof DesignTabs
     */
    activeTabAction(e, item) {
        e.stopPropagation();
        this.activeTab = item.srfkey;
        this.activeItemChange(item);
    }
    /**
     * 删除表单分页
     *
     * @param {*} item
     * @memberof DesignTabs
     */
    removePage(item) { }
    /**
     * 新增表单分页
     *
     * @memberof DesignTabs
     */
    addPage() { }
    /**
     * 拖拽排序变更
     *
     * @param {*} evt
     * @memberof DesignTabs
     */
    change(evt) { }
    render(h) {
        var _a, _b, _c, _d, _e;
        return (<div class='form-design-tabs'>
                {!(((_b = (_a = this.ctx) === null || _a === void 0 ? void 0 : _a.ctrl) === null || _b === void 0 ? void 0 : _b.isViewDesign) && this.list.length == 1) ?
                <div class='tabs-bar'>
                        <draggable class='tabs-nav-wrap' group={this.options.group} list={this.list} on-change={(evt) => this.change(evt)}>
                            <transition-group type='transition' name='flip-list' class='transition-group'>
                                {(_c = this.list) === null || _c === void 0 ? void 0 : _c.map((item) => {
                        var _a, _b;
                        return (<div key={item.srfkey} class={{ 'tabs-tab': true, active: Object.is(this.activeTab, item.srfkey) }} on-click={(e) => this.activeTabAction(e, item)}>
                                            <div class='caption'>{item.text}</div>
                                            {!((_b = (_a = this.ctx) === null || _a === void 0 ? void 0 : _a.ctrl) === null || _b === void 0 ? void 0 : _b.isViewDesign) ?
                                <div class='delete' on-click={(event) => event.stopPropagation()}>
                                                    <a-popconfirm title='确认删除表单分页?子数据将一并删除!' placement='left' on-confirm={() => {
                                        this.removePage(item);
                                    }} okText='确认' cancelText='取消'>
                                                        <i class='ivu-icon ivu-icon-md-close'/>
                                                    </a-popconfirm>
                                                </div> : null}
                                        </div>);
                    })}
                            </transition-group>
                        </draggable>
                        {!((_e = (_d = this.ctx) === null || _d === void 0 ? void 0 : _d.ctrl) === null || _e === void 0 ? void 0 : _e.isViewDesign) ?
                        <div class='tabs-add'>
                                <a-button title='新建分页' icon='plus' on-click={(e) => {
                                e.stopPropagation();
                                this.addPage();
                            }}/>
                            </div> : null}
                    </div> : null}
                <div class='tabs-content'>
                    {this.renderTabItemContent && this.list
                ? this.list.map((item, i) => {
                    return (<div class='tabs-content-item' v-show={this.activeTab === item.srfkey}>
                                      {this.renderTabItemContent(h, item, i)}
                                  </div>);
                })
                : null}
                </div>
            </div>);
    }
};
__decorate([
    Prop({
        default: 'DEFAULT',
    })
], DesignTabs.prototype, "name", void 0);
__decorate([
    Prop({
        default: () => {
            return [];
        },
    })
], DesignTabs.prototype, "list", void 0);
__decorate([
    Watch('list', { deep: true, immediate: true })
], DesignTabs.prototype, "watchList", null);
__decorate([
    Prop({
        default: () => {
            return {};
        },
    })
], DesignTabs.prototype, "activeItem", void 0);
__decorate([
    Prop()
], DesignTabs.prototype, "ctx", void 0);
__decorate([
    Watch('activeItem', { deep: true, immediate: true })
], DesignTabs.prototype, "watchActiveItem", null);
__decorate([
    Emit('active-item-change')
], DesignTabs.prototype, "activeItemChange", null);
__decorate([
    Emit('remove-page')
], DesignTabs.prototype, "removePage", null);
__decorate([
    Emit('add-page')
], DesignTabs.prototype, "addPage", null);
__decorate([
    Emit('change')
], DesignTabs.prototype, "change", null);
__decorate([
    Prop()
], DesignTabs.prototype, "renderTabItemContent", void 0);
DesignTabs = __decorate([
    Component({})
], DesignTabs);
export { DesignTabs };