import React from 'react'
import * as mobx from 'mobx'
import {
    inject,
    observer
} from 'mobx-react'
import {
    WeaTop,
    WeaTab,
    WeaFormItem,
    WeaDialog,
    WeaSearchGroup,
    WeaProgress
} 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: 502,
            width: 1075,
            showSearchAd: false,
            //**** */
            detailDialogTitle: "",
            detailVisible: false,
            record:{}
        })
    }

    componentWillMount() {
    }


    componentDidMount() {

    }

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

    doView(record) {
        this.setState({
            record:record,
            detailVisible: true,
            detailDialogTitle: record.operate_typespan + " - " + record.operate_module_namespan + " : "+record.value
        })
    }

    reRenderColumns(columns) {
        let _this = this;
        columns.forEach((c, index) => {
            if (c.dataIndex == 'message') {
                c.render = function (text, record) {
                    return <a href='javascript:void(0);' className="common" onClick={() => {
 _this.doView(record) 
}}>{i18n.label.view()}</a>
                }
            };
        })
    }

    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();
                    this.setState({ showSearchAd: 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(); this.setState({ showSearchAd: 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={() => this.setState({ showSearchAd: false })}>{i18n.button.cancel()}</Button>),
        ];

        return btn;
    }


    render() {

        const {
            visible, onCancel, logViewStore
        } = this.props, {
            tableStore, conditionNum
        } = logViewStore, {
            height, width, showSearchAd, detailDialogTitle, detailVisible,record
        } = this.state;
        return (
            <div>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@1txk5f`}
                    title={i18n.label.logView()}
                    icon="icon-coms-currency"
                    iconBgcolor="#217346"
                    visible={visible}
                    closable={true}
                    hasScroll={false}
                    onCancel={() => onCancel()}
                    style={{ height: height, width: width}}
                    initLoadCss
                    className="logWrapper"
                >
                    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@9c3zts`}
                        searchType={['advanced']}
                        showSearchAd={showSearchAd}
                        setShowSearchAd={bool => {
 this.setState({ showSearchAd: bool }) 
}}
                        advanceHeight={161}
                        searchsAd={showSearchAd ? this.getPanelComponents() : <div></div>}
                        buttonsAd={this.getTabBtn()}
                    />
                    <div style={{"padding":"0 10px 10px 10px"}}>
                        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@pgmg3x`}
                            comsWeaTableStore={tableStore}
                            hasOrder={true}
                            needScroll={true}
                            getColumns={c => this.reRenderColumns(c)}
                        />
                    </div>
                   
                </WeaDialog>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@1txk5f`}
                    title={detailDialogTitle}
                    icon="icon-coms-currency"
                    iconBgcolor="#217346"
                    visible={detailVisible}
                    closable={true}
                    hasScroll={true}
                    onCancel={() => this.setState({
                        detailVisible: false
                    })}
                    style={{ height: 676, width: 1000 }}
                >
                    <div className='content' style={{ "padding": "20px","height": "100%" }}>
                        <div style={{ "height": "40%","overflow-x": "auto"}} dangerouslySetInnerHTML={{ __html: record.message }} ></div>
                        {/* <WeaProgress percent={100} strokeColor="#217346" /> */}
                        <div style={{"marginTop":"20px","fontSize":"20px","color":"#217346"}}>{i18n.label.voParameters()}</div>
                        <div dangerouslySetInnerHTML={{ __html: record.params_str }} style={{"overflow-x": "auto","height":"50%","marginTop":"20px"}}></div>
                    </div>

                </WeaDialog>
            </div>
        )
    }
}