import React, {
	Component
} from 'react';
import {
	WeaFormItem,
	WeaInput
} from 'ecCom';
import {
	Row
} from 'antd';
import {
	i18n
} from '../../public/i18n';
import classnames from 'classnames';

export default class className extends Component {
	renderCardInfo = (matrix) => {
		const {
			store
		} = this.props;
		const {
			getMatrixInfoForm,
			removeMatrixInfo,
			showDataMaintenance,
			showFieldSetting,
			stores: {
				matrixMaintenanceStore
			}
		} = store;
		const {showMaintenance} = matrixMaintenanceStore;
		const params = {
			matrixid: matrix.id,
			name: matrix.name,
			issystem: matrix.issystem
		};

		let coms = [];
		matrix.canDel && coms.push(<div className='rm' title={i18n.button.delete()} onClick={() => removeMatrixInfo(params)}><span className='icon-coms-delete'></span></div>);
		matrix.can_field_edit && matrix.issystem === '' && coms.push(<div className='field' title={i18n.button.fieldMaintenance()} onClick={() => showFieldSetting(params)}><span className='icon-coms-task-list'></span></div>);
		matrix.can_manage && coms.push(<div className='manager' title={i18n.button.maintenancer()} onClick={() => showMaintenance(params)}><span className='icon-coms-currency-Customer'></span></div>);
		matrix.issystem === '' && matrix.canedit && coms.push(<div className='edit' title={i18n.button.modify()} onClick={() => getMatrixInfoForm(params)}><span className='icon-coms-edit'></span></div>);
		return (
			<div className='cardInfo'>
				<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9ye1m7`} className='btnBar'>
					<div className='btns'>
						{coms}
					</div>
				</Row>
				<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@tes0ph`} className='info'>
					<div className='label'>{i18n.label.matrixName()}:</div>
					<a style={{color: '#00a9ff'}} title={matrix.name} onClick={() => showDataMaintenance(params)}>{matrix.name}</a>
				</Row>
				<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@jkjq2v`} className='info'>
					<div className='label'>{i18n.label.matrixDesc()}:</div>
					<div className='desc' title={matrix.descr}>{matrix.descr}</div>
				</Row>
				<div className='itemIndex'>{matrix.matrixcount}</div>
			</div>
		)
	}

	render() {
		const {
			store,
			matrix
		} = this.props;
		const {
			getMatrixInfoForm
		} = store;
		const hasMatrix = matrix != null;
		const classes = classnames({
			['viewCard']: hasMatrix,
			['createCard']: !hasMatrix,
			['static']: hasMatrix && matrix.issystem != ''
		});
		let coms;
		if (!hasMatrix)
			coms = (<div onClick={() => getMatrixInfoForm()}><span className='icon-coms-plus'></span></div>);
		else
			coms = this.renderCardInfo(matrix)

		return (
			<div className={classes}>
			{coms}
			</div>
		)
	}
}