import React, { Fragment, Component } from 'react'
import { observer } from 'mobx-react'
import { Button } from 'antd'
import { toJS } from 'mobx'
import { WeaSearchGroup, WeaTableEditable, WeaDialog, WeaSelect, WeaFormItem, WeaLocaleProvider } from 'ecCom'
import { i18n } from '../../public/i18n'

//编号组成
@observer
export default class NumberComposition extends Component {
    render() {
        const { store: { numberCompositionStore } } = this.props

        return (
            <div className='numberComposition'>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@bn49ju`} title={i18n.label.numberCompose()} showGroup children={(
                    <Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@ezdgty`}>
                        <TableEdit ecId={`${this && this.props && this.props.ecId || ''}_TableEdit@gdmweq`} store={numberCompositionStore} />
                        <Preview ecId={`${this && this.props && this.props.ecId || ''}_Preview@32ld0z`} store={numberCompositionStore} />
                        <AddNumberField ecId={`${this && this.props && this.props.ecId || ''}_AddNumberField@tngh2i`} store={numberCompositionStore} />
                    </Fragment>
                )} />
            </div>
        );
    }
}

@observer
class TableEdit extends Component {
    render() {
        const { store: { serialFieldColumns, serialFieldDatas, onOpen, onDelete, getRowSelection,setSerialFieldDatas,selectedRowKeys,onRowSelect } } = this.props
        return (
            <WeaTableEditable ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@vlq9vj`}
                draggable
                pushTitleIntoHeader
                showCopy={false}
                buttonsType="inline"
                rowKey="id"
                columns={serialFieldColumns}
                datas={toJS(serialFieldDatas)}
                willAdd={onOpen}
                willDelete={onDelete}
                getRowSelection={getRowSelection}
                onChange={setSerialFieldDatas}
                selectedRowKeys={toJS(selectedRowKeys) }
                onRowSelect={onRowSelect}
            />
        );
    }
}

@observer
class Preview extends Component {
    render() {
        const { store: { serialFieldDatas } } = this.props
        return (
            <div className='preview'>
                <span className='label'>{i18n.label.preview()}</span>
                <div className='content'>
                    {serialFieldDatas.map(data => {
                        const { id, text, input } = data;
                        return (
                            <div key={id} className='item'>
                                <div title={text}>{text}</div>
                                <div title={input}>{input}</div>
                            </div>
                        )
                    })}
                </div>
            </div>
        );
    }
}

@observer
class AddNumberField extends Component {
    render() {
        const { store: { visible, onCancel, serialFieldOptions, handleAdd, onSelectChange } } = this.props
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@h66kj7`}
                icon='icon-coms-hrm'
                iconBgcolor='#217346'
                title={i18n.label.addNumberField()}
                visible={visible}
                style={{ width: 600, height: 154 }}
                onCancel={onCancel}
                moreBtn={{ datas: [] }}
                buttons={[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5i3r9l@0`} type='primary' onClick={handleAdd}>{i18n.button.save()}</Button>]}
            >
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@l6zhlz`}
                    ratio1to2
                    label={i18n.label.numberField()}
                    style={{ padding: '20px 20%' }}
                >
                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@fleem3`} options={serialFieldOptions} onChange={onSelectChange} />
                </WeaFormItem>
            </WeaDialog>
        );
    }
}

