import { CreateElement, VNode } from 'vue';
import { Vue, Component, Prop, Emit, Watch } from 'vue-property-decorator';
import { IDesignDefaultContext } from '../../interface';
import './design-tabs.less';

/**
 * 拖拽设计标签页
 *
 * @export
 * @class DesignTabs
 * @extends {Vue}
 */
@Component({})
export class DesignTabs extends Vue {
    /**
     * 组件唯一名称标识
     *
     * @type {string}
     * @memberof DesignTabs
     */
    @Prop({
        default: 'DEFAULT',
    })
    name!: string;

    /**
     * 数据
     *
     * @type {any[]}
     * @memberof DesignTabs
     */
    @Prop({
        default: () => {
            return [];
        },
    })
    list!: any[];
    @Watch('list', { deep: true, immediate: true })
    watchList() {
        if (this.list && this.list.length > 0) {
            const item = this.list.find((item: any) => item.srfkey === this.activeTab);
            if (!item) {
                this.activeTab = this.list[0].srfkey;
            }
        } else {
            this.activeTab = '';
        }
    }

    /**
     * 当前激活数据
     *
     * @type {*}
     * @memberof DesignTabs
     */
    @Prop({
        default: () => {
            return {};
        },
    })
    activeItem: any;

    /**
     * 上下文
     *
     * @type {*}
     * @memberof DesignTabs
     */
    @Prop()
    ctx!: IDesignDefaultContext;

    /**
     * 监控activeItem值变更
     *
     * @param {*} val
     * @param {*} oldVal
     * @memberof DesignTabs
     */
    @Watch('activeItem', { deep: true, immediate: true })
    watchActiveItem(val: any, oldVal: any): void {
        if (this.activeItem) {
            this.activeTab = this.activeItem.srfkey;
        }
    }

    /**
     * 当前激活标签页
     *
     * @type {string}
     * @memberof DesignTabs
     */
    activeTab: string = '';

    /**
     * 拖拽配置
     *
     * @type {*}
     * @memberof DesignTabs
     */
    options = {
        group: {
            name: 'form-design-' + this.name,
        },
    };

    /**
     * 激活项变更
     *
     * @param {*} item
     * @memberof DesignTabs
     */
    @Emit('active-item-change')
    activeItemChange(item: any): void {}

    /**
     * 激活标签页
     *
     * @param {*} item
     * @memberof DesignTabs
     */
    activeTabAction(e: MouseEvent, item: any): void {
        e.stopPropagation();
        this.activeTab = item.srfkey;
        this.activeItemChange(item);
    }

    /**
     * 删除表单分页
     *
     * @param {*} item
     * @memberof DesignTabs
     */
    @Emit('remove-page')
    removePage(item: any): void {}

    /**
     * 新增表单分页
     *
     * @memberof DesignTabs
     */
    @Emit('add-page')
    addPage(): void {}

    /**
     * 拖拽排序变更
     *
     * @param {*} evt
     * @memberof DesignTabs
     */
    @Emit('change')
    change(evt: any): void {}

    /**
     * 绘制分页项
     *
     * @memberof DesignTabs
     */
    @Prop()
    renderTabItemContent?: (_h: CreateElement, item: any, i: number) => VNode;

    render(h: CreateElement): any {
        return (
            <div class='form-design-tabs'>
                {
                    !((this.ctx?.ctrl as any)?.isViewDesign && this.list.length == 1) ?
                    <div class='tabs-bar'>
                        <draggable
                            class='tabs-nav-wrap'
                            group={this.options.group}
                            list={this.list}
                            on-change={(evt: any) => this.change(evt)}
                        >
                            <transition-group type='transition' name='flip-list' class='transition-group'>
                                {this.list?.map((item: any) => {
                                    return (
                                        <div
                                            key={item.srfkey}
                                            class={{ 'tabs-tab': true, active: Object.is(this.activeTab, item.srfkey) }}
                                            on-click={(e: MouseEvent) => this.activeTabAction(e, item)}
                                        >
                                            <div class='caption'>{item.text}</div>
                                            {
                                                !(this.ctx?.ctrl as any)?.isViewDesign ? 
                                                <div class='delete' on-click={(event: MouseEvent) => 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>
                        {
                            !(this.ctx?.ctrl as any)?.isViewDesign ? 
                            <div class='tabs-add'>
                                <a-button
                                    title='新建分页'
                                    icon='plus'
                                    on-click={(e: MouseEvent) => {
                                        e.stopPropagation();
                                        this.addPage();
                                    }}
                                />
                            </div> : null
                        }
                    </div> : null
                }
                <div class='tabs-content'>
                    {this.renderTabItemContent && this.list
                        ? this.list.map((item: any, i: number) => {
                              return (
                                  <div class='tabs-content-item' v-show={this.activeTab === item.srfkey}>
                                      {this.renderTabItemContent!(h, item, i)}
                                  </div>
                              );
                          })
                        : null}
                </div>
            </div>
        );
    }
}