import { Button, Row, Col, InputNumber, Modal, message } from 'antd';
import {observer} from 'mobx-react';
import { WeaSearchGroup, WeaFormItem, WeaDialog, WeaUpload, WeaProgress, WeaLocaleProvider, WeaSelect } from 'ecCom';
import { WeaSwitch } from "comsMobx"
const getLabel = WeaLocaleProvider.getLabel;

@observer
class FeedBackSettingDialog extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            width:1800,
            height:900,
        }
    }

    render() {
        const {feedBackSettingStore} = this.props;
        const {visible,handleFeedBackSettingDialog,fieldinfo,form,setFormFields,title,options,isChange} = feedBackSettingStore;
        const { isFormInit } = form;
        let group = [];
        const formParams = form.getFormParams();
        isFormInit && fieldinfo.map((c,i) => {
            let items = [];
            c.items.map(fields => {
                // console.log('fields',fields)
                let hide = false;
                let dom;
                let hasunderline = false;
                //只读样式控制
                let stylecss = { 'margin-right': '5px', 'margin-top': '6px' };
                if (fields.viewAttr == "1" || (fields.conditionType == "BROWSER" && fields.browserConditionParam.viewAttr == "1")) {
                    hasunderline = true;
                    stylecss = { 'margin-right': '5px', 'margin-top': '16px' };
                }
                if (fields.domkey[0] == "finish") {
                    if (fields.viewAttr == "1") {
                        dom = <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9wfnf4@${fields.domkey[0]}`}>
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@pah2ni@${fields.domkey[0]}`} span={12} style={stylecss}>
                                <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@g9yzqi@${fields.domkey[0]}`} name={fields.domkey[0]} percent={fields.value || 0} strokeColor={fields.strokeColor} status="active" />
                            </Col><span style={{ color: "#FF0000" }}>{fields.befSpan || ""}</span>
                        </Row>
                    } else {
                        dom = <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@673ctn@${fields.domkey[0]}`}>
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ngptcz@${fields.domkey[0]}`} span={24} style={stylecss}>
                                <InputNumber ecId={`${this && this.props && this.props.ecId || ''}_InputNumber@2qvt30@${fields.domkey[0]}`} name={fields.domkey[0]} min={0} value={formParams.finish}
                                    onChange={(v) => { setFormFields({ finish: { value: v } }); }} />
                                <span style={{ marginLeft: 5 }}>%</span>
                            </Col>
                        </Row>
                    }
                }else if (fields.domkey[0] == "type"){
                    dom = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@vycrp0@${fields.domkey[0]}`} fieldConfig={fields} form={form} onChange={(v) =>{this.getCircles(v)}} />;
                }else if (fields.domkey[0] == "activity"){
                    dom = <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@qlsl8p@${fields.domkey[0]}`}>
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6iuvq3@${fields.domkey[0]}`} span={24}>
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@wenjyp@${fields.domkey[0]}`}
                                    key={isChange}
                                    options={options}
                                    viewAttr={fields.viewAttr}
                                    onChange={(v) => { setFormFields({ activity: { value: v } }); }}
                                />
                            </Col>
                        </Row>
                    ;
                }else {
                    dom = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@429xq3@${fields.domkey[0]}`} fieldConfig={fields} form={form} />;
                }

                if (hasunderline) {
                    items.push({
                        com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@sbw854@${fields.domkey[0]}`}
                            label={`${fields.label}`}
                            labelCol={{ span: `${fields.labelcol}` }}
                            error={form.getError(fields)}
                            tipPosition="bottom"
                            wrapperCol={{ span: `${fields.fieldcol}` }} underline>
                            {dom}
                        </WeaFormItem>),
                        colSpan: 1,
                        hide: hide
                    });
                } else {
                    items.push({
                        com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@cxk827@${fields.domkey[0]}`}
                            label={`${fields.label}`}
                            labelCol={{ span: `${fields.labelcol}` }}
                            error={form.getError(fields)}
                            tipPosition="bottom"
                            wrapperCol={{ span: `${fields.fieldcol}` }} >
                            {dom}
                        </WeaFormItem>),
                        colSpan: 1,
                        hide: hide
                    });
                }

            });
            group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@cgcvyv@${i}`} needTigger={true} title={c.title} col={1} showGroup={c.defaultshow} items={items} />)
        });

        return (
            <div>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@xjkkyj`}
                    style={{width:550,height:300}}
                    title={title||getLabel('518180','项目反馈设置')}
                    visible={visible}
                    maskClosable={false}
                    icon="icon-coms-project"
                    iconBgcolor="#217346"
                    onCancel={()=>handleFeedBackSettingDialog(false)}
                    buttons={this.getDialogButtons()}
                >
                    {group}
                </WeaDialog>
            </div>)
    }

    getDialogButtons(){
        const {store,prjid,feedBackSettingStore} = this.props;
        let btn = [];
        btn.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@90246f@save`}  type="primary" onClick={()=>{feedBackSettingStore.saveFeedBackSetting(store,{prjid:prjid});}}>{getLabel(86,"保存")}</Button>);
        btn.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ulkoaq@close`}  type="primary" onClick={()=>feedBackSettingStore.handleFeedBackSettingDialog(false)}>{getLabel(309,"关闭")}</Button>);
        return btn
    }

    getCircles = (v) =>{
        const {prjid,feedBackSettingStore} = this.props;
        feedBackSettingStore.getOptions(v.type.value,prjid);
        // console.log(v.type.value,prjid,feedBackSettingStore.form.getField('activity'))
    }

}

export default FeedBackSettingDialog;