import React from 'react'
import {
    toJS
} from 'mobx'
import {
    inject,
    observer,
} from 'mobx-react'
import {
    WeaTop,
    WeaAlertPage,
} from 'ecCom'
import {
    Spin,
} from 'antd';
import {
    i18n
} from '../../public/i18n';
import ImportResource from '../importresource/Import';
//import Import from '../importRelatedComponet/index'
import {addContentPath} from '../../util/index.js'
import '../../style/import.css'

@inject('hrmBasicDataImport')
@inject('hrmImportResource')
@inject('hrmImportCommon')
@observer
export default class BasicInfoImport extends React.Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        let bool = window.location.href.indexOf('/spa/hrm/engine.html') > -1;
        if (bool) {
            document.title = i18n.module.basicInfoImport();
        }
    }

    componentDidMount() {
        const {
            hrmBasicDataImport
        } = this.props, {
            getRight
        } = hrmBasicDataImport;

        getRight();
    }

    getImportCard = () => {
        const {
            hrmBasicDataImport
        } = this.props, {
            isMouseOver,
            curIndex,
            cardConfig,
            setMouseStatus,
        } = hrmBasicDataImport;

        let arr = [];

        cardConfig.map((c, index) => {
            arr.push(<div className='hrm-card-out' style={(index == 0 || index == 4) ? {marginLeft:0} : {}} onMouseEnter={() => setMouseStatus(index, true)} onMouseLeave={() => setMouseStatus(index, false)}>
                            <div className='hrm-card-inwrap' style={curIndex==index&&isMouseOver?{backgroundColor:'#858585'}:{backgroundColor:c.bgColor}}>
                                    { curIndex == index && isMouseOver ? this.getLinkName(c.linkName,index) : this.getIcon(c.icon)}
                                    { curIndex == index && isMouseOver ? this.getSubTitle(c.subTitle,c.url) : this.getTitle(c.title)}
                            </div>
                     </div>)
        });
        return arr;
    }

    getIcon = (icon) => {
        return (<div className='hrm-card-icon'>
                    <i className={icon} />
                </div>)
    }

    getTitle = (title) => {
        return (<div className='hrm-card-title'>{title}</div>)
    }

    getLinkName = (linkName, index) => {
        return (<div style={{width:'100%',height:95}}>
                     <div style={{textAlign:'center',paddingTop:45}}>
                         <a onClick={()=>this.handleClick(index)} style={{color:'#fff',textDecoration: 'underline',fontSize:15}}>{linkName}</a>
                     </div>
                </div>)
    }

    getSubTitle = (subTitle, url) => {
        return (<div style={{height:35,textAlign:'right',paddingRight:10,backgroundColor:'#6A6A6A',color: '#fff',paddingTop:5}}><a href={addContentPath(url)} target='_blank' className='hrm-import-link'>{subTitle}</a></div>)
    }

    handleClick = (index) => {
        const {
            hrmImportResource,
            hrmImportCommon,
        } = this.props, {
            setTempletName,
            setImportDialogTitle,
            setImportType,
            setImportDialogVisible
        } = hrmImportCommon;

        switch (index) {
            case 0: //@lvyi
                hrmImportResource.visible = true;
                hrmImportResource.title = i18n.button.importOrg();
                hrmImportResource.importType = 'company';
                hrmImportResource.getImportForm();
                break;
            case 1:
                setTempletName(i18n.label.importTemplate());
                setImportDialogTitle(i18n.button.postSystemImport());
                setImportType('jobtitle');
                setImportDialogVisible(true);
                break;
            case 2: //@lvyi
                hrmImportResource.visible = true;
                hrmImportResource.title = i18n.button.importResource();
                hrmImportResource.importType = 'resource';
                hrmImportResource.getImportForm();
                break;
            case 3:
                setTempletName(i18n.label.importTemplate());
                setImportDialogTitle(i18n.button.groupInfoImport());
                setImportType('group');
                setImportDialogVisible(true);
                break;
            case 4:
                setTempletName(i18n.label.importTemplate());
                setImportDialogTitle(i18n.button.personalAndWorkInfoImport());
                setImportType('resourcedetial');
                setImportDialogVisible(true);
                break;
            case 5:
                setTempletName(i18n.label.importTemplate());
                setImportDialogTitle(i18n.button.areaInfoImport());
                setImportType('area');
                setImportDialogVisible(true);
                break;
            case 6:
                setTempletName(i18n.label.importTemplate());
                setImportDialogTitle(i18n.button.workingPlaceImport());
                setImportType('location');
                setImportDialogVisible(true);
                break;
            case 7:
                setTempletName(i18n.label.importTemplate());
                setImportDialogTitle(i18n.button.majorImport());
                setImportType('special');
                setImportDialogVisible(true);
                break;
        }

    }

    render() {
        const {
            hrmBasicDataImport,
            hrmImportResource,
            hrmImportCommon,
        } = this.props, {
            title,
            isMouseOver,
            loading,
            authorized,
        } = hrmBasicDataImport;

        if (!authorized) {
            return (
                <div style={{height: '100%'}}>
                    {loading ?  <div className='hrm-loading-center'>
                                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@976rc9`} spinning={loading} size='large'></Spin>
                                </div>
                             :  <div className="hrm-wea-alert-page">
                                    <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@0t0ln7`}>
                                        <div style={{ color: '#000' }}>
                                            {i18n.message.authFailed()}
                                        </div>
                                    </WeaAlertPage>
                                </div>
                    }   
                </div>
            )
        } else {
            return (
                <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@sp0zb8`} 
                    title={title}
                    icon={<i className='icon-coms-hrm'/>}
                    iconBgcolor='#217346'
                    loading={true}
                    showDropIcon={true}
                >
                    <div className='hrm-import-wrap'>{this.getImportCard()}</div>
                    {hrmImportResource.visible && <ImportResource ecId={`${this && this.props && this.props.ecId || ''}_ImportResource@633i8k`} />}
                    {/*其它导入暂时未实现 {hrmImportCommon.importDialog.visible && <Import ecId={`${this && this.props && this.props.ecId || ''}_Import@6c06u8`} />} */}
                </WeaTop>
            )
        }

    }
}