import {
	WeaDatePicker
} from "ecCom";

export default class MonthYear extends React.Component {
	/**
	 * @DateTime 2019-05-21
	 * 概述：获取年月元素的样式
	 * @param    {String}   key   当前渲染项的key值
	 * @param    {Number}   index 当前渲染项的索引值
	 * @return   {Object}         当前渲染项的样式
	 */
	getMonthYearStyle = (key, index) => {
		const style = {
			cursor: 'pointer',
		};

		const {
			monthYear
		} = this.props, {
			cKey
		} = monthYear;

		if (cKey === key) {
			Object.assign(style, {
				color: '#2db7f5',
			});
		}
		if (index > 0) {
			Object.assign(style, {
				marginLeft: 15
			});
		}
		return style;
	}

	render() {
		const {
			MONTHYEAR,
			monthYear
		} = this.props, {
			datas,
			onMonthYearClick,
			onDatePickerChange,
			resetMonthYear
		} = MONTHYEAR, {
			cKey,
			date
		} = monthYear;

		const total = {
			position: 'absolute',
			marginTop: 13,
			zIndex: 1000,
		}

		const month_year = {
			display: 'inline-block',
			padding: '0 20px',
		}

		const refresh = {
			marginLeft: 5,
			cursor: 'pointer',
		}

		return (
			<div style={total}>
				<div style={month_year}>
					{
						datas.map( (data,index) => {
							const {key,title}  = data;
							return (
								<span onClick={() => onMonthYearClick(key)} style={this.getMonthYearStyle(key,index) }>{title}</span>
							)
						})
					}
				</div>
				<WeaDatePicker
		          arrow
		          type={cKey === '0' ? 'year' : 'month'}
		          date={date}
		          onChange={value => onDatePickerChange(value)}
		        />
		        <span onClick={() => resetMonthYear()} style={refresh}>
		        	<i className='icon-coms-Refresh' />
		        </span>
			</div>
		);
	}
}