import React from 'react'
import {
    toJS
} from 'mobx'
import {
    inject,
    observer,
} from 'mobx-react'
import {
    WeaTop,
    WeaAlertPage,
    WeaBrowser,
    WeaLocaleProvider
} 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';
import { renderNoright } from '../../util';

const getLabel = WeaLocaleProvider.getLabel;


@inject("newImport")
@observer
export default class newImport extends React.Component {
    constructor(props) {
        super(props);

    }

    componentDidMount() {
        const {newImport} = this.props;
        newImport.getHasRight();
    }


    componentWillMount() {
        
    }


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

        let arr = [];
        const cardConfig = [
            {
              "subTitle": getLabel(547211,'分部设置'),
              "bgColor": "#92B75B",
              "icon": "icon-coms-Department-number",
              "title": getLabel(547332,'分部'),
              "linkName": getLabel(547207,'分部导入'),
              "url": "/spa/organization/static/index.html#/main/organization/company"
            },
            {
              "subTitle": getLabel(547212,'部门设置'),
              "bgColor": "#92B75B",
              "icon": "icon-coms-Department-number",
              "title": getLabel(547331,'部门'),
              "linkName": getLabel(547208,'部门导入'),
              "url": "/spa/organization/static/index.html#/main/organization/department"
            },
            // {
            //   "subTitle": "岗位设置",
            //   "bgColor": "#49B2FE",
            //   "icon": "icon-coms-hrm",
            //   "title": "岗位",
            //   "linkName": "岗位体系导入",
            //   "url": "/spa/organization/static/index.html#/main/organization/job"
            // },
            {
              "subTitle": getLabel(547213,'组织维护'),
              "bgColor": "#51A39A",
              "icon": "icon-coms-crm",
              "title": getLabel(547205,'人员'),
              "linkName": getLabel(547209,'人员导入'),
              "url": "/spa/organization/static/index.html#/main/organization/resource"
            },
            {
              "subTitle": getLabel(547214,'等级设置'),
              "bgColor": "rgb(230, 168, 69)",
              "icon": "icon-portal-kpi-o",
              "title": getLabel(547210,'职等职级导入'),
              "linkName": getLabel(547206,'职等职级'),
              "url": "/spa/organization/static/index.html#/main/organization/rankscheme"
            },
          ]

        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 2:
                newImport.importType = 'resource';
                break;
            case 3:
                newImport.importType = 'joblevel';
                break;
        }
        newImport.buttonTitle = i18n.button.nextStep();
        newImport.current = 0;
        newImport.visible = true;
        newImport.getImportField();


    }


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

        if (hasRight === false) {
            return renderNoright();
        }

        return (
            hasRight && <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@sp0zb8`}
                title={i18n.label.dataImport()}
                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>
        )
    }

}