import React from 'react'
import {
    toJS
} from 'mobx'
import {
    inject,
    observer,
} from 'mobx-react'
import {
    WeaTop,
    WeaAlertPage,
    WeaBrowser
} from 'ecCom'
import {
    Spin,
} from 'antd';
import {
    i18n
} from '../../public/i18n';

import '../../style/import.css';
import { addContentPath } from '../../util/index.js';
import StepDialog from './stepDialog';


@inject("newImport")
@observer
export default class newImport extends React.Component {
    constructor(props) {
        super(props);
        this.state = ({
            title: '基础数据导入',

        })
    }

    componentWillMount() {

    }

    componentDidMount() {

    }


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

        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 {
            newImport
        } = this.props, {
        } = newImport;
        switch (index) {
            case 0:
                newImport.importType = 'company';
                break;
            case 1:
                newImport.importType = 'department';
                break;
            case 2:
                newImport.importType = 'jobtitle';
                break;
            case 3:
                newImport.importType = 'resource';
                break;
        }
        newImport.buttonTitle = i18n.button.nextStep();
        newImport.current = 0;
        newImport.visible = true;
        newImport.getImportField();


    }


    render() {
        const {
            newImport,
        } = this.props, {
            visible
        } = newImport, {
            title,
        } = this.state;

        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>
                {visible && <StepDialog ecId={`${this && this.props && this.props.ecId || ''}_StepDialog@633i8k`} />}
            </WeaTop>
        )
    }

}