import {
    Component,
    OnInit,
    Directive,
    TemplateRef,
    ContentChild,
    Input,
    HostBinding,
    Output,
    EventEmitter,
    Optional
} from '@angular/core';

import { PageService } from '../service/page.service';
import { WizardService } from '../service/wizard.service';
import { WizardEventType } from '../model/wizard.model';
@Directive({
    selector: '[wizardPageHeader]'
})
export class wizardPageHeaderTemplateDirective {
    constructor(public template: TemplateRef<any>) {}
}

@Directive({
    selector: '[wizardPageContent]'
})
export class wizardPageContentTemplateDirective {
    constructor(public template: TemplateRef<any>) {}
}
@Directive({
    selector: '[wizardPageFooter]'
})
export class wizardPageFooterTemplateDirective {
    constructor(public template: TemplateRef<any>) {}
}

@Component({
    selector: 'wizard-page-detail',
    templateUrl: './page-detail.component.html',
    styleUrls: ['./page-detail.component.scss']
})
export class FarrisPageDetailComponent implements OnInit {
    @HostBinding('class.f-component-wizard-page-detail') cls = true;
    @HostBinding('class.f-component-wizard-page-detail-fill') get fill(){return this.wizardSer.getPageFill()};
    private pageId = '';

    @ContentChild(wizardPageHeaderTemplateDirective, { read: TemplateRef })
    pageHeaderTemplate: TemplateRef<any>;
    @ContentChild(wizardPageContentTemplateDirective, { read: TemplateRef })
    pageContentTemplate: TemplateRef<any>;
    @ContentChild(wizardPageFooterTemplateDirective, { read: TemplateRef })
    pageFooterTemplate: TemplateRef<any>;

    @Output() pagedetailSelected: EventEmitter<any> = new EventEmitter();

    constructor(
        private wizardSer: WizardService,
        @Optional() private pageSer: PageService
    ) {
        if (!this.pageSer) {
            this.pageSer = new PageService();
        }
        this.pageSer.activeState.subscribe(data => {
            //console.log('FarrisPageDetailComponent——' + this.pageId+'——'+data);
            if(data.state){
                this.pagedetailSelected.emit(data);
            }
            
        });

        
    }

    ngOnInit() {
        this.pageId = this.pageSer.getPageId();
    }

    getPageId(): string {
        return this.pageId;
    }

    getPrevPageId(): string {
        return this.wizardSer.getPrePageId(this.pageId);
    }

    getWizardData(){
        return this.wizardSer.getWizardData();
    }

    /**
     * 获取某页数据
     */
    getPageData(pageid = this.pageId): any {
        return this.wizardSer.getPageData(pageid);
    }
    /**
     * 更新某页数据
     * @param data
     */
    setPageData(data: any, pageid = this.pageId) {
        this.wizardSer.setPageData(data, pageid);
    }
    /**
     * 下一步
     */
    nextStep() {
        this.wizardSer.updateWizardState(WizardEventType.Next, this.pageId);
    }
    /**
     * 上一步
     */
    prevStep() {
        this.wizardSer.updateWizardState(WizardEventType.Prev, this.pageId);
    }
    /**
     * 结束向导
     */
    finishWizard() {
        this.wizardSer.updateWizardState(WizardEventType.Finish, this.pageId);
    }
    /**
     * 取消向导
     */
    cancelWizard() {
        this.wizardSer.updateWizardState(WizardEventType.Cancel, this.pageId);
    }
}