import React, {Component} from 'react';
import { observer } from 'mobx-react';
import {WeaCheckbox, WeaSelect, WeaLocaleProvider} from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

const options = [
    {
        key: "/",
        showname: "/"
    },{
        key: "|",
        showname: "|"
    },{
        key: ">",
        showname: ">"
    }
]

const orderOptions = () => [
    {
        key: "0",
        showname: getLabel('505824','从大到小')
    },{
        key: "1",
        showname: getLabel('505823','从小到大')
    }
]

@observer
export default class EnableComs extends Component{
    render(){
        const { tableCellProps: { onEdit, record } } = this.props;
        return (
            <span>
                <span style={{display: (record.id == 'supOrgInfo' ? 'none' : '')}}>
                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@v36euk`} value={record.fullpath} content={getLabel(506374, '显示全路径')} onChange={v => onEdit({
                        type: 'CUSTOM',
                        record: {
                            ...record,
                            fullpath: Number(v),
                            delimiter: (Number(v) == 1 ? (record.delimiter || '/') : ''),
                            orderType: (Number(v) == 1 ? (record.orderType || '0') : '')
                        }
                    })}/>
                </span>
                {
                    (record.fullpath == 1 || record.id == 'supOrgInfo') &&
                    <span>
                        <span style={{marginRight: '5px'}}>{getLabel(506375, '分隔符')}</span>
                        <span>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@gn3bnx`} style={{width: 50}} options={options} value={record.delimiter || '/'} onChange={v => onEdit({
                                type: 'CUSTOM',
                                record: {
                                    ...record,
                                    delimiter: v
                                }
                            })}/>
                        </span>
                        <span style={{marginLeft: '10px'}}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@34kaa9`} style={{width: '100px'}} options={orderOptions()} value={record.orderType || '0'} onChange={v => onEdit({
                                type: 'CUSTOM',
                                record: {
                                    ...record,
                                    orderType: v
                                }
                            })}/>
                        </span>
                    </span>
                }
            </span>
        )
    }
}