import { useState} from 'react';
import { Space, Button, InputNumber, Tag, message } from 'antd';
import { CloseOutlined } from '@ant-design/icons'
import styles from './index.less';

const ScoreLineSelect = (props) => {
    const { onChange = () => { },styles={padding: 8,} } = props;
    const [score, setScore] = useState(null);
    const [scoreList, setScoreList] = useState([]);

    const handleClose = (item) => {
        const newList = scoreList.filter(i => i.id !== item.id);
        setScoreList(newList);
        onChange(newList.map(item => item.id));
    };

    return (
        <div className={styles.score_line_select} style={styles}>
            设置分数线:&nbsp;&nbsp;
            <InputNumber
                min={1}
                value={score}
                onChange={(value) => setScore(value)}
                style={{ width: 120 }}
            />
            &nbsp;&nbsp;分以上&nbsp;&nbsp;
            <Button onClick={() => {
                if (typeof score !== 'number') {
                    message.error('请输入数字');
                    return;
                }
                if (scoreList.findIndex(item => item.id === score) !== -1) {
                    message.error('该分数已存在');
                    return;
                }

                setScore(null);
                const newItem = {
                    id: score,
                    label: `${score}分以上`
                };
                const newList = [...scoreList, newItem];
                setScoreList(newList);
                onChange(newList.map(item => item.id));
            }}>
                确定
            </Button>
            <Space wrap style={{ width: '100%', marginTop: 8 }}>
                {scoreList?.map((item, index) => (
                    <Tag key={index} style={{ marginTop: 8 }}>
                        {item?.label} &nbsp; <CloseOutlined style={{ cursor: 'pointer' }} onClick={() => handleClose(item)} />
                    </Tag>
                ))}
            </Space>
        </div>
    )
};

export default ScoreLineSelect;