import { Component, OnInit, ViewChild } from '@angular/core';
import { WizardService, WizardComponent } from '@farris/ui-wizard';
import { Propertiy } from 'src/app/interface/propertiy-interface';
import { Others } from 'src/app/interface/ohters-interface';

@Component({
    selector: 'app-wizard-demo',
    templateUrl: './wizard-demo.component.html',
    styleUrls: ['./wizard-demo.component.scss']
})
export class WizardDemoComponent implements OnInit {

    properties: Array<Propertiy> = [
        {
            name: 'progressData',
            value: '{activeIndex:number,stepMessages:[{id:string,title:string,icon?string,hidden?boolean}]}',
            type: '@Input()',
            description: '步骤条数据'
        },
        {
            name: 'stepDirection',
            value: 'horizontal || vertical',
            type: '@Input()',
            description: '步骤条排列方式'
        },
        {
            name: 'fill',
            value: 'true || false',
            type: '@Input()',
            description: '是否撑满父节点'
        },
        {
            name: 'stepClickable',
            value: 'false || true',
            type: '@Input()',
            description: '步骤条是否支持点击'
        },
        {
            name: 'currentPageId',
            value: 'string',
            type: '@Input()',
            description: '默认显示的page页面'
        },
        {
            name: 'stepPosition',
            value: 'None || PageLeft || Top || HeaderRight',
            type: '@Input()',
            description: '步骤条摆放位置'
        },
        {
            name: 'storedIndex',
            value: 'false | true',
            type: '@Input()',
            description: '是否记录当前向导步骤'
        },
        {
            name: 'storedIndexState',
            value: 'false | true',
            type: '@Input()',
            description: '是否记录当前向导步骤及状态'
        },
        {
            name: 'stateChange',
            value: ``,
            type: '@Output()',
            description: `页面状态变化时触发事件 {state:'', fromPageId:'', toPageId:''}，其中state分别对应0：Finish:1：Cancel:2：Prev:3：Next:4：StepChange`
        }
    ];
    others: Array<Others> = [
        {
            name: '<ng-template wizardPageHeader>',
            description: '头部区域'
        },
        {
            name: '<ng-template wizardPageContent>',
            description: '内容区域'
        },
        {
            name: '<ng-template wizardPageFooter>',
            description: '底部区域'
        }
    ];
    detailMethods: Array<Others> = [
        {
            name: 'getPageData',
            description: '根据pageid获得页面数据，传递pageid'
        },
        {
            name: 'setPageData',
            description: '保存当前页面数据'
        },
        {
            name: 'nextStep',
            description: '下一步'
        },
        {
            name: 'prevStep',
            description: '上一步'
        },
        {
            name: 'finishWizard',
            description: '结束向导'
        },
        {
            name: 'cancelWizard',
            description: '取消向导'
        }
    ];
    serviceMethods: Array<Others> = [
        {
            name: 'getWizardData',
            description: '获取整个向导通用的数据'
        },
        {
            name: 'setWizardData',
            description: '设置整个向导通用的数据'
        },
        // {
        //     name: 'getWizardState',
        //     description: '获取向导状态变化'
        // },
        // {
        //     name: 'updateProgressData',
        //     description: '更新某步骤条数据'
        // },
        // {
        //     name:'getProgressData',
        //     description:'获取步骤条数据'
        // }
    ];

    codePath = {
        all: 'assets/codes/wizard/all',
        baseDemo: 'assets/codes/wizard/basedemo'
    };

    progressData = {
        activeIndex: -1,
        stepMessages: [
            {
                id: 'selectgood',
                title: '结算方式定义',
                icon: ''
            },
            {
                id: 'deliverytime',
                title: '开始结转',
                icon: '',
                subSteps:[
                    {
                      "id":"subdata1",
                      "title":"商务立项",
                      "description":"正在审批"
                    },
                    {
                      "id":"subdata2",
                      "title":"商务立项2",
                      "description":"正在审批"
                    },
                    {
                      "id":"subdata3",
                      "title":"商务立项3",
                      "description":"正在审批"
                    }
                ]
            },
            {
                id: 'shipmentamount',
                title: '平衡检查',
                icon: ''
            }
        ]
    };
    currentSubIndex = 1;
    subStepData = {
        'deliverytime':this.currentSubIndex
    }

    stepValue: string = 'selectgood';
    selectUnitValue = '';

    private wizardPage: WizardComponent = null;
    @ViewChild(WizardComponent) set cmpPageWizard(
        cmp: WizardComponent
    ) {
        this.wizardPage = cmp;
    }

    constructor(private wizardSer: WizardService) { }

    ngOnInit() {
        if (this.progressData.activeIndex >= 0) {
            this.stepValue = this.progressData.stepMessages[
                this.progressData.activeIndex
            ]['id'];
        }
        // 设置向导数据，供子取数
        this.wizardSer.setWizardData({ selectUnitValue: this.selectUnitValue });
        // this.wizardPage.setWizardData({ selectUnitValue: this.selectUnitValue });
    }

    onSelect(event) {
        // console.log('PageSelected事件');
        //console.log(event);

    }

    change() {
        //------------------------------------向导相关，处理向导数据
        this.progressData = Object.assign({}, this.progressData, {
            activeIndex: this.selectUnitValue ? 0 : -1
        });
        // this.wizardSer.setWizardData({ selectUnitValue: this.selectUnitValue });
        this.wizardPage.setWizardData({ selectUnitValue: this.selectUnitValue })
    }

    stateChange(event) {
        // console.log('状态变化');
        // console.log(event);
    }

    next() {
        this.wizardSer.nextStep();
    }
    prev() {
        this.wizardSer.prevStep();
    }
    finish() {
        this.wizardSer.finishWizard();
    }
    cancel() {
        this.wizardSer.cancelWizard();
    }

    getPrevId() {
        let previd = this.wizardSer.getPrePageId();
        console.log('上一页pageid:' + previd);
        let data = this.wizardSer.getPageData(previd);
        console.log(data);
    }

    setpagedata() {
        this.wizardSer.setPageData({
            name: '姓名数据'
        })
    }

    getCurrentPageId() {
        this.wizardSer.getCurrentPageId();
    }

    changeStep(){
        // console.log('当前展示：'+this.wizardSer.getCurrentPageId());
        this.wizardSer.setActiveIndex(2);
        // console.log('修改之后展示：'+this.wizardSer.getCurrentPageId());
    }

    changesubstep(){
        this.currentSubIndex = 0;
        console.log(this.currentSubIndex);
        console.log(this.subStepData);
    }
}