import React from 'react';
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
import PopModel from '../../components/CommonComponent/PopupComponent/PopupChildComponent'
import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
import {sendMsg} from '../../util/socket'
require('./index.css');

export default class ChooseTaskContainer extends React.Component{
    constructor(props){
        super(props);
        this.state = {
        };
        this.closeDoor = this.closeDoor.bind(this);
        this.logout = this.logout.bind(this)
        this.showLogoutPopup = this.showLogoutPopup.bind(this)
    }

    componentWillMount(){

    }

    componentWillReceiveProps(nextProps){

    }

    logout(){
        // this.props.willCloseDoor();
        // let msg={type:'WILL_CLOSEDOOR'}
        // sendMsg(JSON.stringify(msg))
        // this.props.changeIsSend(true)

    }

    showLogoutPopup(){
        let {showPopup,hidePopup} = this.props;
        let btnDom2 = <Button btnContainer={"headerLogoutBtn btne5 font32"} key={"headerLogoutBtn2"} text={"取消"} option={hidePopup}/>
        let popDom =
            <PopModel popupTitle={"是否退出登录"} classContainer={"headerLogout"}>
                <div className={"icon iconfont icon-exclamation font150 colf5a623"} />
                <div className={"text font40 col000"} style={{lineHeight:'1.6'}}>
                    <p>请重新打开应用</p>
                </div>
                <div className={"btn"}>
                    {btnDom2}
                </div>
            </PopModel>;
        showPopup({popupChild:popDom});
    }

    closeDoor(){
        this.props.hidePopup();
        this.props.showOpenDoorPage()
    }


    render(){
        let props = this.props;
        let {headerInfo} = props;
        return(
            <div>
                <HeaderComponent
                    showHeader={CONFIG.headerStatus[1]}
                    headerInfo={headerInfo}
                    showLogoutPopup={this.showLogoutPopup}
                />
                <div className={"chooseTaskContainer"}>
                    <div className={"chooseTaskText font32"}>
                        <p>请选择一个有权限的任务！</p>
                    </div>
                    <div className={"chooseTaskButtons"}>
                        <Button text={"处理已知故障"} style={{'marginTop':UTILPATH.getRemByPx(40)}}/>
                        <Button text={"申报新故障"} style={{'marginTop':UTILPATH.getRemByPx(20)}}/>
                        <Button text={"设备检查"} style={{'marginTop':UTILPATH.getRemByPx(20)}}/>
                        <Button text={"设备测试"} style={{'marginTop':UTILPATH.getRemByPx(20)}}/>
                        <Button text={"确认退出，并离店"} style={{'marginTop':UTILPATH.getRemByPx(87)}} option={this.showLogoutPopup}/>
                    </div>
                </div>
            </div>

        )
    }
}

ChooseTaskContainer.propTypes = {
};

ChooseTaskContainer.defaultProps = {
}