'use strict';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import className from 'classnames';

var styles = require<any>('./assets/styles/global.less');
import { inject, observer } from 'mobx-react';
import { apiParam } from '../lib/api';

export interface Pro {
	fetchList: (ob?: apiParam) => any;
	loadComponents: () => any;
	data?: any;
	dealComponent: React.Component;
	shopComponent: React.Component;
}
export interface Props {
	appState?: Pro;
	a: number;
}
@inject('appState')
@observer
export default class View extends React.Component<Props, any> {
	constructor(props) {
		super(props);
	}
	componentDidMount() {
		this.props.appState.fetchList();
		this.props.appState.loadComponents();
	}

	render() {
		console.log('DealComponent', this.props.appState.dealComponent);
		let DealComponent: React.Component = this.props.appState.dealComponent;
		let ShopComponent: any = this.props.appState.shopComponent;
		return (
			<div>
				<ul>
					{ShopComponent &&
						this.props.appState &&
						this.props.appState.data &&
						this.props.appState.data.list.map((item, index) => {
							return <ShopComponent key={index} item={item} />;
						})}
				</ul>
			</div>
		);
	}
}