import { Button, Modal, message, Row, Col, Spin } from 'antd';
import isEmpty from 'lodash/isEmpty'
import cloneDeep from 'lodash/cloneDeep'
import forEach from 'lodash/forEach'
import { WeaAlertPage, WeaTools, WeaTableEdit, WeaSearchGroup, WeaRightMenu, WeaFormItem, WeaTab, WeaTop } from 'ecCom'
import { WeaSwitch, WeaForm } from 'comsMobx';
import { inject, observer } from 'mobx-react';
import * as mobx from 'mobx';
import { i18n } from '../../public/i18n';
import * as Api from '../../apis/hrmInfoExtend'; // 引入API接口文件


const toJS = mobx.toJS;
import '../../style/common.less';



export default class HrmInfoExtend extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            id: props.location.query.hrmResourceID,
            isEditor: false,
            loading: false,
            form: new WeaForm(),
            conditions: [],
            buttons: {},
            date: ''
        }
    }

    componentDidMount() {
        this.init();
    }

    init = () => {
        this.setState({
            isEditor: false
        });
        this.getData();
    }

    getData = () => {
        this.state.loading = true;
        let params = {
            viewAttr: this.isEditor ? 2 : 1,
            id: this.state.id,
        }
        Api.getResourceExtendForm(params).then((res) => {
            if (res.code === 200) {
                this.state.form.initFormFields(res.data.conditions);
                this.setState({
                    conditions: res.data.conditions,
                    buttons: res.data.buttons,
                    loading: false
                })
            } else {
                message.warning(res.msg);
            }
        }, error => {
            message.warning(error.msg);
        })
    }

    getTopButtons = () => {
        const { isEditor, buttons } = this.state;
        const save = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@pkes6y`} type="primary" onClick={this.saveEditCard} >{i18n.button.save()}</Button>;
        const back = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@pl1fw8`} type="primary" onClick={this.backCard} >{i18n.button.back()}</Button>;
        const edit = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vkeda5`} type="primary" onClick={this.editCard} >{i18n.button.modify()}</Button>;
        const btns = [];
        try {
            if (isEditor) {
                if (buttons.hasSave) {
                    btns.push(save);
                    btns.push(back);
                }
            } else {
                if (buttons.hasEdit) {
                    btns.push(edit);
                }
            }
        } catch (e) { }
        return btns;
    }

    getSearchs = () => {
        let { form, conditions, isEditor } = this.state;
        const { isFormInit } = form;
        let group = [];
        let tipPosition = 'bottom';
        window.e9HideFormFieldKeys = [];
        isFormInit && conditions.forEach((c, i) => {
            let items = [];
            c.items.forEach((field, j) => {
                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@vh6j67@${j}`}
                            underline={!isEditor}
                            label={`${field.label}`}
                            error={form.getError(field)}
                            tipPosition={tipPosition}
                            labelCol={{ span: `${field.labelcol}` }}
                            wrapperCol={{ span: `${field.fieldcol}` }}>
                            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@d4vaqk@${j}`} fieldConfig={field} form={form} />
                        </WeaFormItem>),
                        colSpan: 1
                    });
                }
            });
            group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@x9hby9@${i}`} className={`${isEditor ? 'hrm-center' : ''}`}
                needTigger={true} hide={c.hide} title={c.title} showGroup={c.defaultshow} items={items} col={2} />)
        });
        return group;
    }

    editCard = () => {
        this.setState({
            isEditor: true
        })
        this.getData();
    }

    //todo 更新操作暂不处理
    saveEditCard = () => {
        const {loading,form} = this.state;
        this.state.form.validateForm().then(f => {
            if (f.isValid) {
                this.state.loading = true;
                let pDatas = this.form.getFormParams();
                Api.editResource({
                    ...{
                        id: this.id
                    },
                    ...pDatas,
                    ...this.getTableEditParams()
                }).then(data => {
                    if (data.code == 200) {
                        message.success(i18n.message.saveSuccess());
                        this.init();
                        this.getData();
                        this.selectedRowKeys = [];
                    } else {
                        message.warning(data.message);
                    }
                    this.loading = false;
                }, error => {
                    message.warning(error.message);
                    this.loading = false;
                })
            } else {
                f.showErrors();
                this.setDate(new Date());
                this.loading = false;
            }
        })
    }

    backCard = () => {
        this.init();
    }


    render() {

        const { loading } = this.state;

        return (
            <div className='' style={{ height: '100%', position: 'relative' }}>
                <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@bj98s7`}
                    buttons={this.getTopButtons()}
                >
                    {
                        loading ? <div className='hrm-loading-center-small'>
                            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@4ygl4a`} spinning={loading}></Spin>
                        </div>
                            : this.getSearchs()
                    }

                </WeaTop>
            </div>
        )
    }
}