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

/**
 * 复合选择器表单项(复合表单项)插件类
 *
 * @export
 * @class MultiSelectorFormItem
 * @extends {Vue}
 */
export class MultiSelectorFormItem extends AppFormBase {
    renderCtrlItem(h: any, modelJson: any, context: any, param: any) {
        const _this = context;
        const editor = modelJson.getPSEditor();
        const tag = [];
        if (modelJson.getPSDEFormItems().length > 0) {
            modelJson.getPSDEFormItems().forEach((item: any) => {
                if (item.userTag) {
                    tag.push(item.userTag);
                }
            });
        }
        return (
            <div class='multi-selector-form-item'>
                <div
                    class='selector-title-group'
                    style={{
                        'padding-left':
                            modelJson.labelPos === 'LEFT'
                                ? modelJson.labelWidth === 0
                                    ? 0
                                    : `${modelJson.labelWidth || 130}px`
                                : 0,
                        'padding-right':
                            modelJson.labelPos === 'RIGHT'
                                ? modelJson.labelWidth === 0
                                    ? 0
                                    : `${modelJson.labelWidth || 130}px`
                                : 0,
                        display: tag.length > 0 ? 'flex' : 'none',
                    }}
                >
                    {modelJson.getPSDEFormItems().map((item: any) => (
                        <div
                            class='selector-title-item'
                            style={{ width: (1 / modelJson.getPSDEFormItems().length) * 100 + '%' }}
                        >
                            {item.userTag}
                        </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>
        );
    }
}