import Taro from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'

import classNames from 'classnames'
import PropTypes, { InferProps } from 'prop-types'
import CtsComponent from '../../common/component'
import { CtsThumbListProps } from 'types/thumb-list'
import Thumb from '../thumb/index'

let done = `${Taro['common'].imgUrlSgd}done.png`

/**
 * 头像列表组件
 */
export default class CtsThumbList extends CtsComponent<CtsThumbListProps> {
	// static options = {
	//   addGlobalClass: true
	// }

	public static defaultProps: CtsThumbListProps
	public static propTypes: InferProps<CtsThumbListProps>

	public constructor(props: CtsThumbListProps) {
		super(props)
		this.state = {}
	}

	// 点击事件
	private itemClick(data) {
		this.props.itemClick(data)
	}

	public render(): JSX.Element {
		const { className, data, type, name, headImg, hasTitle, isChecked, checkedKey, chooseVal, hasClick } = this.props
		return (
			<View className={classNames('cts-thumb-list', className)}>
				{hasTitle && <View className='cts-thumb-list-title'>{this.props.children}</View>}
				<View className='cts-thumb-list-content'>
					{
						data.length &&
						data.map((item, index) => {
							return <View key={String(index)} className='cts-thumb-list-content-item' onClick={hasClick && this.itemClick.bind(this, item)}>
								{
									isChecked && chooseVal.includes(item[checkedKey]) && <View className="thumb-choose">
										<Image className="done-img" src={done} mode="widthFix" />
									</View>
								}


								<Thumb type={type} name={item[name]} headImg={item[headImg]}></Thumb>
								<View className='cts-thumb-list-content-item-text'>{item[name]}</View>
							</View>
						})
					}
				</View>
			</View>
		)
	}
}

CtsThumbList.defaultProps = {
	data: [],
	hasTitle: false,
	type: 'circle',
	headImg: 'headImg',
	name: 'name',
	isChecked: false,
	checkedKey: 'id',
	chooseVal: [],
	hasClick: false,
	itemClick() { }
}

CtsThumbList.propTypes = {
	data: PropTypes.array,
	hasTitle: PropTypes.bool,
	type: PropTypes.oneOf(['circle', 'square']),
	headImg: PropTypes.string,
	name: PropTypes.string,
	isChecked: PropTypes.bool,
	checkedKey: PropTypes.string,
	chooseVal: PropTypes.array,
	hasClick: PropTypes.bool,
	itemClick: PropTypes.func
}