import React, { Component } from 'react'
import { observer } from 'mobx-react'
import {WeaSwitch } from "comsMobx";
import {WeaCheckbox} from "ecCom";

@observer
export default class LinkComs extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showLink: false
        }
    }

    onCheckboxChangeHandle = (f, v, linkKey) => {
        f.checkboxValue = (v === '1');
        this.setState({
            showLink: (linkKey != null ? f.checkboxValue : false)
        })
    }

    render() {
        const {field, textAreaProps, form, formParams, linkKey} = this.props;
        const { fieldMap } = form;
        return (
            <div className="cust">
                <div className="child">
                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@l521qi`} id={field.domkey[0]} content={field.label} onChange={(v) => this.onCheckboxChangeHandle(field, v, linkKey)} value={field.checkboxValue ? '1' : '0'} />
                    <div className='num'>
                        <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@69z1wb`}
                            fieldConfig={{ ...field, ...textAreaProps, precision: 2 }}
                            form={form}
                            formParams={formParams}
                            otherParams={{ precision: 2 }}
                        />
                    </div>
                </div>
                {
                    linkKey != null && (field.checkboxValue || this.state.showLink) && 
                    <div className='child'>
                        <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@uuynln`}
                            fieldConfig={{ ...fieldMap[linkKey], ...textAreaProps, precision: 2, content: fieldMap[linkKey].label }}
                            form={form}
                            formParams={formParams}
                            otherParams={{ precision: 2 }}
                        />
                    </div>
                }
            </div>
        );
    }
}
