import React, {Component} from 'react';
import {observer} from 'mobx-react';
import {WeaAuth,WeaDialog,WeaFormItem,WeaDatePicker,WeaHelpfulTip} from 'ecCom';
import classnames from 'classnames';
import { Button } from "antd";
import {
	WeaTableNew
} from 'comsMobx';
import { i18n } from '../../../public/i18n';
const {
	WeaTable
} = WeaTableNew;

@observer
export default class Member extends Component{
    doDel = id => this.props.store.deleteMember({ids: id});

    doEdit = (id) => {
        const {store} = this.props;
        store.isNewMemberToAttendanceGroup = false;
        store.getMemberForm({groupmemberId: id});
    }

    onOperatesClick = (record, index, operate) => {
        const func = operate.href ? operate.href.split(':')[1].split('(')[0] : '';
        const id = record.id ? record.id : '';
        this[func] && this[func](id);
    }

    saveMember = () => {
        const { store: { isDateInValidRange, doSaveMember, opId, memberForm, groupmemberId } } = this.props;
        if (!isDateInValidRange(memberForm.getFormParams())) return;
        doSaveMember({
            ...memberForm.getFormParams(),
            groupId: opId,
            groupmemberId,
        });
    }

    cancel = () => {
        const { store: { memberAuthParams } } = this.props;
        memberAuthParams.visible = false;
    }

    renderCol = (cols) => {
        cols.map(c => {
            if (['validatefrom', 'validateto'].includes(c.dataIndex)) {
                c.render = (t, r) => {
                    return <span>{r[c.dataIndex]==r[c.dataIndex+'span'] ? r[c.dataIndex] : i18n.label[546200]()}</span>
                }
            }
        });
    }

    onDatePickerChange = (value) => {
        const { store } = this.props;
        store.validateDate = value;
    }

    onValidityDialogCancel = () => {
        const { validityDialogParams } = this.props.store;
        validityDialogParams.onCancel();
    }

    render(){
        const {
            store
        } = this.props;
        const {
            refreshTab,
            memberAuthParams,
            isNewMemberToAttendanceGroup,
            memberForm,
            validityDialogParams,
            batchSetDateType,
            saveValidateDate,
        } = store;
        const className = classnames({
			['tabPane']: true,
            ['tabPane-dialog']: true
        })
		const tableProps = {
			scroll: {
				y: this.props.height - 130
            }
        }

        return (
            <div className={className}>
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@akyh7j`} 
                    comsWeaTableStore={store.memberTable}
                    hasOrder={true}
                    needScroll={true}
                    {...tableProps}
                    getColumns={cols => this.renderCol(cols)}
                    onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate)}
                />
                {
	        		memberAuthParams.visible && (
                        isNewMemberToAttendanceGroup ? 
                        <WeaAuth ecId={`${this && this.props && this.props.ecId || ''}_WeaAuth@1elfx3`} {...memberAuthParams} /> :
                        <WeaDialog
                            {...memberAuthParams}
                            title={i18n.label[546175]()}
                            style={{height: 200}}
                            buttons={
                                [
                                    <Button type="primary" onClick={this.saveMember} >{i18n.label.ok()}</Button>,
                                    <Button type="ghost" onClick={this.cancel}>{i18n.label.cancel()}</Button>
                                ]
                            }
                        >
                                {memberForm.isFormInit && memberForm.render({ col: 1 } )}
                        </WeaDialog>
                    )
                }
                 {
	        		validityDialogParams.visible && (
                        <WeaDialog
                            {...validityDialogParams}
                            title={(batchSetDateType == 'effective') ? i18n.label[546729](): i18n.label[546730]()}
                            style={{height: 100}}
                            buttons={
                                [
                                    <Button type="primary" onClick={saveValidateDate} >{i18n.label.ok()}</Button>,
                                    <Button type="ghost" onClick={this.onValidityDialogCancel}>{i18n.label.cancel()}</Button>
                                ]
                            }
                        >
                            <div className='effectiveWrap'>
                                <WeaFormItem label={(batchSetDateType == 'effective') ? i18n.label[546731]() : i18n.label[546732]()} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
                                    <WeaDatePicker
                                        onChange={this.onDatePickerChange}
                                    />
                                    <span className='tips'><WeaHelpfulTip  title={
                                        (batchSetDateType == 'effective') ? i18n.label[546733]() : i18n.label[546734]()
                                    } /></span>
                                </WeaFormItem>
                            </div>
                        </WeaDialog>
                    )
                }
                
            </div>
        )
    }
}