import React from 'react'
import { connect } from 'dva'
import { Collapse, Menu, Form, Checkbox, Row, Col, Select, Radio, Input, InputNumber } from 'antd'
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

// const TableStyle = ({ chartDesigner, formItemLayout, dispatch }) => {
class TableStyle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            layoutColumn: null,
            formatColumn: null,
            colorColumn: null,
        }
    }

    changeAligns = (value) => {
        const { chartDesigner, dispatch } = this.props;
        const { layoutColumn } = this.state;
        const { styleConfig } = chartDesigner;
        const { table } = (styleConfig || { aligns: {} });
        let aligns = table ? (table.aligns || {}) : {};
        if(!layoutColumn) {
            return;
        }else if(layoutColumn.name === 'all') {
            chartDesigner.dataViewConfig.viewColumns.map(c => {
                aligns[c.name] = value
            });
        }else {
            aligns[layoutColumn.name] = value
        }
        dispatch({ type: 'chartDesigner/setField', name: 'styleConfig', value: { ...styleConfig, table: { ...table, aligns }} });
    }

    changeWidths = (e) => {
        const { chartDesigner, dispatch } = this.props;
        const { layoutColumn } = this.state;
        const { styleConfig } = chartDesigner;
        const { table} = styleConfig;
        let widths = table ? (table.widths || {}) : {};

        if(!layoutColumn) {
            return;
        }else if(layoutColumn.name === 'all') {
            chartDesigner.dataViewConfig.viewColumns.map(c => {
                widths[c.name] = e.target.value
            });
        }else {
            widths[layoutColumn.name] = e.target.value
        }
        dispatch({ type: 'chartDesigner/setField', name: 'styleConfig', value: { ...styleConfig, table: { ...table, widths }} });
    }

    changeThousandsSeparator = (e) => {
        const { chartDesigner, dispatch } = this.props;
        const { formatColumn } = this.state;
        const { styleConfig } = chartDesigner;
        const { table} = styleConfig;
        const checked = e.target.checked;
        let thousandsSeparatorColumns = table ? (table.thousandsSeparatorColumns || []) : [];

        if(!formatColumn) {
            return;
        }else {
            let idx = thousandsSeparatorColumns.findIndex(s => s === formatColumn.name);
            console.log(idx);
            checked ? (idx !== -1 ? (void 0) : thousandsSeparatorColumns.push(formatColumn.name)) : thousandsSeparatorColumns.splice(idx, 1);
        }
        dispatch({ type: 'chartDesigner/setField', name: 'styleConfig', value: { ...styleConfig, table: { ...table, thousandsSeparatorColumns }} });
    }

    createColumnSelector = (type, all) => {
        const { chartDesigner } = this.props;

        let columns = all ? [{
            name: 'all',
            label: '全部'
        }].concat(chartDesigner.dataViewConfig.viewColumns) : chartDesigner.dataViewConfig.viewColumns;
        
        return <Select
            allowClear
            showSearch
            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            onChange={(value) => {
                let o = {};
                let c = columns.find(c => c.name === value);
                o[type] = c;
                this.setState(o);
            }}
        >
            {columns.map((c, i)=>{
                return <Select.Option key={c.name} value={c.name}>{c.label}</Select.Option>
            })}
        </Select>
    }

    render() {
        const { chartDesigner, formItemLayout, dispatch } = this.props;
        const { layoutColumn, formatColumn, colorColumn } = this.state;
        const { styleConfig } = chartDesigner;
        console.log(styleConfig);
        const { table } = (styleConfig || { aligns: {} });

        return (
            <Collapse defaultActiveKey={['layout', 'format', 'color']}>
                <Collapse.Panel header='布局' key='layout'>
                    <Form>
                        <Form.Item label='显示序号' {...formItemLayout}>
                            <Checkbox checked={table ? table.visibleIndex : false} onChange={(e) => {
                                const checked = e.target.checked;
                                dispatch({ type: 'chartDesigner/setField', name: 'styleConfig', value: { ...styleConfig, table: { ...table, visibleIndex: checked }} });
                            }}/>
                        </Form.Item>
                        <Form.Item label='边框线' {...formItemLayout}>
                            <Checkbox onChange={(e) => {
                                const checked = e.target.checked;
                                dispatch({ type: 'chartDesigner/setField', name: 'styleConfig', value: { ...styleConfig, table: { ...table, bordered: checked }} });
                            }}/>
                        </Form.Item>
                        <Form.Item label='选择列' {...formItemLayout}>
                            {this.createColumnSelector('layoutColumn', true)}
                        </Form.Item>
                        {layoutColumn && <Form.Item label='文字对齐' {...formItemLayout}>
                            <Select onChange={this.changeAligns} >
                                <Select.Option value='left'>靠左</Select.Option>
                                <Select.Option value='center'>居中</Select.Option>
                                <Select.Option value='right'>靠右</Select.Option>
                            </Select>
                        </Form.Item>}
                        {layoutColumn && <Form.Item label='列宽' {...formItemLayout}>
                            <InputNumber onBlur={this.changeWidths}/>
                        </Form.Item>}
                    </Form>
                </Collapse.Panel>
                <Collapse.Panel header='格式' key='format'>
                    <Form>
                        <Form.Item label='选择列' {...formItemLayout}>
                            {this.createColumnSelector('formatColumn', false)}
                        </Form.Item>
                        {formatColumn && formatColumn.type === 'scale' && <Form.Item label='千分位' {...formItemLayout}>
                            <Checkbox onChange={this.changeThousandsSeparator}/>
                        </Form.Item>}
                        {formatColumn && formatColumn.type === 'scale' && <Form.Item label='小数位数' {...formItemLayout}>
                            <Select>
                                <Select.Option value='0'>无</Select.Option>
                                <Select.Option value='1'>1</Select.Option>
                                <Select.Option value='2'>2</Select.Option>
                                <Select.Option value='3'>3</Select.Option>
                                <Select.Option value='4'>4</Select.Option>
                                <Select.Option value='5'>5</Select.Option>
                            </Select>
                        </Form.Item>}
                        {formatColumn && <Form.Item label='前缀' {...formItemLayout}>
                            <Select>
                                <Select.Option value='0'>无</Select.Option>
                                <Select.Option value='1'>￥</Select.Option>
                                <Select.Option value='2'>$</Select.Option>
                                <Select.Option value='3'>%</Select.Option>
                                <Select.Option value='4'>℃</Select.Option>
                                <Select.Option value='5'>℉</Select.Option>
                            </Select>
                        </Form.Item>}
                    </Form>
                </Collapse.Panel>
                <Collapse.Panel header='颜色' key='color'>
                    <Form>
                        <Form.Item label='交替色' {...formItemLayout}>
                            <Radio.Group>
                                <Radio value={1}>行交替</Radio>
                                <Radio value={2}>列交替</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Form>
                </Collapse.Panel>
            </Collapse>
        )
    }
}

export default connect(({ present: { chartDesigner } }) => ({ chartDesigner }))(TableStyle);