import React from 'react';
require('./index.css')
const headerStatus = CONFIG.headerStatus;
export default class HeaderComponent extends React.Component{
    constructor(props){
        super(props);
        this.getHomeHeader = this.getHomeHeader.bind(this);
        this.getOtherHeader = this.getOtherHeader.bind(this);
        this.state = {
            showHeader : headerStatus[1]
        }
    }

    componentWillReceiveProps(nextProps){
    }

    getHeader(){
        let pages = null;
        let {showHeader} = this.props;
        switch (showHeader){
            case headerStatus[1]:
                pages = this.getHomeHeader();
                break;
            case headerStatus[2]:
                pages = this.props.children;
                break;

        }
        return pages;
    }

    getHomeHeader(){
        let {storeInfo,userinfo} = this.props;
        return (
            <div className={"homeHeader clearfix"}>
                {
                    storeInfo ? <div className={"headerContent leftContent fl"}>
                        <div className={"headerlogo"}>
                            <img className={"logoImg"} src={UTILPATH.localImg.headlogo} alt=""/>
                        </div>
                        <div className={"locationInfo"}>
                            <img className={"addIcon"} src={UTILPATH.localImg.addIcon} alt=""/>
                            <div className={"local colfff"}>
                                <p className={"font30"}>{storeInfo.name}</p>
                                <p className={"font24"}>ID : 001</p>
                            </div>
                        </div>
                    </div> : null
                }

                {
                    userinfo ?  <div className={"headerContent rightContent fr " + (userinfo.id ? '' : 'hide')}>
                        <img className={"userheadImg"} src={ userinfo.headImageUrl || UTILPATH.localImg.defaultImg} alt=""/>
                        <div className={"userinfo font24 colfff"}>
                            <p>{userinfo.employeeName || ''}</p>
                            <p>ID:{userinfo.id || 0}</p>
                        </div>
                    </div> : null
                }
            </div>

        )
    }

    getOtherHeader(){
        let {headerIconList} = this.props;
        return <div className={"otherHeader font32 clearfix"}>

            {
                headerIconList ? headerIconList.map((info,index)=>{
                    let dom = null;
                    if(index === 0){
                        dom = (
                            <div className={"fl colfff"} onClick={()=>info.option()}>
                                <i className={"iconfont middle icon font58 icon-circle-left circleIcon"}></i>
                                <span className={"middle"}>{info.text || ''}</span>
                            </div>
                        )
                    }else if(index ===1){
                        dom = (
                            <div className={"fr "+(info.active ? 'colff7860':'col999')} onClick={()=>info.option()}>
                                <i className={"iconfont middle icon font60 icon-save saveIcon"}></i>
                                <span className={"middle"}>{info.text || ''}</span>
                            </div>
                        )
                    }
                    return dom;
                }) : null
            }



        </div>
    }




    render(){
        let pages = this.getHeader.bind(this)();
        return <div className={"headerComponent"}>
            {pages}
        </div>
    }
}