import React from 'react'
import * as mobx from 'mobx'
import {
    inject,
    observer
} from 'mobx-react'
import {
    WeaTop, WeaFormItem, WeaTable, WeaRightMenu, WeaHelpfulTip,
    WeaNewScroll, WeaSearchGroup, WeaLocaleProvider, WeaTab, WeaTableEdit
} from 'ecCom'
import {
    Row, Col, Button, Modal, message, Input, Dropdown, Icon, Menu
} from 'antd'
import { WeaSwitch } from 'comsMobx'
import {
    i18n
} from '../../public/i18n';
const getLabel = WeaLocaleProvider.getLabel;

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



@inject('qtxConfig')
@observer
export default class QtxConfig extends React.Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
    }

    componentDidMount() {
        const {
            qtxConfig
        } = this.props;
        qtxConfig.initList();
    }

    componentWillUnmount() {
    }


    componentWillReceiveProps(nextProps) {
        const {
            qtxConfig
        } = this.props;

        if (this.props.location.key !== nextProps.location.key) {
            qtxConfig.initList();
        }
    }

    getDropMenuDatas() {
        const {
            qtxConfig
        } = this.props, {
            rightMenu
        } = qtxConfig

        let menus = [];
        toJS(rightMenu).map((item, index) => {
            let obj = {
                key: item.menuFun,
                icon: <i className={`${item.menuIcon}`} />,
                content: item.menuFun == 'save' ? getLabel('547360', "保存") : getLabel('547396', "单点登录"),
            }
            menus.push(obj);
        })
        return menus;
    }

    getTopMenuBtns() {
        const {
            qtxConfig
        } = this.props, {
            topMenu
        } = qtxConfig

        let btns = [];
        topMenu.map((item, i) => {
            btns.push(<Button type='primary' onClick={() => {
 this[item.menuFun] && this[item.menuFun](); 
}}>{item.menuFun == 'save' ? getLabel('547360', "保存") : getLabel('547396', "单点登录")}</Button>);
        });
        return btns;
    }

    save = () => {
        const {
            qtxConfig
        } = this.props;
        let result = this.tableEdit.refs.edit.doRequiredCheck();
        result.pass && qtxConfig.saveQtxConfigInfo();
    }

    login = () => {
        window.open("/api/bs/hrmorganization/config/ssoLogin", "_blank")
    }




    getFormItems = () => {
        const { qtxConfig } = this.props;
        const { configFields, configForm } = qtxConfig;
        const arr = [];
        const formParams = configForm.getFormParams();
        const { isFormInit } = configForm;
        isFormInit && configFields.map((field, index) => {
            arr.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4cc308@${index}`} offset={1}>
                <div style={{ marginTop: 20 }}>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@u6ex85@${index}`}
                        label={getLabel('547394', "是否开启数据库配置")}
                        labelCol={{ span: `${field.labelcol}` }}
                        wrapperCol={{ span: `${field.fieldcol}` }}>
                        {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@p7d3td@${index}`} fieldConfig={field} form={configForm} formParams={formParams} />}
                        {<WeaHelpfulTip
                            style={{"marginLeft":"20px"}}
                            ecId={`${this && this.props && this.props.ecId || ""}_WeaHelpfulTip@4vdvfp@${index}`}
                            title={getLabel(547634, "未启用的情况下,企通学配置信息将从qtx_sso_login.properties配置文件中读取")} />}
                    </WeaFormItem>
                </div>
            </Col>)
        })

        return <Row>{arr}</Row>
    }



    render() {
        const { qtxConfig: store } = this.props;
        const { editTableData } = store, {
            datas, columns, selectedData, loading
        } = editTableData;

        return (
            <div ref='page' style={{ height: '100%' }}>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@k6oc4u`}
                    datas={this.getDropMenuDatas()}
                    onClick={key => {
 this[key] && this[key]() 
}}
                >
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@bj98s7`}
                        title={getLabel(547393, "企通学配置自定义")}
                        icon={<i className='icon-coms-hrm' />}
                        iconBgcolor='#217346'
                        loading={true}
                        buttons={this.getTopMenuBtns()}
                        showDropIcon={true}
                        dropMenuDatas={this.getDropMenuDatas()}
                        onDropMenuClick={(key) => {
 this[key] && this[key]() 
}}
                    >

                        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ddy3vv`} needTigger={false} showGroup={true} title={getLabel(82751, "基础设置")}>
                            {this.getFormItems()}
                        </WeaSearchGroup>
                        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@s8pupj`} needTigger={false} showGroup={true} title={getLabel(547395, "数据库设置")}>
                            <WeaTableEdit
                                ecId={`${this && this.props && this.props.ecId || ""}_WeaTableEdit@7rorir`}
                                ref={el => {
                                    this.tableEdit = el
                                    }}
                                draggable
                                deleteConfirm
                                showCopy={false}
                                title=""
                                columns={toJS(columns)}
                                datas={toJS(datas)}
                                selectedData={!loading && toJS(selectedData)}
                                onChange={e => store.setTableEditDatas(e)}
                            />
                        </WeaSearchGroup>
                    </WeaTop>
                </WeaRightMenu>

            </div>
        )
    }
}