import React,{Component} from 'react'
import {Tabs,Button,BackTop,Row,Col} from 'antd'
import {
	Page, Validator, Notification, FormItem,
	InputItem, Input, Bind, SelectItem, Label, DatePickerItem, Section, ConfirmButton, Steps
} from '@/components/Common-Library'
const TabPane = Tabs.TabPane;


function PageItem(props)
{
    return <div>
        {
            React.Children.map(props.children,child=>React.cloneElement(child, {
                ...props
                }))
        }
    </div>
}

function Next(props)
{
    return <Button {...props} />
}

function Pre(props)
{
    return <Button {...props} />
}

function Wrapper(props)
{
    return <div style={{textAlign:'center'}}>
        {
            props.children
        }
    </div>
}

export default class Pager extends Component{

    static Item = PageItem
    static Next = Next
    static Pre = Pre
    static StepWrapper = Wrapper
    steps=[]

    state={index:0,activeKey:null}
    
    collectSteps()
    {
        this.steps=[]
        this.stepsKeys = []
        return React.Children.map(this.props.children,(child,i)=>{
            if(child && child.props.title)
            {
                let title = child.props.title
				let childins=child.props.children
			    /*Validator.validate(childins.props.model, childins.props.model.descriptor, (errors, values) => {
					if (errors) {
						console.log(1112)
				        this.steps.go()
				        return
			          }
			    })		
                */				
                this.steps.push(title)
                let index = this.steps.length - 1
                return <TabPane tab={child.props.icon||child.props.title}  key={title} forceRender={true} >
                    {
                    React.cloneElement(child, {
                        steps: this,
                        getInstance:ref=>this.getInstance(ref,title,index)
                        })
                    }
                </TabPane> 

            }
        })
    }

    getInstance=(ref,key,index)=>{
        let title = key
        this[`#${title}#`]=ref
        if(index==0)
        {
            return;
        }
        // this.triggerEvent(key)   //注释此句 防止在页面加载的过程中调用页签的onTabFocus事件
        // 将triggerEvent事件单独写一遍到这里，去除调用onTabBlur这部分------消除检核bug
        let idx = key.lastIndexOf('/')
        if(idx > 0)
            key = key.substring(0,idx)
        let comp = this[`#${key}#`]
        this._lastComp && (this._lastComp.formBlur = true)
        this._lastComp = comp
    }

    _go=(key)=>{
        
        // React.children.forEach(this.tabs,child=>{
        //     if(child.props.key && child.props.key.indexOf(key)==0 )
        //     {
        //         this.setState({activeKey:child.props.key})
        //     }
        // })
        this.tabs.props.children && this.tabs.props.children.forEach && this.tabs.props.children.forEach(child=>{
            if(child.key && child.key.indexOf(key)==0 )
            {
                this.setState({activeKey:child.key})
            }
        })
    }

     //传递标题即可
    go=(key)=>{
        this._go(key)
        let {activeKey} = this.state //得到最新tabpane key
        this.triggerEvent(activeKey)
    }
    triggerEvent=(key)=>{
        let idx = key.lastIndexOf('/')
        if(idx > 0)
            key = key.substring(0,idx)
        let comp = this[`#${key}#`]
        if(comp && comp.props    
            && comp.props.model && !window.DISPLAY_MODE)  //正常模式触发Tab事件，快照模式不触发Tab切换事件
        {
            comp && comp.onTabFocus && comp.onTabFocus()
            this._lastComp && this._lastComp.onTabBlur && this._lastComp.onTabBlur() 
        }
        this._lastComp && (this._lastComp.formBlur = true)
        this._lastComp = comp
    }

    pre()
    {
        return <Button  onClick={()=>this.go(-1)}>
            上一步
        </Button>
    }

    next()
    {
        return <Button onClick={()=>this.go(1)}>
            下一步
        </Button>
    }

    getFirstErrorKey(errors)
    {
        if(!errors)
            return 
        
        for(let key of this.steps)
        {
            let item = this[`#${key}#`]
            if(!item)
                continue
            for(let err of errors)
            {
                const {field} = err
                if(!field)
                    continue;
                if(item.bindSet && item.bindSet.has(field))
                {
                    item.formBlur = true
                    
                    return key
                }
            }
        }
    }

    findFirstItem(errors){
        let key = this.getFirstErrorKey(errors)
        if(key)
            this._go(key)
    }

    onTabClick=activeKey=>{
        this.triggerEvent(activeKey)
        this.setState({activeKey})
        
    }
    onTabRef=(ref)=>{
        this.tabs=ref
        if(!ref)
            return
        // React.children.map(this.tabs.props.children,child=>{
        //     console.log(child.props.key)
        // })
        this.tabs.props.children && this.tabs.props.children.forEach && this.tabs.props.children.forEach(child=>{
            console.log(child.key)
        })
    }
    render(){
        let items = this.collectSteps()

        let activeKey = this.steps[0]+'/.0'
        return ( 
        <React.Fragment>
            <Row>
                <Col span={24}>
                    <Tabs ref={this.onTabRef} type='card' size="small" onChange={this.onTabClick} activeKey={this.state.activeKey||activeKey}>
                        {items}
                    </Tabs>
                </Col>
            </Row>
            <BackTop />
        </React.Fragment>
        )
    }
}
