import { Button } from 'antd'
import { WeaDatePicker, WeaDialog, WeaFormItem, WeaSearchGroup, WeaTableEditable, WeaBrowser, WeaError,WeaDialogFooter } from 'ecCom'
import { toJS } from 'mobx'
import { inject, observer } from 'mobx-react'
import React, { Component, Fragment } from 'react'
import { i18n } from '../../public/i18n'
import { Dialog, MagicForm, Search, Table } from '../../public/valhalla/components/index'

//起始编号及预留编号设置
@observer
export class StartReservedNumberSet extends Component {
    render() {
        const { store: { startReservedNumberSetStore } } = this.props

        return (
            <div className='startReservedNumberSet'>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@hi9nl8`}
                    title={i18n.label.startReserveNumberSet()}
                    showGroup
                    center
                    children={
                        <Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@uc1p9i`}>
                            <StartReservedNumberSetEntry ecId={`${this && this.props && this.props.ecId || ''}_StartReservedNumberSetEntry@55s2yf`} store={startReservedNumberSetStore} />
                            <StartReservedNumberSetDialog ecId={`${this && this.props && this.props.ecId || ''}_StartReservedNumberSetDialog@zkz3kw`} store={this.props.store} />
                        </Fragment>
                    }
                />
            </div>
        );
    }
}

@observer
class StartReservedNumberSetEntry extends Component {
    render() {
        const { store: { entryLabels, handleIconClick } } = this.props
        return (
            <div>
                {entryLabels.map((label, index) => {
                    return (
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@27ojt0@${index}`}
                            label={label}
                            ratio1to2
                        >
                            <i className="icon-coms-Flow-setting" onClick={() => handleIconClick(index)} />
                        </WeaFormItem>
                    )
                })}
            </div>
        );
    }
}

@observer
class StartReservedNumberSetDialog extends Component {
    getDialogContent = () => {
        const { store } = this.props
        const { startReservedNumberSetStore: { visible, iconIndex } } = store
        if (!visible) return null
        return (iconIndex == 0) ? <StartNumber ecId={`${this && this.props && this.props.ecId || ''}_StartNumber@7ljd79`} store={store} /> : <ReservedNumber ecId={`${this && this.props && this.props.ecId || ''}_ReservedNumber@vxnbnh`} store={store} />
    }

    render() {
        const { store } = this.props
        const { startReservedNumberSetStore: { visible, onCancel, title, saveStartNum, iconIndex, handleChangeHeight } } = store

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@5zwpzz`}
                icon='icon-coms-hrm'
                iconBgcolor='#217346'
                title={title}
                visible={visible}
                style={{ width: 900, height: 589 }}
                onCancel={onCancel}
                moreBtn={{ datas: [] }}
                buttons={(iconIndex == 0) ? [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@awz2xw@0`} type='primary' onClick={saveStartNum}>{i18n.button.save()}</Button>] : []}
                onChangeHeight={handleChangeHeight}
            >
                {this.getDialogContent()}
            </WeaDialog>
        )
    }
}

@observer
class StartNumber extends Component {
    showTotal = (total) => {
        return `${i18n.label.totalNumber().replace('{param}', total)}`
    }

    render() {
        const { store: { numberFlowRuleStore: { dateChecked, orgChecked, orgOptionValue, postChecked }, startReservedNumberSetStore: { format, dateLabel, startNumberColumns, startNumberDatas, handleDatePickerChange, startDate, endDate, realDialogHeight, handleTableEditableChange, handleTableEditableEdit, handleBrowserChange, setRef, browserProps, browserNames } } } = this.props

        return (
            <div className='startNumber'>
                {dateChecked == '1' && (
                    <div className='datePair'>
                        <span>{dateLabel}</span>
                        <WeaDatePicker format={format} ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@f8l418`} value={startDate} onChange={val => handleDatePickerChange(val, 'start')} />
                        <span> — </span>
                        <WeaDatePicker format={format} ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@8sj5aa`} value={endDate} onChange={val => handleDatePickerChange(val, 'end')} />
                    </div>
                )}
                {orgChecked == '1' && (
                    <div ecId={`${this && this.props && this.props.ecId || ''}_Fragment@onosq6`} className='sub'>
                        <span>{i18n.label.subName()}</span>
                        <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@gt5vyq`} name='sub' ref={setRef} tipPosition='bottom' error={`' ${i18n.label.subName()} '${i18n.label.required()}`}>
                            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@8rwzuw`}
                                {...browserProps}
                                title={browserNames[0]}
                                type={194}
                                onChange={ids => handleBrowserChange(ids, 'sub')}
                            />
                        </WeaError>
                    </div>
                )}
                {
                    (orgChecked == '1' && orgOptionValue == 'dept#') && (
                        <div className='dept'>
                            <span>{i18n.label.deptName()}</span>
                            <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@lopz7m`} name='dept' ref={setRef} tipPosition='bottom' error={`' ${i18n.label.deptName()} '${i18n.label.required()}`}>
                                <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@nhovcs`}
                                    {...browserProps}
                                    title={browserNames[1]}
                                    type={57}
                                    onChange={ids => handleBrowserChange(ids, 'dept')}
                                />
                            </WeaError>
                        </div>
                    )
                }
                {(postChecked == '1') && (
                    <div className='post'>
                        <span>{i18n.label.postName()}</span>
                        <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@9n554g`} name='post' ref={setRef} tipPosition='bottom' error={`' ${i18n.label.postName()} '${i18n.label.required()}`}>
                            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@6rceva`}
                                {...browserProps}
                                title={browserNames[2]}
                                type={278}
                                onChange={ids => handleBrowserChange(ids, 'post')}
                            />
                        </WeaError>
                    </div>
                )}
                <WeaTableEditable ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@czs43r`}
                    rowKey="id"
                    showTitle={false}
                    ref={setRef}
                    columns={toJS(startNumberColumns)}
                    datas={toJS(startNumberDatas)}
                    pageSize={20}
                    tableProps={{ scroll: { y: realDialogHeight - 150 } }}
                    onChange={handleTableEditableChange}
                    willEdit={handleTableEditableEdit}
                    validator={{ rules: { startnum: 'required' }, errorMessage: { required: i18n.label.fieldRequired() } }}
                />
            </div>
        );
    }
}

