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

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


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

    componentWillMount() {
    }

    componentDidMount() {
        this.init();
    }

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

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

    init() {
        const {
            rankScheme
        } = this.props;
        rankScheme.getTableInfo();
        rankScheme.getHasRight();
    }

    getTopMenuBtns() {
        const {
            rankScheme
        } = this.props;
        const {
            topMenu,
            tableStore
        } = rankScheme;

        let btns = [];
        topMenu.map((item, i) => {
            if (item.menuFun !== 'batchDelete') {
                btns.push(<Button type='primary' onClick={() => this.handleClick(item)}>{item.menuName}</Button>);
            } else {
                btns.push(<Button type='primary' onClick={() => this.handleClick(item)} disabled={tableStore.selectedRowKeys.length > 0 ? false : true} >{item.menuName}</Button>);
            }

        });

        return btns;
    }

    //点击事件
    handleClick(item) {

    }

    getDropMenuDatas() {
        const {
            rankScheme
        } = this.props;
        const {
            rightMenu
        } = rankScheme;

        let menus = [];
        toJS(rightMenu).map((item, index) => {
            let obj = {
                key: item.menuFun,
                icon: <i className={`${item.menuIcon}`} />,
                content: item.menuName,
            }
            if (item.menuFun == 'collection' || item.menuFun == 'help' || item.menuFun == 'pageAddress') {
                obj.disabled = true;
            }
            menus.push(obj);
        })
        return menus;
    }

    handleMenuClick(key) {

    }

    getTabBtn() {
        const {
            rankScheme
        } = this.props;
        const {
            form2
        } = rankScheme;

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

        return btn;
    }

    onSearchChange(val) {
        const {
            rankScheme
        } = this.props;
        const {
            form2
        } = rankScheme;

        rankScheme.schemeName(val);
        //!this.isEmptyObject(form2.getFormParams()) && hrmOfficeAddress.updateFields(val);
    }

    reRenderColumns(columns) {
        let _this = this;
        columns.forEach((c, index) => {
            // if (c.dataIndex == 'schemename') {
            //     c.render = function(text, record) {
            //         return <a onClick={() => _this.doEdit(record.randomFieldId)} >{record.locationname}</a>
            //     }
            // };
        })
    }

    onOperatesClick(record, rowIndex, operate) {
        const {
            index
        } = operate;

        // (index == '0') && this.doEdit(record.randomFieldId);
        // (index == '1') && this.doDel(record.randomFieldId);
        // (index == '2') && this.deLog(record.randomFieldId);
    }

    //非空判断
    isEmptyObject(obj) {
        for (let key in obj) {
            return false;
        }
        return true;
    }




    render() {

        // 通过 rowSelection 对象表明需要行选择
        const rowSelection = {
            onChange(selectedRowKeys, selectedRows) {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            onSelect(record, selected, selectedRows) {
                console.log(record, selected, selectedRows);
            },
            onSelectAll(selected, selectedRows, changeRows) {
                console.log(selected, selectedRows, changeRows);
            },
        };

        const {
            rankScheme
        } = this.props;
        const {
            isPanelShow, form2, schemeName, conditionNum, tableStore
        } = rankScheme;

        return (
            <div ref='page' style={{ height: '100%' }}>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@k6oc4u`}
                    datas={this.getDropMenuDatas()}
                    onClick={key => this.handleMenuClick(key)}
                >
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@bj98s7`}
                        title={i18n.label.schemeName()}
                        icon={<i className='icon-coms-hrm' />}
                        iconBgcolor='#217346'
                        loading={true}
                        buttons={this.getTopMenuBtns()}
                        showDropIcon={true}
                        dropMenuDatas={this.getDropMenuDatas()}
                        onDropMenuClick={(e) => this.handleMenuClick(e)}
                    >
                        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@9c3zts`}
                            searchType={['base', 'advanced']}
                            showSearchAd={isPanelShow}
                            searchsBaseValue={this.isEmptyObject(form2.getFormParams()) ? schemeName : form2.getFormParams().name}
                            setShowSearchAd={bool => rankScheme.setPanelStatus(bool)}
                            hideSearchAd={() => rankScheme.setPanelStatus(false)}
                            // searchsAd= {isPanelShow ? this.getPanelComponents() : <div></div>}
                            advanceHeight={Math.ceil(conditionNum / 2) * 52 + 20}
                            hasMask={false}
                            buttonsAd={this.getTabBtn()}
                            onSearch={() => rankScheme.getTableInfo()}
                            onSearchChange={val => this.onSearchChange(val)}
                        />
                        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@pgmg3x`}
                            comsWeaTableStore={tableStore}
                            hasOrder={true}
                            needScroll={true}
                            getColumns={c => this.reRenderColumns(c)}
                            onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate)}
                            rowSelection={rowSelection}
                        />
                    </WeaTop>

                </WeaRightMenu>
            </div>
        )
    }
}