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

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


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

    componentWillMount() {
    }

    componentDidMount() {
          this.init();
    }

    componentWillUnmount() {
    }


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

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

    init() {
        const {
            snapshot
        } = this.props;
        snapshot.getDatas();
        snapshot.getTableInfo();
    }

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

        let btns = [];
        topMenu.map((item, i) => {
            btns.push(<Button type='primary' onClick={() => this.handleClick(item)}>{item.menuName}</Button>);
        });

        return btns;
    }

    handleClick(item) {
        this[item.menuFun] && this[item.menuFun]();
    }



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

        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) {
        this[key] && this[key]();
    }

    custom = () => {
        const {
            snapshot
        } = this.props, {
            tableStore,
        } = snapshot;

        tableStore.setColSetVisible(true);
        tableStore.tableColSet(true);
    }


    reRenderColumns(columns) {
        columns.forEach((c, index) => {
            
        })
    }


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




    render() {

        const {
            snapshot
        } = this.props;
        const {
            tableStore, date, hasRight,datas
        } = snapshot;

        if (hasRight === false) {
             return renderNoright();
        }

        const tabStyle = {
            height: "40px",
            textAlign: "center",
            lineHeight: "40px",
            color: "#4472c4",
            fontWeight: 900,
            fontSize: "16px"
        }
        const width = tableStore.columns.filter(c => c.display === "true").length * 50;

        return (
             hasRight && <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='组织架构数据快照'
                        icon={<i className='icon-coms-hrm' />}
                        iconBgcolor='#217346'
                        loading={true}
                        buttons={this.getTopMenuBtns()}
                        showDropIcon={true}
                        dropMenuDatas={this.getDropMenuDatas()}
                        onDropMenuClick={(e) => this.handleMenuClick(e)}
                    >   
                        <div  style={{ height: '40px',lineHeight:'40px' }}>
                            <h6 style={{float:'left',marginLeft:'20px'}}>日期选择:</h6>
                            <WeaDatePicker
                                value={date}
                                viewAttr={2}
                                style={{marginLeft:'20px'}}
                                onChange={value => snapshot.changeDate(value)}
                                endValue={new Date()}
                            />
                        </div>
                        <Row type="flex" justify="space-around" style={tabStyle}>
                            <Col span={8}>
                                员工总数: {datas.person}
                            </Col>
                            <Col span={8}>
                                分部总数: {datas.subcompany}
                            </Col>
                            <Col span={8}>
                                部门总数: {datas.department}
                            </Col>
                        </Row>
                        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@pgmg3x`}
                            comsWeaTableStore={tableStore}
                            hasOrder={true}
                            needScroll={true}
                            getColumns={c => this.reRenderColumns(c)}
                            tableWidth={width}
                        />
                    </WeaTop>
                </WeaRightMenu>
            </div>
    )
    }
}