@inject('startReservedNumberSet')
@observer
export class ReservedNumber extends Component {
    componentDidMount() {
        const { location, startReservedNumberSet: { setSerialType, initSearch, initTablelist, setTabBtn, setIsSimple } } = this.props;
        if (location) {
            const { query: { type, isSimple } } = location
            setIsSimple(isSimple == '1');
            setSerialType(type)
            setTabBtn(false)
            initSearch().then(() => initTablelist(isSimple))
        }
    }
    render() {
        const { searchStore, tablelistStore, hasTabBtn, reserveDfButtons } = (!!this.props.store && this.props.store.startReservedNumberSetStore) || this.props.startReservedNumberSet

        return (
            <div ecId={`${this && this.props && this.props.ecId || ''}_Fragment@ur61mu`} className={!hasTabBtn && 'newReservedNumberContent'}>
                <Search ecId={`${this && this.props && this.props.ecId || ''}_Search@paro8u`} store={searchStore} />
                <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@41z6vd`} store={tablelistStore} />
                { !hasTabBtn && <WeaDialogFooter ecId={`${this && this.props && this.props.ecId || ''}_WeaDialogFooter@6opu0o`} buttons={reserveDfButtons} moreBtn={{datas: []}}/>}
                <NewReservedNumber ecId={`${this && this.props && this.props.ecId || ''}_NewReservedNumber@68kpdc`} store={this.props.store} />
            </div>
        );
    }
}

@observer
class NewReservedNumber extends Component {
    render() {
        if (!this.props.store) return null
        const { store: { startReservedNumberSetStore } } = this.props
        const { dialogStore } = startReservedNumberSetStore
        return (
            <Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@ciupwo`} store={dialogStore}>
                <NewReservedNumberContent ecId={`${this && this.props && this.props.ecId || ''}_NewReservedNumberContent@c8h6hh`} store={startReservedNumberSetStore} />
            </Dialog>
        );
    }
}

@inject('startReservedNumberSet')
@observer
export class NewReservedNumberContent extends Component {
    componentDidMount() {
        const { location, startReservedNumberSet: { setSerialType, initForm } } = this.props;
        if (location) {
            const { query: { type } } = location
            setSerialType(type)
            initForm()
        }
    }

    render() {
        const { formStore, showPreviewDatas, newReserveDfButtons } = this.props.store || this.props.startReservedNumberSet

        const hasDialogFooter = !!this.props.location

        return (
            <div ecId={`${this && this.props && this.props.ecId || ''}_Fragment@yk75sn`} className={hasDialogFooter && 'newReservedNumberContent'}>
                <MagicForm ecId={`${this && this.props && this.props.ecId || ''}_MagicForm@xb1k71`} store={formStore} />
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@2au4tb`} showGroup center title={i18n.label.reserveNumPreview()} children={<ReserveNumPreview ecId={`${this && this.props && this.props.ecId || ''}_ReserveNumPreview@hitlsh`} datas={showPreviewDatas} />} />
                {hasDialogFooter && <WeaDialogFooter ecId={`${this && this.props && this.props.ecId || ''}_WeaDialogFooter@pfdxoz`} buttons={newReserveDfButtons} moreBtn={{datas: []}}/>}
            </div>
        );
    }
}

const ReserveNumPreview = (props) => {
    const { datas } = props;
    return (
        <ul className='reserveNumPreview'>{datas.map(data => <li title={data}>{data}</li>)}</ul>
    )
}