import React from "react";
import { inject, observer } from "mobx-react";
import { Button } from "antd";
import { toJS } from "mobx";
import { WeaSwitch } from "comsMobx";
import {
  WeaSearchGroup,
  WeaFormItem,
  WeaRightMenu,
  WeaDialog,
  WeaLocaleProvider
} from "ecCom";

const getLabel = WeaLocaleProvider.getLabel;

@inject("dataShowStore")
@observer
export default class NewE7Form extends React.Component {
    constructor (props) {
        super(props);
        this.state = {}
    }

    getBtns = () => {
        const {
            dataShowStore
        } = this.props, {
            menus=[],
            buttonDisabled,
        } = dataShowStore.status;
        return menus && menus.map(item => <Button 
            ecId={`${this && this.props && this.props.ecId || ''}_Button@o7z8fq@integrationDatashowNewE7FormButton${item.key}`} 
            type='primary'
            disabled={buttonDisabled} 
            onClick={() => this.onRightMenuClick(item.key)}
        >{item.content}</Button>);
    }

    getRightMenu = () => {
        const {
            dataShowStore
        } = this.props, {
            menus=[],
            buttonDisabled
        } = dataShowStore.status;

        return menus && menus.map(item => {
            return {
                key: item.key,
                icon: <i className='icon-coms-Preservation'/>,
                content : item.content,
                disabled: buttonDisabled,
                onClick : () => this.onRightMenuClick(item.key)
            };
        });
    }

    onRightMenuClick = (type) => {
        const {dataShowStore} = this.props;
        const {newE7Form, status} = dataShowStore;
        const {dataShowE7FormHiddenFields} = toJS(status);


        if(type == 'BTN_SAVE'){
            newE7Form.validateForm().then(f=>{
                if(f.isValid){
                    //合并hiddenfield参数
                    let params = Object.assign(dataShowE7FormHiddenFields, newE7Form.getFormParams());
                    params.method = "add";
                    dataShowStore.getDataShowOperation4E7(params);
                }else{
                    f.showErrors();
                    this.setState({date: new Date()});
                }
            });

        }
    }

    getSearchs = () => {
        const {dataShowStore} = this.props;
        const {newE7Form, status} = dataShowStore;
        const {dataShowE7FormFields} = toJS(status);
        const {isFormInit} = newE7Form;
        let group = [];
        let i = 0;
        const formParams = newE7Form.getFormParams();
        isFormInit && dataShowE7FormFields && dataShowE7FormFields.map(c =>{
            let items = [];

            c.items.map(fields => {
                items.push({
                    com:(
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@k1nqk5@integrationDatashowNewE7Form${fields.domkey[0]}`}
                            label={`${fields.label}`}
                            labelCol={{span: `${fields.labelcol}`}}
                            wrapperCol={{span: `${fields.fieldcol}`}}
                            error={newE7Form.getError(fields)}
                            tipPosition="bottom"
                        >

                            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@rg2dnq@integrationDatashowNewE7Form${fields.domkey[0]}`} fieldConfig={fields} form={newE7Form} formParams={formParams}  onChange={v=> {}} />
                        </WeaFormItem>),
                    colSpan:1,
                    hide: newE7Form.isHide(fields, (keys, allParams) => {
                        let bool = false;
                        return bool;
                    })
                });

            });
            if(i==1) {
                //说明
                items.push({
                    com: (
                        <div >
                            <div class='badge' style={{paddingLeft:5,paddingBottom:10}}><span style={{marginLeft:10}}>1、{getLabel(23953,'浏览按钮字段类型中有自定义单选和自定义多选两种类型字段，所引用的自定义浏览按钮即在此设置，自定义浏览框标识不能重复')}；</span></div>
                            <div class='badge' style={{paddingLeft:5,paddingBottom:10}}><span style={{marginLeft:10}}>2、{getLabel(23954,'数据源选择——从指定数据源中查找并显示数据')}； </span></div>
                            <div class='badge' style={{paddingLeft:5,paddingBottom:10}}><span style={{marginLeft:10}}>3、{getLabel(23955,'自定义浏览页面只能显示一个查询条件和两列内容，即所有查询不能超过三个字段')}；</span></div>
                            <div class='badge' style={{paddingLeft:5,paddingBottom:10}}><span style={{marginLeft:10}}>4、{getLabel(23956,'浏览选择时初始数据按“无条件查询”内容查询数据，条件搜索时按“条件2查询”内容查询数据')}； </span></div>
                            <div class='badge' style={{paddingLeft:5,paddingBottom:10}}><span style={{marginLeft:10}}>5、{getLabel(23957,'.选择后流程字段保存的是“无条件查询”的第一列的值，流程中显示值是按“条件1查询”内容查询出的第一列的值，第二列的值作为链接的title')}； </span></div>
                            <div class='badge' style={{paddingLeft:5,paddingBottom:10}}><span style={{marginLeft:10}}>6、{getLabel(23958,'“列1显示名”和“列2显示名”指定无条件查询的第二列和第三列对应的字段说明')}； </span></div>
                            <div class='badge' style={{paddingLeft:5,paddingBottom:10}}><span style={{marginLeft:10}}>7、{getLabel(23959,'所有查询中的参数变量用？代替')}。</span></div>
                        </div>
                    ),
                    hide: newE7Form.isHide(newE7Form,(keys, allParams) => {
                        return ( false );
                    })
                });

            }
            group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@hg4xp1@integrationDatashowNewE7Form${i}`} center={i<1?true:false} col={1}  needTigger={true} title={c.title}  showGroup={c.defaultshow} items={items}/>);
            i++;
        });
        return group;
    }

    render() {
        const {dataShowStore} = this.props;
        const {showNewE7FormDialog} = toJS(dataShowStore.status);
        return (

            <div className='wea-integration-single'>
              <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@5oznyg`}
                  title={ `${getLabel( '32303' ,'数据展现集成')}` }
                  icon='icon-coms-integration'
                  iconBgcolor='#1a57a0'
                  visible={showNewE7FormDialog}
                  hasScroll={true}
                  style={{width: 900, height: 600}}
                  onCancel={()=> {
                      dataShowStore.setState({showNewE7FormDialog : false});
                      dataShowStore.newForm.reset();
                  }}
                  buttons={this.getBtns()}
                  moreBtn={{
                      datas : this.getRightMenu(),
                      collectParams: []
                  }}
              >
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@iisq1p`}
                    datas={this.getRightMenu()}
                    collectParams={[]}>


                    {this.getSearchs()}


                </WeaRightMenu>
              </WeaDialog>
            </div>
        )
    }
}
