/**
 * 移动端复选框封装
 */
import React, { Component } from 'react';
import { Checkbox, Flex } from 'antd-mobile';
const AgreeItem = Checkbox.AgreeItem;
export default class CheckBox extends Component {
	constructor(props) {
		super(props);
		const value = props.value || {};
		this.state = {
			list: !!value.list ? value.list : [],
		};
	}
	triggerChange = (changedValue) => {
		// Should provide an event to pass value to Form.
		const onChange = this.props.onChange;
		if (onChange) {
			this.setState({
				list: changedValue.list,
			});
			// 传入数据源错误导致web端和移动端冲突修改为以下传入
			onChange(changedValue.list);
		}
	};
	componentWillReceiveProps(nextProps) {
		// Should be a controlled component.
		if ('value' in nextProps) {
			const value = nextProps.value;
			this.setState(value);
		}
	}
	handelChange = (value) => {
		let { list } = this.state;
		if (list.includes(value)) {
			// if (!('value' in this.props)) {
			this.triggerChange({ list: this.state.list.filter((item) => item !== value) });
			// }
		} else {
			// if (!('value' in this.props)) {
			this.triggerChange({ list: [...list, value] });
			// }
		}
	};
	/**
	 * 是否默认选中
	 */
	getChecked = (value) => {
		let isArray = Array.isArray;
		if (this.props.value) {
			if (isArray(this.props.value)) {
				let list = this.props.value;
				return !!list ? list.includes(value) : false;
			} else {
				let { list } = this.props.value;
				return !!list ? list.includes(value) : false;
			}
		}
	};
	render() {
		let { options, initValue } = this.props;
		return (
			<div>
				{options.map((item, index) => {
					return (
						<Flex.Item>
							<AgreeItem
								key={index}
								defaultChecked={this.getChecked(item.value)}
								onChange={() => {
									this.handelChange(item.value);
								}}>
								{item.label}
							</AgreeItem>
						</Flex.Item>
					);
				})}
			</div>
		);
	}
}