import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button, Steps, Spin, Tabs, Modal, message, Icon } from 'antd';
const confirm = Modal.confirm;
const TabPane = Tabs.TabPane;
const Step = Steps.Step;
import { WeaDialog, WeaSearchGroup, WeaTools, WeaTableEdit, WeaNewScroll, WeaFormItem, WeaAlertPage, WeaTab } from 'ecCom';
import { WeaSwitch } from 'comsMobx'
import UploadAvatar from '../../../../pc4public/hrm/uploadAvatar'
import InputBtn from '../../coms/inputBtn'
import CustComp from './CustComp';
import forEach from 'lodash/forEach'
import isEmpty from 'lodash/isEmpty'
const getKey = WeaTools.getKey;
import * as mobx from 'mobx';
const toJS = mobx.toJS;
import { i18n } from '../../public/i18n';
import {addContentPath} from '../../util/index.js'
import { AttachToNumberField } from '../../../../pc4backstage/hrmengine/util/index.js'

const verificationCode = '/weaver/weaver.file.MakeValidateCode?isView=1&validatetype=0&validatenum=4&seriesnum_=';

@inject('hrmAdd')
@observer
class Full extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            time: new Date().getTime()
        }
    }

    componentWillReceiveProps (nextProps) {
        const { hrmAdd } = this.props;
        if ('visible' in this.props && this.props.visible !== nextProps.visible) {
            if (nextProps.visible) {
                hrmAdd.current = 0;
                hrmAdd.canSave = true;
                hrmAdd.getHrmResourceAddForm();
            }
        }
    }

    componentDidMount () {
        const dom = $('<Object id="htactx" name="htactx" classid="clsid:FB4EE423-43A4-4AA9-BDE9-4335A6D3C74E" codebase="HTActX.cab#version=1,0,0,1" style="HEIGHT: 0px; WIDTH: 0px"></Object>');
        $(document.body).append(dom);
        // const {hrmAdd} = this.props;
        // const {current} = hrmAdd;
        // hrmAdd.current = 1;
    }

    pre = () => {
        const { hrmAdd } = this.props;
        const { current } = hrmAdd;
        this.refs.scrollBar.scrollerToTop();
        hrmAdd.current = current - 1;
    }

    next = () => {
        const { hrmAdd } = this.props;
        const { current } = hrmAdd;
        hrmAdd.myvalidate(() => {
            this.refs.scrollBar.scrollerToTop();
            hrmAdd.current = current + 1;
        })
    }

    save = () => {
        const { hrmAdd } = this.props;
        hrmAdd.saveFull(this.refreshVerificationCode);
    }

    onTabChange = (key) => {
        const { hrmAdd } = this.props;
        hrmAdd.onTabChange(key);
    }

    tableEditChange = (data) => {
        const { hrmAdd } = this.props;
        hrmAdd.tableEditChange(data);
    }

    more = () => {

    }
    openSimplemode = () => {
        const { hrmAdd } = this.props;
        const { openSimplemode } = hrmAdd;
        openSimplemode()
    }

    getBtns = () => {
        const { hrmAdd } = this.props;
        const { current, canSave } = hrmAdd;
        let btns = [];
        const leftbutton = <div className="ext-link" style={{ float: 'left', cursor: 'pointer' }} onClick={this.openSimplemode}>{i18n.button.simpleModle()}<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@u1u3nk@0`} type="double-right" />
        </div>
        const pre = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@x69uwc`} type="primary" disabled={!canSave} onClick={this.pre} >{i18n.button.lastStep()}</Button>;
        const next = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8ldonn`} type="primary" disabled={!canSave} onClick={this.next} >{i18n.button.nextStep()}</Button>;
        const ok = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@51q98a`} type="primary" disabled={!canSave} onClick={this.save} >{i18n.button.done()}</Button>;
        if (current == 0) {
            btns = [leftbutton, next];
        } else if (current == 3) {
            btns = [pre, ok];
        } else {
            btns = [pre, next];
        }
        return btns;
    }

    refreshVerificationCode = () => this.setState({ time: new Date().getTime() });

    getSearchs = (current) => {
        const { time } = this.state;
        const { hrmAdd } = this.props;
        const { formFull, conditionInfo0, conditionInfo1, conditionInfo2, conditionInfo3 } = hrmAdd;
        const { isFormInit } = formFull;
        const formParams = formFull.getFormParams();
        let group = [];
        let target;
        if (current < 1) target = conditionInfo0;
        if (current === 1) target = conditionInfo1;
        if (current === 2) target = conditionInfo2;
        if (current === 3) target = conditionInfo3;
        window.e9HideFormFieldKeys = [];
        isFormInit && target && target.forEach((c, i) => {
            let items = [];
            c.items.forEach((field, j) => {
                let hide = false;
                let hideLabel = false;
                if (formParams.accounttype == '1' && (field.domkey[0] == 'loginid' || field.domkey[0] == 'password' || field.domkey[0] == 'password1' || field.domkey[0] == 'userUsbType')) hide = true;
                if ((!formParams.userUsbType || formParams.userUsbType == '') && (field.domkey[0] == 'tokenKey' || field.domkey[0] == 'serial' || field.domkey[0] == 'usbstate')) hide = true;
                if (formParams.userUsbType == '4' && (field.domkey[0] == 'tokenKey' || field.domkey[0] == 'serial')) hide = true;
                if (formParams.userUsbType == '2' && field.domkey[0] == 'tokenKey') hide = true;
                if (formParams.userUsbType == '3' && field.domkey[0] == 'serial') hide = true;
                if ((!formParams.accounttype || formParams.accounttype == '0') && field.domkey[0] == 'belongto') hide = true;
                if (field.domkey[0] == 'usbstate') {
                    hideLabel = true;
                }
                let dom;
                if (field.conditionType == 'RESOURCEIMG') {
                    const key = getKey(field);
                    const bindObj = formFull.$(key);
                    dom = <UploadAvatar ecId={`${this && this.props && this.props.ecId || ''}_UploadAvatar@u0dusd@resourceImg`} {...bindObj.bind()} />
                } else if (field.domkey[0] == 'tokenKey') {
                    const key = getKey(field);
                    const bindObj = formFull.$(key);
                    dom = <InputBtn ecId={`${this && this.props && this.props.ecId || ''}_InputBtn@4keiha@tokenKey`} btnText={i18n.label.binding()} {...bindObj.bind()} onBtnClick={hrmAdd.updateKey} />
                } else if (field.domkey[0] == 'serial') {
                    const key = getKey(field);
                    const bindObj = formFull.$(key);
                    dom = <InputBtn ecId={`${this && this.props && this.props.ecId || ''}_InputBtn@atqw1s@serial`} btnText={i18n.label.binding()} {...bindObj.bind()} onBtnClick={hrmAdd.updateKey} />
                } else if (field.domkey[0] == 'validatecode') {
                    dom = (
                        <div>
                            <div style={{ float: 'left', width: '45%' }}>
                                <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@lk4mhb`} fieldConfig={field} form={formFull} formParams={formParams} />
                            </div>
                            <img style={{ marginLeft: '16px' }} border="0" align='absmiddle' src={addContentPath(`${verificationCode}${time}`)} onClick={this.refreshVerificationCode} title={i18n.label.preview()} />
                        </div>
                    )
                } else {
                    dom = <CustComp ecId={`${this && this.props && this.props.ecId || ''}_CustComq@ukb43t@custcomq`} hrmAdd={hrmAdd} fieldConfig={field} form={formFull} formParams={formParams} />;
                }
                if (c.hide || !isEmpty(field.otherParams) && field.otherParams.hide) {
                    window.e9HideFormFieldKeys.push(field.domkey[0]);
                } else {
                    items.push({
                        com: <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4p8bz8@${j}`}
                            hideLabel={hideLabel}
                            label={`${field.label}`}
                            labelCol={{ span: `${field.labelcol}` }}
                            wrapperCol={{ span: `${field.fieldcol}` }}>
                            {dom}
                            {field.domkey[0] == 'workcode' && <AttachToNumberField field={field} form={formFull}/>}
                        </WeaFormItem>,
                        colSpan: 1,
                        hide: hide
                    });
                }
            });
            group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@uwuq5a@${i}`} className='hrm-center' hide={c.hide}
                needTigger={true} title={c.title} showGroup={c.defaultshow} items={items} col={1} />)
        });
        return group;
    }

    handleTable = (datas) => {
    return datas && datas.map(data => {
      const {tabinfo:{columns}} = data;
      const length = columns.length;
     columns.map(c => {
      c.width = `${95/length}%`
     })
     return data
    })
  }

    getTabChildren = () => {
        const { hrmAdd } = this.props;
        const { current, tableInfo1, tableInfo2, tabkey1, tabkey2 } = hrmAdd;
        let tabChildren = [];
        let target;
        let tabkey;
        if (current === 1) {
            target = toJS(tableInfo1);
            tabkey = tabkey1;
        }
        if (current === 2) {
            target = toJS(tableInfo2);
            tabkey = tabkey2;
        }

        target && this.handleTable(target).map((t, i) => {
            if (tabkey == i) {
                tabChildren.push(
                    <WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@jv99el@${i}`}
                        // title={'列表信息'}
                        // addFirstRow={true}
                        tableProps={{
                            scroll: { x: 700 }
                        }}
                        columns={t.tabinfo.columns ? t.tabinfo.columns : []}
                        datas={isEmpty(t.tabinfo.datas) ? [{}] : t.tabinfo.datas}//没有数据默认添加一行，使用addFirstRow属性在这个页面有问题。
                        onChange={this.tableEditChange}
                    />
                );
            }
        })
        return tabChildren;
    }

    render () {
        const { hrmAdd } = this.props;
        const { visible, title, current, loading, conditionInfo1, conditionInfo2, conditionInfo3, tabInfo1, tabInfo2, tabkey1, tabkey2 } = hrmAdd;
        let dialogHeight = window.innerHeight - 250;
        if (dialogHeight > 660) dialogHeight = 660;
        return <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@akev30`}
            {...this.props}
            closable
            className="hrm-addfull"
            style={{ width: 800, height: dialogHeight }}
            title={title()}
            icon="icon-coms-hrm"
            iconBgcolor='#217346'
            buttons={this.getBtns()}
            moreBtn={{ datas: [] }}
        >
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@vgga5o`} spinning={loading}>
                <Steps ecId={`${this && this.props && this.props.ecId || ''}_Steps@np68cr`} current={current} className="step-wrapper">
                    <Step ecId={`${this && this.props && this.props.ecId || ''}_Step@ytdmss`} description={i18n.label.fillBasicInfo()} />
                    <Step ecId={`${this && this.props && this.props.ecId || ''}_Step@clngpy`} description={i18n.label.fillPrivateInfo()} />
                    <Step ecId={`${this && this.props && this.props.ecId || ''}_Step@yp8iih`} description={i18n.label.fillWorkInfo()} />
                    <Step ecId={`${this && this.props && this.props.ecId || ''}_Step@kgl9jl`} description={i18n.label.fillSysInfo()} />
                </Steps>
                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@hu2rk8`} height={dialogHeight - 120} ref="scrollBar">
                    <div className={`${current < 1 ? 'wea-show' : 'wea-hide'}`}>
                        {this.getSearchs(0)}
                    </div>

                    <div className={`${current === 1 ? 'wea-show hrm-add-detial-tabs' : 'wea-hide hrm-add-detial-tabs'}`}>
                        {!isEmpty(conditionInfo1) ?
                            <div>
                                {this.getSearchs(1)}
                                {
                                    !isEmpty(tabInfo1) && <div>
                                        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@8k8ibm`}
                                            type='card'
                                            keyParam='key'
                                            datas={toJS(tabInfo1)}
                                            selectedKey={tabkey1}
                                            onChange={hrmAdd.updateTabkey}
                                        />
                                        {this.getTabChildren()}
                                    </div>
                                }
                            </div> :
                            <div>
                                <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@at8vdt`}>
                                    <div style={{ color: '#000' }}>
                                        {i18n.message.fillPrivateInfoAlarm()}
                                    </div>
                                </WeaAlertPage>
                            </div>
                        }
                    </div>

                    <div className={`${current === 2 ? 'wea-show hrm-add-detial-tabs' : 'wea-hide hrm-add-detial-tabs'}`}>
                        {!isEmpty(conditionInfo2) ?
                            <div>
                                {this.getSearchs(2)}
                                <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@vswx9n`}
                                    type='card'
                                    keyParam='key'
                                    datas={toJS(tabInfo2)}
                                    selectedKey={tabkey2}
                                    onChange={hrmAdd.updateTabkey}
                                />
                                {this.getTabChildren()}
                            </div> :
                            <div>
                                <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@5c5zei`}>
                                    <div style={{ color: '#000' }}>
                                        {i18n.message.fillWorkInfoAlarm()}
                                    </div>
                                </WeaAlertPage>
                            </div>
                        }
                    </div>

                    <div className={`${current === 3 ? 'wea-show' : 'wea-hide'}`}>
                        {!isEmpty(conditionInfo3) ?
                            <div>
                                {this.getSearchs(3)}
                            </div> :
                            <div>
                                <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@iz74wf`}>
                                    <div style={{ color: '#000' }}>
                                        {i18n.message.fillSysInfoAlarm()}
                                    </div>
                                </WeaAlertPage>
                            </div>
                        }
                    </div>
                </WeaNewScroll>
            </Spin>

        </WeaDialog>
    }
}

export default Full