import React from 'react';
import {
	inject,
	observer
} from 'mobx-react';
import {
	CenterSpin
} from '../../public/valhalla/components/index.js';
import {
	WeaLocaleProvider,
	WeaTop,
	WeaTextarea,
	WeaRightMenu,
} from 'ecCom';
import {Button} from 'antd';
import Detail from './Detail.js';
import AlertPage from '../../public/components/AlertPage.js';
import VerifyResourceID from '../financeExpand/VerifyResourceID.js';
import {Dialog} from '../../public/valhalla/components/index.js';
import {addContentPath} from '../../util/index.js'
import '../../style/payrollDetail.less';
const getLabel = WeaLocaleProvider.getLabel;

@inject('hrmPayrollDetailStore')
@observer
export default class PayrollDetail extends React.Component {
	componentWillMount() {
		this.props.hrmPayrollDetailStore.setTargetId(this.props.params);
	}

	componentDidMount() {
		this.showDialog();
	}

	showDialog = () => {
		const {
			hrmPayrollDetailStore
		} = this.props, {
			financeExpand,
			init
		} = hrmPayrollDetailStore;

		if (window.doCheckSecondaryVerify4ec) {
		    window.doCheckSecondaryVerify4ec && window.doCheckSecondaryVerify4ec({mouldCode: 'HRM', itemCode: 'SALARY'}, res => {
		        if (res.status == "1") {
		            init();
		            financeExpand.isNeedSecondPwdVerify = false;
		        }
		        financeExpand.loading = false;
		    })
		}else{
			financeExpand.fetchSecondPwdVerifyInfo().then(isNeedSecondPwdVerify => {
				if (isNeedSecondPwdVerify) {
					financeExpand.openDialog();	
				}else{
					init();
				}
			});
		}


	}

getButtons = () => {
    const { hrmPayrollDetailStore: { confirm, confirmdata, remark, remarkdata, loading, confirmRecord, feedback } } = this.props;
    let btns = [],
        menus = [];
    if (confirm == '1' && !confirmdata) {
        const label = getLabel('826','确定')
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@02yt2x@${'confirm'}`} type="primary" disabled={loading} onClick={confirmRecord}>{label}</Button>)
        menus.push({
            key: "1",
            disabled: loading,
            icon: <i className="icon-coms-menu-Receive" />,
            content: label,
            onClick: confirmRecord
        })
    }
    if (remark == '1' && !remarkdata) {
        const label = getLabel('524278','反馈信息')
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@k6cckm@${'feedback'}`} type="primary" disabled={loading} onClick={feedback}>{label}</Button>)
        menus.push({
            key: "2",
            disabled: loading,
            icon: <i className="icon-coms-Need-feedback" />,
            content: label,
            onClick: feedback
        })
    }

    return {
        buttons: btns,
        dropMenuDatas: menus
    }
}

	render() {
		const {
			hrmPayrollDetailStore
		} = this.props, {
			loading,
			imgId,
			data,
			displayType,
			financeExpand,
			defaultImg,
			title,
			hasPayrollDetail,
			notAuth,
			fbDialogStore,
			handleTextareaChange,
		} = hrmPayrollDetailStore, {
			isNeedSecondPwdVerify,
			dialogStore,
		} = financeExpand, {
			visible
		} = dialogStore;

		if(notAuth){
			return (
				<div className='salary-pre'>
					<AlertPage ecId={`${this && this.props && this.props.ecId || ''}_AlertPage@g0z23c`} loading={false}/>
		        </div>
			)
		}

		if (isNeedSecondPwdVerify) {
			return (
				<div className='salary-pre'>
					<AlertPage ecId={`${this && this.props && this.props.ecId || ''}_AlertPage@okj0nx`} loading={financeExpand.loading}/>
		           {
		             visible && <VerifyResourceID ecId={`${this && this.props && this.props.ecId || ''}_VerifyResourceID@22ysy0`} store={financeExpand} />
		           }
		        </div>
			)
		}

		const {buttons,dropMenuDatas} = this.getButtons();

		return (
			<CenterSpin ecId={`${this && this.props && this.props.ecId || ''}_CenterSpin@zb3o9z`} loading={loading}>
				<div className='hrm-payroll'>
					<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@np230f`} 
						iconBgcolor= '#217346'
						icon= {<i className='icon-coms-hrm'/>}
						title={title}
						buttons={buttons}
						showDropIcon
						dropMenuDatas={dropMenuDatas}
					>
						<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@wqybsk`} datas={dropMenuDatas} >
							{
								hasPayrollDetail ? (
									<div className='payroll-detail'>
										{ ( imgId ||  defaultImg) && (
											<img src={addContentPath(imgId ? `/weaver/weaver.file.FileDownload?fileid=${imgId}` : defaultImg)}/>
										) }
										<Detail ecId={`${this && this.props && this.props.ecId || ''}_Detail@1le7yr`} store={hrmPayrollDetailStore}/>
									</div>
								) : (
									<div className="none-detail">
										<i className="icon-coms-NoData"/>
										<span>{getLabel(83553,"暂无数据")}</span>
									</div>
								)
							}
						</WeaRightMenu>
					</WeaTop>
					<Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@cl0w7a`} store={fbDialogStore}>
						<WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@5ngyys`} style={{padding: 20}} minRows={6} onChange={handleTextareaChange}/>
					</Dialog>
				</div>
			</CenterSpin>
		);
	}
}