import React from 'react';
import { Row, Col, Icon, message }  from 'antd';
import XAxisItem from './xAxisItem';
import './drillList.less'

const DrillList = ({ className, list, value, onChange }) => {
    let newValue = value.map(v => v);
    let nOptions = list.filter(l => l.type === 'time' || !value.find(vi => vi.column.value === l.name));
    nOptions = nOptions.map(o => o.type === 'time' ? {
        ...o,
        granularityList: value.filter(fv => fv.column.value === o.name).map(mv => mv.granularity.value)
    } : o);
    return <div className={`drill-list ${className || ''}`}>
        {value.map((v, i) => {
            let options = list.filter(l => l.type === 'time' || !value.find(vi => vi.column.value !== v.column.value && vi.column.value === l.name));
            options = options.map(o => o.type === 'time' ? {
                ...o,
                granularityList: value.filter(fv => fv.column.value === o.name && fv.granularity.value !== v.granularity.value).map(mv => mv.granularity.value)
            } : o);
            return <Row key={i}>
                <Col span={20}>
                    <XAxisItem value={v} allowClear={false} disabled={i === 0} options={options} onChange={v => {
                        let idx = value.findIndex(t => t.column.value === v.column.value && t.granularity.value === v.granularity.value);
                        if(idx > -1) {
                            message.error('不可添加重复层级');
                            return;
                        }
                        newValue[i] = v;
                        onChange(newValue);
                    }}/>
                </Col>
                <Col span={4} style={{ textAlign: 'center' }}>
                    <Icon type='delete' style={ i === 0 ? { cursor: 'not-allowed', color: '#97a5b1' } : { cursor: 'pointer' }} onClick={() => {
                        if(i === 0) {
                            return;
                        }
                        newValue.splice(i, 1);
                        onChange(newValue);
                    }}/>
                </Col>
            </Row>
        })}
        {newValue.length < 6 && <XAxisItem allowClear={false} options={nOptions} onChange={v => {
            if(newValue.length > 5) {
                message.error('钻取层级最多为6层');
                return;
            }
            newValue.push(v);
            onChange(newValue);
        }} placeholder='选择新增'/>}
    </div>
};

export default DrillList;