import React from 'react';
import PropTypes from 'prop-types'
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.handleShowClassify = this.handleShowClassify.bind(this);
        this.state = {
            showHeader : headerStatus[1],
            showClassify : false
        }
    }

    componentWillReceiveProps(nextProps){

    }

    handleShowClassify(){
        // this.setState({
        //     showClassify : !this.state.showClassify
        // })
        // this.props.showLogoutPopup();
        this.context.toggleOrders()
    }

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

        }
        return pages;
    }

    getHomeHeader(){
        let headerInfo = this.props.headerInfo;
        let {storeInfo,userInfo,taskInfo} = headerInfo;
        let style = {}
        if(taskInfo && taskInfo.currentTaskNum && taskInfo.totalTaskNum){
            style = {
                'width' : (parseInt(taskInfo.currentTaskNum) / parseInt(taskInfo.totalTaskNum) * 100) + '%'
            }
        }


        return (
            <div className={"homeHeader clearfix"}>
                {
                    <div className={"headerContent leftContent fl"}>
                        <div className={"headerlogo"}>
                            <img className={"logoImg"} src={UTILPATH.localImg.headlogo} alt=""/>
                        </div>
                        {
                            taskInfo && taskInfo.currentTaskNum && taskInfo.totalTaskNum ?
                                <div className={"taskProgress"}>
                                    <div className={"currentTask"} style={style}></div>
                                    <div className={"progressText col333 font26"}>任务进度 {taskInfo.currentTaskNum}/{taskInfo.totalTaskNum}</div>
                                </div> : null
                        }

                    </div>
                }
                <div className={"headerContent rightContent fr "}>
                    {
                        storeInfo && storeInfo.id ? <div className={"locationInfo"}>
                            <i className={"iconfont icon-address colfff font70"}></i>
                            <div className={"local colfff"}>
                                <p className={"font30"}>{storeInfo.name}</p>
                                <p className={"font24"}>ID : {storeInfo.id}</p>
                            </div>
                        </div> :null
                    }
                    {

                        userInfo  && userInfo.id ?  <div className={"userinfos"}>
                            <img className={"userheadImg"} src={ userInfo.headImageUrl || UTILPATH.localImg.defaultImg} alt=""/>
                            <div className={"userinfo font30 colfff"}>
                                <p>{userInfo.employeeName || ''}</p>
                                <p>ID:{userInfo.id || 0}</p>
                            </div>
                        </div> : null
                    }
                    <div className={"line"} />
                    <div className={"classify icon iconfont icon-menu colfff font70"} onClick={()=>this.handleShowClassify()}/>
                </div>
            </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 font50 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 font50 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>
    }
}

HeaderComponent.contextTypes = {
    toggleOrders: PropTypes.func
};