import React from 'react'
import * as mobx from 'mobx'
import {
    inject,
    observer
} from 'mobx-react'
import {
    WeaTop,
    WeaTab,
    WeaFormItem,
    WeaDialog,
    WeaSearchGroup
} from 'ecCom'
import {
    Row,
    Col,
    Spin,
    Modal,
    Button,
    message,
    Switch
} from 'antd'
import {
    WeaSwitch,
    WeaTableNew
} from 'comsMobx'
import {
    i18n
} from '../../public/i18n';

import '../../style/common.less';

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


export default class LogView extends React.Component {
    constructor(props) {
        super(props);
        this.state = ({
            height: 402,
            width: 1075,
            dialogTitle: '日志查看',
        })
    }

    componentWillMount() {
    }


    componentDidMount() {

    }

    componentWillReceiveProps(nextProps) {
        if (this.props.keys !== nextProps.keys) {
            nextProps.logViewStore.init(nextProps.logMoudleType);
        }
    }

    getPanelComponents() {
        const {
            logViewStore
        } = this.props;
        const {
            searchCondition,
            form,
            searchConditionLoading
        } = logViewStore;

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

        isFormInit && searchCondition.map(c => {
            c.items.map((field, index) => {
                arr.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4cc308@${index}`} span={(index % 2 == 0) ? 10 : 11} offset={1}>
                    <div style={{ marginTop: 20 }}>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@u6ex85@${index}`}
                            label={`${field.label}`}
                            labelCol={{ span: `${field.labelcol}` }}
                            wrapperCol={{ span: `${field.fieldcol}` }}>
                            {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@p7d3td@${index}`} fieldConfig={field} form={form} formParams={formParams} />}
                        </WeaFormItem>
                    </div>
                </Col>)
            })
        })

        if (searchConditionLoading) {
            return (
                <div className='hrm-loading-center-small' style={{ top: '25%' }}>
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@lbktzb`} spinning={searchConditionLoading}></Spin>
                </div>
            )
        } else {
            return <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ppeb6z`} onKeyDown={(e) => {
                if (e.keyCode == 13 && e.target.tagName === "INPUT") {
                    logViewStore.getTableInfo();
                    logViewStore.setPanelStatus(false)
                }
            }}>{arr}</Row>
        }

    }

    getTabBtn() {
        const {
            logViewStore
        } = this.props;
        const {
            form
        } = logViewStore;

        const btn = [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@bx87i8`} type="primary" onClick={() => { logViewStore.getTableInfo(); logViewStore.setPanelStatus(false) }}>{i18n.button.search()}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@218ju6`} onClick={() => form.reset()}>{i18n.button.reset()}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5u9mfz`} onClick={() => logViewStore.setPanelStatus(false)}>{i18n.button.cancel()}</Button>),
        ];

        return btn;
    }


    render() {

        const {
            visible, onCancel, logViewStore
        } = this.props, {
            tableStore,isPanelShow,conditionNum
        } = logViewStore, {
            height, dialogTitle, width,
        } = this.state;

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@1txk5f`}
                title={dialogTitle}
                icon="icon-coms-currency"
                iconBgcolor="#217346"
                visible={visible}
                closable={true}
                hasScroll={true}
                onCancel={() => onCancel()}
                style={{ height: height, width: width }}
            >
                <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@9c3zts`}
                    searchType={['advanced']}
                    showSearchAd={isPanelShow}
                    setShowSearchAd={bool => logViewStore.setPanelStatus(bool)}
                    hideSearchAd={() => logViewStore.setPanelStatus(false)}
                    searchsAd={isPanelShow ? this.getPanelComponents() : <div></div>}
                    advanceHeight={Math.ceil(conditionNum / 2) * 52 + 20}
                    hasMask={false}
                    buttonsAd={this.getTabBtn()}
                    onSearch={() => logViewStore.getTableInfo()}
                />
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@pgmg3x`}
                    comsWeaTableStore={tableStore}
                    hasOrder={true}
                    needScroll={true}
                />
            </WeaDialog>)
    }
}