import React, {
	Component
} from 'react';
import {
	observer,
	inject
} from 'mobx-react';
import {
	toJS
} from 'mobx';
import {
	Authority,
	Top,
	Search,
	RadioGroup,
	Table,
	Dialog,
} from '../../public/valhalla/components/index.js';
import {WeaTable } from "ecCom";
import "../../style/sanyuanLog.less";

@inject('archiveLogViewStore')
@observer
export default class ArchiveLogView extends Component {
	componentWillReceiveProps(nextProps) {
		if (this.props.location.key !== nextProps.location.key) {
			this.initPage();
		}
	}

	componentDidMount() {
		this.initPage();
	}

	initPage = () => {
		this.props.archiveLogViewStore.initPage();
	}

	getDialogContent = () => {
		const {
			archiveLogViewStore
		} = this.props, {
			logDetail,
			isLogDetail,
			originParams,
			columns,
			datas,
		} = archiveLogViewStore;

		return (
			<React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_undefined@nq6pmm`}>
				{
					isLogDetail ?( logDetail && logDetail.map(detail => {
						return (
							<div className="hrm-sanyuan-log-detail">
								<code>{detail}</code>
							</div>
						)
					}) ) : originParams.map(param => {
						return (
							<div className="hrm-sanyuan-log-origin">
								<code>{param}</code>
							</div>
						)
					})
				}
				{
					datas.map( (data,index) => {
						if (data.length > 0) {
							return (
								<div className="hrm-sanyuan-view">
									<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@dpjp4o@${index}`}  
										pagination={false} 
										columns={toJS(columns[index])} 
										dataSource={toJS(data)}
										scroll={{ x: 580, y: 330 }}
									/>
								</div>
							)
						}
					})
				}
			</React.Fragment>
		)
	}

	render() {
		const {
			archiveLogViewStore
		} = this.props, {
			authorityStore,
			topStore,
			searchStore,
			radioGroupStore,
			tableListStore,
			dialogStore,
		} = archiveLogViewStore;

		return (
			<div className="hrm-sanyuan-log">
				<Authority ecId={`${this && this.props && this.props.ecId || ''}_Authority@msocou`} store={authorityStore}>
					<Top ecId={`${this && this.props && this.props.ecId || ''}_Top@xjk3cv`} store={topStore}>
						<Search ecId={`${this && this.props && this.props.ecId || ''}_Search@a1lm65`} store={searchStore}/>
						<RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@f2o2sb`} store={archiveLogViewStore}/>
						<Table ecId={`${this && this.props && this.props.ecId || ''}_Table@8cn1gz`} store={tableListStore}/>
					</Top>
					{dialogStore.visible && (
						<Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@kxc54m`} store={dialogStore}>
							{this.getDialogContent()}
						</Dialog>
					)}
				</Authority>
			</div>
		);
	}
}