import React from 'react';

import {inject, observer} from 'mobx-react';
import {
    WeaTop,
    WeaTab,
    WeaRightMenu,
    WeaErrorPage,
    WeaFormItem,
    WeaDialog,
    WeaSearchGroup,
    WeaSelect,
    WeaTree,
    WeaProgress,
    WeaAlertPage,
    WeaLocaleProvider,
    WeaNewScroll,
} from 'ecCom';
import {WeaTableNew} from 'comsMobx';
import {Row, Col, Icon, Button, Spin} from 'antd';
import * as mobx from 'mobx';
import '../style/total.less';
import {InfoGroup4Formal1} from '../coms/infoGroup4Formal';
import {i18n} from '../public/i18n';
import Tabs from "../coms/Tabs";
import findIndex from 'lodash/findIndex';

const toJS = mobx.toJS;
const getLabel = WeaLocaleProvider.getLabel;
const {
    WeaTable
} = WeaTableNew;

@inject('hrmCard')
@inject('hrmResourceTotal')
@observer
class HrmResourceTotal extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const {hrmResourceTotal, hrmCard} = this.props;
        const hrmId = this.props.params.hrmId || '';
        // hrmCard.setTopRightMenus(this.getRightMenu.bind(this));
        hrmResourceTotal.hrmId = hrmId;
        hrmResourceTotal.getHasRight();
    }

    renderCol = (cols) => {
        let idx = findIndex(cols, item => item.dataIndex === 'finish');
        idx != -1 && (cols[idx].render = (text, record) => {
            return <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@5wn8m7`} percent={record.finish === '' ? 0 : record.finish} strokeColor={record.finishspan}/>
        })
    }

    render() {
        const {hrmResourceTotal} = this.props;
        const {title, loading, verified, hasRight, dialogParams, tabConfig, getTabIndex, formTarget, refreshDialog} = hrmResourceTotal;
        let {condition} = hrmResourceTotal;
        const {query} = this.props.location;
        const {
            conditionForm: form,
            conditionFormFields: fields
        } = formTarget;
        const tabProps = {
            tabConfig: tabConfig,
            tabChangeHandle: tabConfig.tabChangeHandle,
            activeTabInfo: {
                activeTabKey: tabConfig.activeTabKey,
                activeTabIndex: getTabIndex(tabConfig.tabs, tabConfig.activeTabKey)
            },
            store: hrmResourceTotal,
            conditionForm: form,
            conditionFormFields: fields,
            tabBtnDef: tabConfig.buttons
        }
        const scrollProps = {
            scroll: {
                y: 480
            }
        }
        if (verified && hasRight) {
            return (
                <div className='wea-hrm-resource-total'>
                        <div style={query.fromcard ? {display: 'none'} : {display: ''}}>
                            <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@ggf0k1`}
                                title={title()}
                                loading={loading}
                                icon={<i className='icon-coms-hrm'/>}
                                iconBgcolor='#217346'
                                buttons={[]}
                                buttonSpace={10}
                                showDropIcon={false}
                            >
                            </WeaTop>
                        </div>
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@o6byzb`} gutter={24}>
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6l70i2`} span='12'>
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@w62xod`} className='wea-hrm-resource-total-info'>

                                    {
                                        condition && condition.map((c, index) => {
                                            if (index == 0) {
                                                const colArr = [];
                                                c.items && c.items.forEach((obj, index) => {
                                                    colArr.push(<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@narvjp@${index}`}>
                                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@yv1qa5@${index}`} className="wea-info-group-content-cell-label" span={6}>
                                                            {obj.label ? obj.label : <div>&nbsp;</div>}:
                                                        </Col>

                                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@bmkzgd@${index}`} className="wea-info-group-content-cell-value" span={12}>
                                                            {obj.value}
                                                        </Col>
                                                        { obj.codeName ?
                                                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@d7j3hn@${index}`} className="wea-info-group-content-cell-value" span={6}>
                                                                <a onClick={() => this.onSelectHandle(obj, index)}>{getLabel(17463, '明细')}</a>
                                                            </Col>
                                                        :
                                                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@o6drzp@${index}`} className="wea-info-group-content-cell-value" span={6}>
                                                            </Col>
                                                        }
                                                    </Row>)
                                                })
                                                return (
                                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4cz1mu@${index}`} span='24'>
                                                        {/* <InfoGroup4Formal1 className={'hrm-base-group-title'} items={c.items} title={c.title} showGroup={c.defaultshow}/> */}
                                                        <div className="wea-info-group">
                                                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@5gsodl@${index}`} className="wea-info-group-title">
                                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ltmlau@${index}`} span={24}>
                                                                    <div
                                                                        className='wea-info-group-title-info'>{c.title}</div>
                                                                </Col>
                                                            </Row>
                                                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@u3nmw9@${index}`} className="wea-info-group-content">
                                                                {colArr}
                                                            </Row>
                                                        </div>
                                                    </Col>
                                                )
                                            }
                                        })
                                    }
                                </Row>
                            </Col>
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@foytnm`} span='12'>
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@5w0etd`} className='wea-hrm-resource-total-info'>
                                    {
                                        condition && condition.map((c, index) => {
                                            if (index > 0) {
                                                return (
                                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@lde7ly@${index}`} span='24'>
                                                        <InfoGroup4Formal1 ecId={`${this && this.props && this.props.ecId || ''}_InfoGroup4Formal1@lsaen9@${index}`} className={'hrm-base-group-title'}
                                                                           items={c.items} title={c.title}
                                                                           showGroup={c.defaultshow}/>
                                                    </Col>
                                                )
                                            }
                                        })
                                    }
                                </Row>
                            </Col>
                        </Row>

                    <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@m9sxxn`} {...dialogParams} hasScroll={false}>
                        {
                            form != null && form.isFormInit &&

                            <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@9vbp8o`} {...tabProps}>
                                {
                                    dialogParams.cType === 'table'
                                        ?
                                        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@32r6ur`}
                                            comsWeaTableStore={dialogParams.table}
                                            hasOrder={true}
                                            needScroll={true}
                                            getColumns={this.renderCol}
                                            {...scrollProps}
                                        />
                                        :
                                        <WeaNewScroll height={480}>
                                            <WeaTree ecId={`${this && this.props && this.props.ecId || ''}_WeaTree@2kaod3`}
                                                datas={hrmResourceTotal.toJS(dialogParams.treeData)}
                                                rowKey={'categoryid'}
                                            />
                                         </WeaNewScroll>
                                }
                            </Tabs>
                        }
                    </WeaDialog>
                </div>
            );
        }
        if (verified && !hasRight) {
            return (<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@kgu3dd`}>
                    <div style={{color: '#000'}}>
                        {i18n.message.authFailed()}
                    </div>
                </WeaAlertPage>
            )
        }
        return (
            <div></div>
        )
    }

    onSelectHandle(obj, index) {
        this.props.hrmResourceTotal.onSelectHandle(obj, index);
    }

    getRightMenu() {
        const arr = [{
            icon: <i className='icon-coms-ws'/>,
            content: i18n.button.search()
        }, {
            icon: <i className='icon-coms-task-list'/>,
            content: i18n.button.columnVisibleSetting()
        }
        ];
        return arr;
    }

    onRightMenuClick(key) {
        const {hrmResourceTotal} = this.props;
        switch (key) {
            case '0':
                //hrmResourceTotal.doSearch();
                break;
            case '1':
                //this.definedColumn();
                break;
        }
    }
}

export default HrmResourceTotal