import React from 'react';
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import NoRight from '../util/NoRight'

import {
  WeaTop,
  WeaSearchGroup,
  WeaRightMenu,
  WeaFormItem,
  WeaHelpfulTip,
  WeaDialog,
  WeaTools} from 'ecCom';
import {Button} from 'antd';
import {WeaSwitch} from 'comsMobx';
import * as EsearchUtil from '../util/EsearchUtil';

import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

@inject('weesoSetStore')
@observer
export default class ApiSet extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }

  componentDidMount() {
    const {weesoSetStore} = this.props;
    weesoSetStore.doInit();
  }

  getBtns = () => {
    const {weesoSetStore} = this.props;
    const {saveLoading} = toJS(weesoSetStore.status);
    const formParams = weesoSetStore.form.getFormParams();
    let btns = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@gz1fig@saveSearchSet`}
        type='primary'
        loading={saveLoading}
        onClick={() => EsearchUtil.onCheck(weesoSetStore.form, () => weesoSetStore.saveSearchSet({...formParams}))}
      >
        {getLabel(86,'保存')}
      </Button>
    ]
    return btns;
  }

  getRightMenu() {
    const {weesoSetStore} = this.props;
    const formParams = weesoSetStore.form.getFormParams();
    let btnArr = [
      {
        key: 'BTN_SAVE',
        icon: <i className='icon-coms-Preservation'/>,
        content : `${getLabel(86,'保存')}`,
        onClick : () => EsearchUtil.onCheck(weesoSetStore.form, () => weesoSetStore.saveSearchSet({...formParams}))
      }]
    return btnArr;
  }

  getSearchs = () => {
    const {weesoSetStore} = this.props;
    const {form, status} = weesoSetStore;
    const {fields} = toJS(status);
    const {isFormInit} = form;
    let group = [];
    const formParams = form.getFormParams();
    isFormInit && fields && fields.map((c, _index) =>{
      let items = [];
      c.items.map(fields => {
        items.push({
          com:(
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@6tjrbd@${fields.domkey[0]}`}
              label={`${fields.label}`}
              labelCol={{span: `${fields.labelcol}`}}
              wrapperCol={{span: 10}}
              error={form.getError(fields)}
              tipPosition="bottom"
            >
              <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@cnb4jv@${fields.domkey[0]}`} fieldConfig={fields} form={form} formParams={formParams}/>
              {fields.domkey[0] == 'address' &&
                <span className='set-tip'>
                  <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@s6vfsm@${fields.domkey[0]}`}
                    width =  {`auto`}
                    title={
                      <div style={{wordBreak: 'break-word'}}>
                        <div>{getLabel(18541,'例如')}:127.0.0.1:2098,</div>
                        <div>( {getLabel(384390,'此处的端口跟搜索服务端的端口对应')} )</div>
                      </div>
                    }
                  />
                </span>
              }
              {fields.domkey[0] == 'isuse' && false &&
                <span className='set-tip'>
                  <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@u5xped@${fields.domkey[0]}`}
                    width =  {`auto`}
                    title={`1:${getLabel(31676,'启用')} 0:${getLabel(31675,'不启用')}`}
                  />
                </span>
              }
              {fields.domkey[0] == 'showSub' && false &&
              <span className='set-tip'>
                  <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@4mct0k@${fields.domkey[0]}`}
                    width =  {`auto`}
                    title={`1:${getLabel(31676,'启用')} 0:${getLabel(31675,'不启用')}`}
                  />
                </span>
              }
            </WeaFormItem>),
          colSpan:1
        })
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@d6g2n9@${_index}`} col={1} needTigger={false} showGroup={c.defaultshow} items={items}/>)
    });
    return group;
  }

  render() {
    const {weesoSetStore} = this.props;
    const {showDialog, fields} = weesoSetStore.status;
    const title = getLabel(19665,'接口设置');

    const collectParams = {
      favname: title,
      favouritetype: 5,
      objid:0,
      importantlevel: 1,
    };
    if(!weesoSetStore.apiSetRight && !this.props.isDialog) {
      return <NoRight />
    }

    return (
      <div style={{height: '100%'}}>
        {
          this.props.isDialog ?
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ktk315`}
              title={title}
              icon={'icon-coms-ws'}
              iconBgcolor='#A0B0BA'
              className='wea-weeso-apiset'
              visible={showDialog}
              style={{width: 750, height: 260}}
              onCancel={()=> {
                weesoSetStore.setState({showDialog: false});
                weesoSetStore.form.resetForm();
                weesoSetStore.form.initFormFields(fields);
              }}
              buttons={this.getBtns()}
              moreBtn={{
                datas : this.getRightMenu(),
                collectParams: collectParams
              }}
            >
              <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@0w5fcw`}
                datas={this.getRightMenu()}
                collectParams={collectParams}
              >
                {this.getSearchs()}
              </WeaRightMenu>
            </WeaDialog>
            :
            <div className='wea-weeso-apiset' style={{height: '100%'}}>
              <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@pqe25r`}
                title={title}
                icon={<i className='icon-coms-ws' />}
                iconBgcolor='#A0B0BA'
                buttons={this.getBtns()}
                buttonSpace={10}
                showDropIcon={true}
                dropMenuDatas={this.getRightMenu()}
                dropMenuProps={{
                  collectParams:collectParams
                }}
              />
              <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@4k6ep3`}
                datas={this.getRightMenu()}
                collectParams={collectParams}
              >
                {this.getSearchs()}
              </WeaRightMenu>
            </div>
        }
      </div>
    )
  }
}