import React from 'react';
import { Cascader } from 'antd';
import { Menu, Dropdown, Tag } from 'antd';
import GAUGE from './gauge.json';

class YAxisItem extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    render() {
        const { value: _propsValue, options, onChange, gaugeType } = this.props;
        return <Cascader
            value={[_propsValue.column.value, _propsValue.gauge.value]}
            allowClear={true}
            showSearch={{
                filter: (inputValue, path) => {
                    let p0 = path[0].label.toLowerCase();
                    let v = inputValue.toLowerCase();
                    return p0.indexOf(v) !== -1;
                },
                sort: (a, b, inputValue) => {
                    return a[0].label.localeCompare(b[0].label,"zh");
                },
                render: (inputValue, path) => {
                    const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
                    let v = inputValue.replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
                    let label0 = (path[0].label.split(new RegExp(`(${v})`, 'i')).map((fragment, i) => {
                        return (
                            fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === v.toLowerCase() ?
                            <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
                            fragment
                        )
                    }))
                    return <div>{label0}{path[1] ? '>' + path[1].label : ''}</div>
                }
            }}
            options={options.map((c, i)=>{
                return {
                    value: c.name,
                    label: c.label,
                    type: c.type,
                    children: GAUGE[gaugeType].map(g => {
                        if(g.columnType.indexOf(c.type) !== -1) {
                            return g;
                        }else {
                            return null;
                        }
                    }).filter( g => g!==null)
                }
            })}
            onChange={(value, items) => {
                let column = {};
                let gauge = {};
                if(value.length > 0) {
                    column = { type: items[0].type, value: items[0].value, label: items[0].label };
                    gauge = { value: items[1].value, label: items[1].label };
                }
                onChange({ column, gauge });
            }}
            displayRender={(label, selectedOptions) => {
                let menu = selectedOptions.length > 0 ? <Menu
                    selectedKeys={[_propsValue.gauge.value]}
                    selectable={true}
                >
                    {selectedOptions[0].children.map((c, i) => {
                        return <Menu.Item  data-value={c.value} data-label={c.label} key={c.value} onClick={(e) => {
                            let value = e.domEvent.target.getAttribute('data-value');
                            let label = e.domEvent.target.getAttribute('data-label');
                            onChange({
                                column: _propsValue.column,
                                gauge: { value, label }
                            });
                            e.domEvent.stopPropagation();
                        }}>{c.label}</Menu.Item>
                    })}
                </Menu>: [];
                let tag = selectedOptions.length > 0 ? <Dropdown
                    trigger={['click']}
                    overlay={menu}
                >
                    <Tag size='small' onClick={(e) => {e.stopPropagation()}}>{label[1]}</Tag>
                </Dropdown>
                : null;

                return <div className={`cascader-label ${tag?'full' : 'empty'}-label`}>
                    {tag}
                    <span>{label[0] || '请选择...'}</span>
                </div>
            }}
        >
        </Cascader> 
    }
}

export default YAxisItem;