import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { WeaSwitch } from "comsMobx";
import {
    WeaFormItem,
    WeaTools,
} from "ecCom";
import './style/index.css';

const { getKey } = WeaTools;
const store = ["dataShowStore"];


@inject(...store)
@observer
export default class TestForm extends React.Component{

    constructor (props) {
        super(props);
        this.state={};
    }

    getItems =  () => {
        const {dataShowStore} = this.props;
        const {testForm, status} = dataShowStore;
        const {dataShowTestFormFields,showXml} = toJS(status);
        const {isFormInit} = testForm;

        let group = [];
        isFormInit && dataShowTestFormFields && dataShowTestFormFields.forEach(c => {
            c && c.items && c.items.forEach(fields => {
                let key = fields.domkey[0];

                // 处理浏览框的图标
                if('BROWSER' === fields.conditionType && fields.browserConditionParam) {
                    // 设置图标
                    fields.browserConditionParam.icon = "icon-coms-integration";
                    fields.browserConditionParam.iconBgcolor = "#1a57a0";
                }

                group.push(
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@6wjxy5@integrationDatashowTestForm${key}`}
                            label={`${fields.label}`}
                            labelCol={{span: 4, offset: 5}}
                            wrapperCol={{span: 10}}
                            error={testForm.getError(fields)}
                            style={{paddingTop:15}}
                            tipPosition="bottom"
                            hideLabel={["pretty_xml"].includes(getKey(fields))? showXml:false}
                            className={["pretty_xml"].includes(getKey(fields)) ? 'specialCol_dataShow' : 'normalCol'}
                        >
                            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@4i0z71@integrationDatashowTestForm${key}`} form={testForm} fieldConfig={fields} formParams={testForm.getFormParams()}/>
                        </WeaFormItem>
                    )
            });
        });

        return <div style={{paddingTop: 25,paddingBottom:25}}>{group}</div>;
    };

    render() {
        return (
            <div className='wea-integration-single'>
                {this.getItems()}
            </div>
        )
    }
}