import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaRightMenu,
	WeaDialog,
	WeaUpload
} from 'ecCom';
import {
	WeaTableNew
} from 'comsMobx';
import {
	WeaSwitch
} from 'comsMobx';
import Tabs from '../../../coms/Tabs';
import classnames from 'classnames';
import {Button} from 'antd';
import { i18n } from '../../../public/i18n';
import findIndex from 'lodash/findIndex';
import {addContentPath} from '../../../util/index.js'
const {
	WeaTable
} = WeaTableNew;

@observer
export default class EditRightContainer extends Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {}

	componentWillReceiveProps(nextProps) {}

	changePhoto = (id) => {
		if(this.refs.uploadComp != null){
			const containerId = this.refs.uploadComp.uploader.settings.browse_button[0].id;
			$(`#${containerId}`)[0].click();
			this.props.store.setTargetId(id);
		}
	}

	delPhoto = (id) => {
		this.props.store.multiDelete({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);
	}

	renderCol = (cols) => {
		let idx = findIndex(cols, item => item.dataIndex === 'resourceimageid');
		idx != -1 && (cols[idx].render = (text, record) => {
			if(record.resourceimageid != '' && record.resourceimageid != '0')
				return <a target='_blank' href={addContentPath(`/weaver/weaver.file.FileDownload?fileid=${record.resourceimageid}`)}>{i18n.label.view()}</a>;
			else
				return <div>{i18n.label.noPhoto()}</div>
		});
		idx = findIndex(cols, item => item.dataIndex === 'lastname');
		idx != -1 && (cols[idx].render = (text, record) => {
			return <a href={`javaScript:openhrm(${record.id});`} onClick={e => window.pointerXY(e)} title={record.lastnamespan} >{record.lastnamespan}</a>
		})
	}

	render() {
		const {
			store,
			routeProps
		} = this.props;

		const {refreshMenu, multFiOp, dialogParams, saveForm, showError, onUploadChange, onUploading} = store;
		const menus = store.rootStore == null ? [] : store.rootStore.topMenuDef().uploadPhoto.menus;

		const {
			tabConfig,
			getTabIndex,
			formTarget,
			table,
		} = store;
		const {
			conditionForm: form,
			conditionFormFields: fields
		} = formTarget;
		const tabProps = {
			tabConfig: tabConfig,
			tabChangeHandle: this.tabChangeHandle,
			activeTabInfo: {
				activeTabKey: tabConfig.activeTabKey,
				activeTabIndex: getTabIndex(tabConfig.tabs, tabConfig.activeTabKey)
			},
			store: store,
			conditionForm: form,
			conditionFormFields: fields,
		}
		const classes = classnames({
			['tabPane']: true,
			['tabPane-include']: true
		});

		return (
			<div className="right">
				<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@v74fpq`} datas={menus}>
					<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@iolcjo`} {...tabProps}>
						<div className={classes}>
							<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@l4baqf`}
								comsWeaTableStore={table}
								hasOrder={true}
								needScroll={true}
								getColumns={cols => this.renderCol(cols)}
								onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate)}
							/>
						</div>
					</Tabs>
				</WeaRightMenu>
				<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@zzpajt`} {...dialogParams}
					buttons={[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@y8o1qv`} type='primary' onClick={saveForm}>{i18n.button.save()}</Button>]}
					moreBtn={{datas: [{key: '1', content: i18n.button.save(), icon: <i className='icon-coms-Preservation'/>, onClick: saveForm}]}}
				>
				</WeaDialog>
				<div style={{display: 'none'}}>
					<WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@qu0wel`}
						ref="uploadComp"
						uploadUrl='/api/doc/upload/uploadFile'
						category='string'
						maxUploadSize={10}
						maxFilesNumber={1}
						listType='img'
						limitType='jpg,gif,png'
						autoUpload={true}
						clearWhenReset={false}
						onChange={onUploadChange}
						onUploading={onUploading}
					/>
				</div>
			</div>
		)
	}
}