import React, {Component} from 'react';
import {observer} from 'mobx-react';
import {WeaDialog,WeaRightMenu,WeaNewScroll,WeaTop,WeaLocaleProvider} from 'ecCom';
import {
	WeaTableNew
} from 'comsMobx';
import {Button} from 'antd';
import {i18n} from '../../public/i18n';
import findIndex from 'lodash/findIndex';
import * as mobx from 'mobx';
import {Tabs} from '../../../hrmComsPublic/index';
const getLabel = WeaLocaleProvider.getLabel;
const toJS = mobx.toJS;
const {
	WeaTable
} = WeaTableNew;

@observer
export default class DeviceList extends Component{
    doEdit = id => this.props.store.doDeviceCreateEdit({id});

    doDelete = id => this.props.store.deleteScheduleDevice({ids: id});

    showLog = id => this.props.store.showLog({logSmallType:this.props.store.logTypeDef.HRM_ENGINE_SCHEDULEDEVICE, targetId: id}); //日志
    
    onOperatesClick = (record, index, operate) => {
		const func = operate.href ? operate.href.split(':')[1].split('(')[0] : '';
        const id = record.id ? record.id : '';
		this[func] && this[func](id, record);
    }
    
    renderCol = (cols) => {
        ['devicename'].map(key => {
            const idx = findIndex(cols, item => item.dataIndex === key);
            idx != -1 && (cols[idx].render = (text, record) => {
                if (key=='devicename') {
                    return <a onClick={() => this.doEdit(record.id)} dangerouslySetInnerHTML={{__html:record[`${key}span`]}}></a>
                }
            });
        })
        
    }

    render(){
        const {
			store
        } = this.props;
        const {
            deviceDialogParams,
            formTarget,
            dialogTabConfig,
        } = store;
        const {deviceConditionForm: form, deviceConditionFormFields: fields} = formTarget;
        
        const tabConfig = store.toJS(dialogTabConfig);
        const {
			btns,
			_,
			tabBtnDef
		} = store.btnsAndMenus(dialogTabConfig);
        const tabProps = {
            tabConfig,
            activeTabInfo: {
                activeTabKey: tabConfig.activeTabKey,
                activeTabIndex: 0
            },
            store: store,
            tabBtnDef:tabBtnDef,
			conditionForm: form,
			conditionFormFields: fields,
        }
        const generateDialogParams = () =>{
            const props = {...deviceDialogParams};
            let buttons = [];
            Object.assign(props, {
                buttons,
                moreBtn: {datas: store.convertToMenus(buttons)},
                // key: new Date().getTime()
            })
            return props;
        }
        let menus = [];
        menus.push({
            key: '1',
            content: i18n.label.log(),
            icon: <i className='icon-coms-Print-log'/>,
            onClick:()=> this.props.store.showLog({logSmallType:this.props.store.logTypeDef.HRM_ENGINE_SCHEDULEDEVICE}),
        });
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@cm8lfo`} {...generateDialogParams()}>
                    <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@acljvy`} height={'100%'}>
                        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@8ewk75`} datas={menus}>
                            <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@a2rpig`} {...tabProps}> 
                                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@zg52gz`}
                                    comsWeaTableStore={store.devicetable}
                                    hasOrder={true}
                                    needScroll={true}
                                    onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate)}
                                    getColumns={cols => this.renderCol(cols)}
                                />
                           </Tabs>
                        </WeaRightMenu>
                    </WeaNewScroll>
            </WeaDialog>
        )
    }
}