import { AppFormBase } from '@ibizstudio-ex/template-vue';
import { Util } from '@ibizstudio-ex/runtime';
import './multi-number-selector.less';

/**
 * 复合数字选择器表单项插件类
 *
 * @export
 * @class MultiNumberSelector
 * @extends {Vue}
 */
export class MultiNumberSelector extends AppFormBase {
    renderCtrlItem(h: any, modelJson: any, context: any, param: any) {
        const _this = context;
        const editor = modelJson.getPSEditor();
        return (
            <div class='multi-number-selector'>
                <div
                    class='selector-title-group'
                    style={{
                        'padding-left': modelJson.labelPos === 'LEFT' ? `${modelJson.labelWidth || 130}px` : 0,
                        'padding-right': modelJson.labelPos === 'RIGHT' ? `${modelJson.labelWidth || 130}px` : 0,
                        display: modelJson.userTag ? 'flex' : 'none',
                    }}
                >
                    <div class='selector-title-item'>超小</div>
                    <div class='selector-title-item'>小型</div>
                    <div class='selector-title-item'>中型</div>
                    <div class='selector-title-item'>大型</div>
                </div>
                <app-default-form-item
                    detailsInstance={modelJson}
                    data={_this.data}
                    modelService={_this.modelService}
                    rules={_this.rules[modelJson.name]}
                    runtimeModel={_this.detailsModel[modelJson.name]}
                    context={Util.deepCopy(_this.context)}
                    viewparams={Util.deepCopy(_this.viewparams)}
                    contextState={_this.formState}
                    service={_this.service}
                    ignorefieldvaluechange={_this.ignorefieldvaluechange}
                    on-formItemValueChange={(value: any) => {
                        _this.onFormItemValueChange(value);
                    }}
                    controlInstance={_this.controlInstance}
                >
                    {editor && (
                        <app-default-editor
                            editorInstance={editor}
                            containerCtrl={_this.controlInstance}
                            parentItem={modelJson}
                            value={_this.data[editor?.name]}
                            contextData={_this.data}
                            context={Util.deepCopy(_this.context)}
                            viewparams={Util.deepCopy(_this.viewparams)}
                            contextState={_this.formState}
                            service={_this.service}
                            disabled={_this.detailsModel[modelJson.name]?.disabled}
                            ignorefieldvaluechange={_this.ignorefieldvaluechange}
                            on-change={(value: any) => {
                                _this.onFormItemValueChange(value);
                            }}
                        />
                    )}
                </app-default-form-item>
            </div>
        );
    }
}
