import {
    inject,
    observer,
} from 'mobx-react'

import {
    WeaTab,
    WeaDialog,
    WeaMoreButton,
    WeaButtonIcon,
} from 'ecCom'

import {
    Spin,
    Modal,
    Button,
    message,
} from 'antd'

import {
    i18n
} from '../../public/i18n';

import React from 'react'
import NeForm from './NeForm'
import AddGpMember from './AddGpMember'
import {
    WeaTableNew
} from 'comsMobx';

const WeaTable = WeaTableNew.WeaTable;
const toJS = mobx.toJS;
const confirm = Modal.confirm;

@inject('hrmEngineGroup')
@observer
export default class GroupSetting extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            width: 700,
            height: 400,
        }
    }

    getButtons() {
        const {
            hrmEngineGroup
        } = this.props, {
            settingLoading,
            canAdd
        } = hrmEngineGroup;

        const datas = [{
            key: '0',
            icon: <i className='icon-coms-Print-log' />,
            content: i18n.button.log(),
            onClick: () => this.log(),
        }]
        const def = canAdd ? [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@c4ag88`} type="primary" onClick={() => this.handleSave()} disabled={settingLoading?true:false}>{i18n.button.save()}</Button>),
        ] : [];
        const btn = [
            ...def,
            (<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@31pq9i`} datas={datas}/>),
        ];
        return btn;
    }

    log = () => {
        window.setLogViewProps({
            logSmallType: '3050',
        });
    }

    handleSave() {
        const {
            hrmEngineGroup
        } = this.props;

        hrmEngineGroup.setOperation('save_edit');
        hrmEngineGroup.edit();
    }

    getIconBtns() {
        const {
            hrmEngineGroup
        } = this.props, {
            memTableStore,
            canCreateMember,
            canDelMember
        } = hrmEngineGroup, {
            selectedRowKeys
        } = memTableStore;

        const iconBtns = []

        canCreateMember && iconBtns.push(<WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@g8ox3k`} buttonType='add' type="primary" onClick={() =>hrmEngineGroup.setAddGpMemDialogVisible(true) }/>);
        canDelMember && iconBtns.push(<WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@cbxwyl`} buttonType='del' type="primary" disabled={selectedRowKeys.length == 0} onClick={() => this.handleBatchDelete()}/>);
        return iconBtns;
    }

    handleBatchDelete() {
        const {
            hrmEngineGroup
        } = this.props, {
            memTableStore
        } = hrmEngineGroup;

        const keys = memTableStore.selectedRowKeys.toString();
        hrmEngineGroup.setRowId(keys);
        hrmEngineGroup.setOperation('memTableRowDel');
        this.showConfirm('batchDel');
    }

    getTabName() {
        const tabName = [{
            key: '0',
            title: i18n.label.basicInfo()
        }, {
            key: '1',
            title: i18n.label.groupMember()
        }, ]
        return tabName;
    }

    onOperatesClick(record, index, operate) {
        let i = operate.index;
        let id = record.id || record.randomFieldId;
        i == '0' && this.doDel(id);
    }

    doDel(id) {
        const {
            hrmEngineGroup
        } = this.props;

        hrmEngineGroup.setRowId(id);
        hrmEngineGroup.setOperation('memTableRowDel');
        this.showConfirm('del');
    }

    showConfirm(v) {
        let _this = this;
        confirm({
            title: i18n.confirm.defaultTitle(),
            content: (v == 'del') ? i18n.confirm.delete() : i18n.confirm.batchDeleteConfirm(),
            okText: i18n.button.ok(),
            cancelText: i18n.button.cancel(),
            onOk() {
                _this.onOk();
            },
            onCancel() {
                return false;
            },
        });
    }

    onOk() {
        const {
            hrmEngineGroup
        } = this.props;
        hrmEngineGroup.memTableRowDel();
    }

    render() {
        const {
            hrmEngineGroup
        } = this.props, {
            settingTitle,
            settingDialogVisible,
            settingLoading,
            isPanelShow,
            selectedKey,
            neLoading,
            neCondition,
            neForm,
            memTableStore,
            addGpMemDialogVisible,
        } = hrmEngineGroup, {
            width,
            height
        } = this.state;

        return (
            <div>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@nbbudd`}
                    title={settingTitle()}
                    icon = "icon-coms-hrm"
                    iconBgcolor = "#217346"
                    visible={settingDialogVisible}
                    closable={true}
                    hasScroll
                    buttons={this.getButtons()}
                    onCancel={() => hrmEngineGroup.setSettingDialogVisible(false)}
                    style={{width: width, height: height}}
                    onChangeHeight={(h) => this.setState({height: h})}
                >
                    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@lz4cw1`}
                        selectedKey={selectedKey}
                        datas={this.getTabName()}
                        keyParam='key'
                        onChange={(key) => hrmEngineGroup.setSelectedKey(key)}
                        buttons={selectedKey=='1'&&this.getIconBtns()}
                    />
                        {selectedKey=='0' ?<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@t6027k`} spinning={neLoading}>
                                <NeForm ecId={`${this && this.props && this.props.ecId || ''}_NeForm@nh5gdg`} 
                                    condition={neCondition}
                                    form={neForm}
                                    isFormInit={neForm.isFormInit}
                                />
                            </Spin>:<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@7ca5s5`} 
                                        comsWeaTableStore={memTableStore}
                                        hasOrder={true}
                                        needScroll={true}
                                        scroll={{y: height-140}} 
                                        onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate)}
                                    />}
                </WeaDialog>
                <AddGpMember ecId={`${this && this.props && this.props.ecId || ''}_AddGpMember@uc1hx7`} />
            </div>
        )
    }
}