import React from 'react';
import {
    inject,
    observer,
} from 'mobx-react';
import {
    Button,
    Row,
    Col,
} from 'antd';
import {
    WeaSwitch,
} from 'comsMobx';
import {
    WeaTop,
    WeaTools,
    WeaLocaleProvider,
    WeaErrorPage,
    WeaTab,
    WeaRightMenu,
    WeaFormItem,
    WeaButtonIcon,
} from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
// 门户管理
import WeaPortalCustomSetting from '../../portal/wea-custom-setting/';
// 人力资源
import WeaHrmGroup from '../../hrm/hrm-group/';
// 云商店
// import WeaCloudstoreSetting from '../../cloudstore/setting';
import OtherSetting from '../../hrm/otherSetting/index'; // 其他设置
// 工作流
import UserDefaultSetting from '../../workflow/UserDefaultSetting';
// 收发文单位私人组
import PrivateGroupSetingComponent from '../../odoc/privateGroupSetingComponent';


import Import from '../../hrm/importRelatedComponet/index';

@inject('weaportal_customsetting_store')
@inject('weahrm_group_store')
@inject('odoc_privateGroupStore') // 收发文单位私人组
@inject('hrmOtherSetting') // 其他设置
@inject('weaworkflow_userdefault_store')

@observer
class WeaCustomSetting extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabKey: '1',
            isshow: false,
        };
        this.getButtons = this.getButtons.bind(this);
        this.getRightMenu = this.getRightMenu.bind(this);
        this.onRightMenuClick = this.onRightMenuClick.bind(this);
        this.getTabContent = this.getTabContent.bind(this);
    }
    componentDidMount() {
        const {
            weaportal_customsetting_store,
            weahrm_group_store,
            location:{query}
        } = this.props,
        {
            setSourceStore,
        } = weaportal_customsetting_store;
        setSourceStore(weahrm_group_store);

        if (query.tabKey) {
            this.setState({tabKey: query.tabKey})
        }
    }
    getButtons() {
        const {
            tabKey,
        } = this.state;
        const {
            weaportal_customsetting_store,
            weahrm_group_store,
            weacloudstore_setting_store,
            hrmOtherSetting,
            odoc_privateGroupStore,
            weaworkflow_userdefault_store,
        } = this.props;
        let btns = [];
        switch (tabKey) {
            case '1': // 工作流
                btns = weaworkflow_userdefault_store.getButtons();
                break;
            case '2': // 人力资源
                btns = weahrm_group_store.getButtons();
                break;
            case '3': // 门户管理
                btns = weaportal_customsetting_store.getButtons();
                break;
            case '4': // 其他设置
                // btns = weacloudstore_setting_store.getButtons();
                btns = hrmOtherSetting.getButtons();
                break;
            case '5': // 收发文单位私人组
                // btns = odoc_privateGroupStore.getButtons();
                break;
        }
        return btns;
    }
    getRightMenu() {
        const {
            tabKey,
        } = this.state;
        const {
            weaportal_customsetting_store,
            weahrm_group_store,
            weacloudstore_setting_store,
            hrmOtherSetting,
            weaworkflow_userdefault_store,
            odoc_privateGroupStore,
        } = this.props;
        let btns = [];
        switch (tabKey) {
            case '1': // 工作流
                btns = weaworkflow_userdefault_store.getRightMenu();
                break;
            case '2': // 人力资源
                btns = weahrm_group_store.getRightMenu();
                break;
            case '3': // 门户管理
                btns = weaportal_customsetting_store.getRightMenu();
                break;
            case '4': // 其他设置
                // btns = weacloudstore_setting_store.getRightMenu();
                btns = hrmOtherSetting.getRightMenu();
                break;
            case '5': // 收发文单位私人组
                btns = odoc_privateGroupStore.getRightMenu();
                break;
        }
        return btns;
    }
    onRightMenuClick(key) {
        const {
            tabKey,
        } = this.state;
        const {
            weaportal_customsetting_store,
            weahrm_group_store,
            weacloudstore_setting_store,
            hrmOtherSetting,
        } = this.props;
        switch (tabKey) {
            case '1': // 工作流
                break;
            case '2': // 人力资源
                weahrm_group_store.onRightMenuClick(key);
                break;
            case '3': // 门户管理
                weaportal_customsetting_store.onRightMenuClick(key);
                break;
            case '4': // 其他设置
                // weacloudstore_setting_store.onRightMenuClick(key);
                hrmOtherSetting.onRightMenuClick(key);
                break;
        }
    }
    getTabContent() {
        const {
            tabKey,
        } = this.state;
        let html = null;
        switch (tabKey) {
            case '1': // 工作流
                html = <UserDefaultSetting ecId={`${this && this.props && this.props.ecId || ''}_UserDefaultSetting@kqy115`} />;
                break;
            case '2': // 人力资源
                html = <WeaHrmGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaHrmGroup@66wtwo`} />;
                break;
            case '3': // 门户管理
                html = <WeaPortalCustomSetting ecId={`${this && this.props && this.props.ecId || ''}_WeaPortalCustomSetting@ragu52`} />;
                break;
            case '4': // 其他设置
                // html = <WeaCloudstoreSetting/>
                html = <OtherSetting ecId={`${this && this.props && this.props.ecId || ''}_OtherSetting@t5zm8n`} />;
                break;
            case '5': // 收发文单位私人组
                html = <PrivateGroupSetingComponent ecId={`${this && this.props && this.props.ecId || ''}_PrivateGroupSetingComponent@l66gt3`} />;
                break;
        }
        return html;
    }

    getPanelComponents() {
        const {
            weahrm_group_store,
        } = this.props;
        const {
            condition1,
            form1,
        } = weahrm_group_store;

        let arr = [];
        let formParams = form1.getFormParams();
        const {
            isFormInit,
        } = form1;

        isFormInit && condition1.map((c) => {
            c.items.map((field, index) => {
                arr.push(
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@rqe96h@${field.domkey[0]}`} span={11} offset={1}>
                        <div style={{ marginTop: 20 }}>
                          <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@y5erta@${field.domkey[0]}`}
                            label={`${field.label}`}
                            labelCol={{ span: `${field.labelcol}` }}
                            wrapperCol={{ span: `${field.fieldcol}` }}
                          >
                            {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@rlsgyg@${field.domkey[0]}`} fieldConfig={field} form={form1} formParams={formParams} />}
                          </WeaFormItem>
                        </div>
                    </Col>,
                );
            });
        });
        return (<div className="hrm-group-datepicker"><Row ecId={`${this && this.props && this.props.ecId || ''}_Row@lmuj7h`}
          onKeyDown={(e) => {
                if (e.keyCode == 13 && e.target.tagName === 'INPUT') {
                  this.handleSearch('1');
                }
              }}
        >{arr}</Row></div>);
    }

    // 获取公文管理高级搜索面板内容
    getOdocPanelComponents() {
        const {
            odoc_privateGroupStore,
        } = this.props;
        const {
            conditions,
            odoConditionForm,
        } = odoc_privateGroupStore;

        let arr = [];
        let formParams = odoConditionForm.getFormParams();
        const {
            isFormInit,
        } = odoConditionForm;

        isFormInit && conditions.map((c) => {
            c.items.map((field, index) => {
                arr.push(
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ab75og@${field.domkey[0]}`} span={11} offset={1}>
                        <div style={{ marginTop: 20 }}>
                          <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@se5sig@${field.domkey[0]}`}
                            label={`${field.label}`}
                            labelCol={{ span: `${field.labelcol}` }}
                            wrapperCol={{ span: `${field.fieldcol}` }}
                          >
                            {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@ulp5mh@${field.domkey[0]}`} fieldConfig={field} form={odoConditionForm} formParams={formParams} />}
                          </WeaFormItem>
                        </div>
                    </Col>,
                );
            });
        });
        return <div className="hrm-group-datepicker"><Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ijktaw`}>{arr}</Row></div>;
    }

    getOdocCustomComponent() {
        const {
            odoc_privateGroupStore,
        } = this.props;

        return (
            [
                this.getOdocAddIcon(),
                this.getOdocBatchDeleteIcon(),
            ]
        );
    }
    getOdocAddIcon() {
        const {
            odoc_privateGroupStore,
        } = this.props;
        return (
            <i
              className="icon-coms-plus hrm-group-clickicon"
              title={getLabel(365, '新建')}
              onClick={this.onOdocAddIconClick}
            />
        );
    }

    getOdocBatchDeleteIcon() {
        const {
            odoc_privateGroupStore,
        } = this.props;
        const len = odoc_privateGroupStore.selectedRowKeys.length;
        return (
            <i
              style={(len > 0) ? { marginRight: 16, backgroundColor: '#34A2FF' } : { marginRight: 16, backgroundColor: '#D9D9D9' }}
              className="icon-coms-Loss hrm-group-clickicon"
              title={getLabel(32136, '批量删除')}
              onClick={this.onOdocBtachDelete}
            />
        );
    }

    handleOdocSearch = () => {
        const { odoc_privateGroupStore } = this.props;
        odoc_privateGroupStore.getTableData();
        odoc_privateGroupStore.setOdocPanelStatus(false);
    }
    getCustomComponent() {
        const { weahrm_group_store } = this.props;
        return (
            [
                this.changeShowAll(),
                this.getSuggestIcon(),
                this.getImportIcon(),
                this.getAddIcon(),
                this.getBatchDeleteIcon(),
            ]
        );
    }

    changeShowAll() {
        const {weahrm_group_store: { showCanceled } } = this.props;
        return (
            <i style={{ position: 'absolute', right: '92%', top: 0 }}>
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@lb9exw`} size="small" style={{ width: 26, height: 26, paddingLeft: 6 }} onClick={this.onHrmShowAll} title={showCanceled ? getLabel(517081, '不显示封存常用组') : getLabel(517080, '显示封存常用组') }>
            <span>{showCanceled ?
              <i className="icon-coms02-icon-Classified-view" style={{ color: '#2DB7F5' }} /> : <i className="icon-coms02-Seal" style={{ color: '#8A8A8A' }} />}</span>
          </Button>
            </i>
        );
    }

    getSuggestIcon() {
        const { weahrm_group_store: { hasTrumpet, hasHint } } = this.props;
        return (
            <i style={{ position: 'absolute', right: '101%', top: 5 }}>
                {hasTrumpet ? <img src="/hrm/hrm_e9/image/u30775.png" alt="" onClick={this.getHrmSuggestion} style={{ cursor: 'pointer' }} /> : ''}
                {hasHint ? <img src="/hrm/hrm_e9/image/u30777.png" alt="" style={{ cursor: 'pointer', position: 'absolute', left: 15, top: 8 }} /> : ''}
            </i>
        );
    }

    getImportIcon() {
        return (
            <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@7n8yd3`}
              buttonType="import"
              type="primary"
              title={getLabel(32935, '导入')}
              onClick={this.handleImportClick}
            />
        );
    }

    // 个人化设置-人力资源-常用组导入回调
    handleImportClick = () => {
        const {
            weaportal_customsetting_store,
        } = this.props,
        {
            hrmImportCommon,
        } = weaportal_customsetting_store,
        {
            setTempletName,
            setImportDialogTitle,
            setImportType,
            setImportDialogVisible,
        } = hrmImportCommon;

        setTempletName(getLabel(129833, '导入模板'));
        setImportDialogTitle(getLabel(125445, '常用组信息导入'));
        setImportType('group');
        setImportDialogVisible(true);
    }

    getAddIcon() {
        return (
            <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@gv8ku4`}
              buttonType="add"
              type="primary"
              title={getLabel(365, '新建')}
              onClick={this.getHrmForm}
            />
        );
    }

    getBatchDeleteIcon() {
        const { weahrm_group_store } = this.props;
        const len = weahrm_group_store.tableStore1.selectedRowKeys.length;

        return (
            <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@f46vtq`}
              buttonType="del"
              type="primary"
              disabled={len === 0}
              title={getLabel(32136, '批量删除')}
              onClick={this.onHrmBatchDelete}
            />
        );
    }

    handleSearch(arg) {
        const { weahrm_group_store } = this.props;
        if (arg == '1') {
            weahrm_group_store.getTableInfo('1');
            weahrm_group_store.setPanelOneStatus(false);
        }
    }

    onTabChange = tabKey => this.setState({ tabKey, isshow: true });

    // htm
    setHrmShowSearchAd = bool => this.props.weahrm_group_store.setPanelOneStatus(bool);

    hideHrmSearchAd = () => this.props.weahrm_group_store.setPanelOneStatus(false);

    onHrmSearch = () => this.props.weahrm_group_store.getTableInfo('1');

    onHrmSearchChange = val => this.props.weahrm_group_store.updateFormFields('1', val);

    onHrmShowAll = () => this.props.weahrm_group_store.changeShowAll();

    getHrmSuggestion = () => this.props.weahrm_group_store.setSuggestDialogStatus(true);

    getHrmForm = () => this.props.weahrm_group_store.getForm('1');

    onHrmBatchDelete = () => this.props.weahrm_group_store.onRightMenuClick('2');

    onHrmBtnSearch = () => this.handleSearch('1');

    onHrmBtnReset = () => this.props.weahrm_group_store.form1.reset();

    onHrmBtnCancel = () => this.props.weahrm_group_store.setPanelOneStatus(false);

    // odoc
    setOdocShowSearchAd = bool => this.props.odoc_privateGroupStore.setOdocPanelStatus(bool);

    hideOdocSearchAd = () => this.props.odoc_privateGroupStore.setOdocPanelStatus(false);

    onOdocSearch = val => this.props.odoc_privateGroupStore.getTableData(val);

    onOdocSearchChange = val => this.props.odoc_privateGroupStore.updateOdocForm(val);

    onOdocBtachDelete = () => {
        const { odoc_privateGroupStore } = this.props;
        const len = odoc_privateGroupStore.selectedRowKeys.length;
        if (len > 0) {
            odoc_privateGroupStore.showConfirm();
        }
    }

    onHandelChange = tabKey => this.setState({ tabKey, isshow: false });

    onOdocBtnReset = () => this.props.odoc_privateGroupStore.odoConditionForm.reset();

    onOdocBtnCancel = () => this.props.odoc_privateGroupStore.setOdocPanelStatus(false);

    onOdocAddIconClick = () => this.props.odoc_privateGroupStore.creatDialogShow();

    render() {
        const {
            weahrm_group_store,
            odoc_privateGroupStore,
        } = this.props;
        const {
            odoConditionForm,
            isOdocPanelShow,
        } = odoc_privateGroupStore;
        const {
            form1,
            isPanelOneShow,
            hasLogRight,
        } = weahrm_group_store;
        const {
            tabKey,
            isshow,
        } = this.state;

        const {
            hrmImportCommon,
        } = this.props.weaportal_customsetting_store,
        {
            importDialog,
        } = hrmImportCommon;

        const btn1 = [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@nqzotq@hrmSearch`} type="primary" onClick={this.onHrmBtnSearch}>{getLabel(197, '搜索')}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@qnwt18@hrmReset`} type="primary" onClick={this.onHrmBtnReset}>{getLabel(2022, '重置')}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@61qiup@hrmCancel`} onClick={this.onHrmBtnCancel}>{getLabel(31129, '取消')}</Button>),
        ];
	        const btn2 = [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@nthd5n@odocSearch`} type="primary" onClick={this.handleOdocSearch}>{getLabel(197, '搜索')}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@hd05gg@odocReset`} type="primary" onClick={this.onOdocBtnReset}>{getLabel(2022, '重置')}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jdirqa@odocCancel`} onClick={this.onOdocBtnCancel}>{getLabel(31129, '取消')}</Button>),
        ];
        let weaTab;
        let topDatas = [{ key: '1', title: getLabel(2118, '工作流程') }, { key: '2', title: getLabel(179, '人力资源') }, { key: '3', title: getLabel(20613, '门户管理') }, { key: '5', title: getLabel(27618, '公文管理') }, { key: '4', title: getLabel(20824, '其他设置') }];
        switch (tabKey) {
            case '2':
                weaTab = (<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@xyyyod`}
                  datas={topDatas}
                  keyParam="key"
                  selectedKey={tabKey}
                  onChange={this.onTabChange}
                  showSearchAd={isPanelOneShow}
                  setShowSearchAd={this.setHrmShowSearchAd}
                  hideSearchAd={this.hideHrmSearchAd}
                  searchType={['base', 'advanced']}
                  searchsBaseValue={form1.getFormParams().name}
                  searchsAd={this.getPanelComponents()}
                  advanceHeight={74}
                  buttonsAd={btn1}
                  buttons={this.getCustomComponent()}
                  onSearch={this.onHrmSearch}
                  onSearchChange={this.onHrmSearchChange}
                />);
                break;
            case '5':
                weaTab = (<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@2jhdzs`}
                  datas={topDatas}
                  keyParam="key"
                  selectedKey={tabKey}
                  onChange={this.onTabChange}
                  showSearchAd={isOdocPanelShow}
                  setShowSearchAd={this.setOdocShowSearchAd}
                  hideSearchAd={this.hideOdocSearchAd}
                  searchType={['base', 'advanced']}
                  searchsBaseValue={odoConditionForm.getFormParams().receiveName}
                  searchsAd={this.getOdocPanelComponents()}
                  advanceHeight={74}
                  buttonsAd={btn2}
                  buttons={this.getOdocCustomComponent()}
                  onSearch={this.onOdocSearch}
                  onSearchChange={this.onOdocSearchChange}
                />);
                break;
            default :
                weaTab = (<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@bw7yvl`}
                  datas={topDatas}
                  keyParam="key"
                  buttons={[]}
                  selectedKey={tabKey}
                  onChange={this.onHandelChange}
                />);
                break;
        }
        return (<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@yd94o1`} datas={this.getRightMenu()} onClick={this.onRightMenuClick}>
                <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@uf8hvo`} title={getLabel(18166, '个性化设置')}
                  loading={false}
                  icon={<i className="icon-coms-currency" />}
                  iconBgcolor="#217346"
                  buttons={this.getButtons()}
                  buttonSpace={10}
                  showDropIcon={true}
                  dropMenuDatas={this.getRightMenu()}
                  onDropMenuClick={this.onRightMenuClick}
                >
                    {weaTab}
                    {this.getTabContent()}
            </WeaTop>
            {importDialog.visible && <Import ecId={`${this && this.props && this.props.ecId || ''}_Import@ben2xh`} hrmImportCommon={hrmImportCommon} />}
         </WeaRightMenu>);
    }
}


class MyErrorHandler extends React.Component {
    render() {
        const hasErrorMsg = this.props.error && this.props.error !== '';
        return (<WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@qrvs9x`} msg={hasErrorMsg ? this.props.error : '对不起，该页面异常，请联系管理员！'} />);
    }
}
WeaCustomSetting = WeaTools.tryCatch(React, MyErrorHandler, {
    error: '',
})(WeaCustomSetting);

export default WeaCustomSetting;