import { Button } from "antd";
import { WeaSwitch } from "comsMobx";
import { WeaDialog, WeaFormItem, WeaLocaleProvider, WeaRightMenu, WeaSearchGroup, WeaUpload } from "ecCom";
import { toJS } from "mobx";
import { inject, observer } from "mobx-react";
import React from "react";
import * as IntegrationUtil from "../../util/IntegrationUtil";
const getLabel = WeaLocaleProvider.getLabel;

const store = ["authenticationCenterStore"];

@inject(...store)
@observer
export default class AppDataMappingImportDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      file: [],
      filelist: [],
      collectParams: {
        favname: `${getLabel(381908, "统一认证中心")}`,
        favouritetype: 1,
        objid: 0,
        link: "wui/engine.html#/integration/AuthenticationCenter",
        importantlevel: 1
      }
    }
  }

  componentDidMount() {
    this.setState({
      file: [],
      filelist: [],
    })
  }

  render() {
    const { authenticationCenterStore } = this.props;
    const status = toJS(authenticationCenterStore.status);
    const {collectParams} = this.state;
  
    return <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@8cdb7y`}
      title={getLabel('381943,18596', '数据映射导入')}
      onCancel={() => authenticationCenterStore.setState({ appEditFormDetailDataMappingImportDialogVisible: false })}
      visible={status.appEditFormDetailDataMappingImportDialogVisible}
      style={{ width: 700, height: 400 }}
      hasScroll
      moduleName="integration"
      buttons={[
        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@56jj5u@authAppImportBtn`} type="primary" onClick={() => this.onRightMenuClick('BTN_SAVE')}>{getLabel(18596, '导入')}</Button>
      ]}
      moreBtn={{
        datas: this.getRightMenu(),
        collectParams: collectParams
      }}
    >
      <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@djo650`}
        datas={this.getRightMenu()}
        collectParams={collectParams}
      >
        {
          authenticationCenterStore.registerAppDataMappingImportForm.render({ col: 1, center: true }, {
            onChange: (v) => {
            },
            isHide: (key, formParams) => { }

          }, true, (c, idx) => {
            if (idx == 0) {
              let items = [];
              let form = authenticationCenterStore.registerAppDataMappingImportForm;
              let formParams = form.getFormParams();
              c.items.map((fields, index) => {
                if (index === 0) {
                  items.push({
                    com: (
                      <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@fwjv0u@integrationauthImportForm${fields.domkey[0]}`}
                        label={`${fields.label}`}
                        labelCol={{ span: `${fields.labelcol}` }}
                        wrapperCol={{ span: `${fields.fieldcol}` }}
                        error={form.getError(fields)}
                        tipPosition="bottom"
                      >
                        <div>
                          <div style={{ float: 'left' }}>
                            <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@56rli9@integrationauthImportForm${fields.domkey[0]}`}
                              uploadUrl='/api/doc/upload/uploadFile'
                              category='string'
                              limitType='xls,xlsx'
                              maxFilesNumber={1}
                              datas={this.state.filelist}
                              onChange={(ids, list) => {this.setState({ file: ids, filelist: list }) }}
                            >
                              <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@12raow@integrationauthImportForm${fields.domkey[0]}`}>{getLabel(125333, '选择文件')}</Button>
                            </WeaUpload>
                          </div>
                          <div style={{ float: 'left', paddingLeft: 10, paddingTop: 6 }}>
                            {this.state.filelist.length == 0 ? <p>{getLabel('384040','未选择任何文件')}</p> : this.state.filelist.map(file => <p>{file.filename}</p>)}
                          </div>
                        </div>
                      </WeaFormItem>),
                    colSpan: 1,
                    hide: form.isHide(fields, (key, formParams) => {
                      let hide = false;
                      return hide;
                    }),
                  })

                } else {
                  items.push({
                    com: (
                      <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@wt5cq9@integrationauthImportForm${fields.domkey[0]}`}
                        label={`${fields.label}`}
                        labelCol={{ span: `${fields.labelcol}` }}
                        wrapperCol={{ span: `${fields.fieldcol}` }}
                        error={form.getError(fields)}
                        tipPosition="bottom"
                      > 
                        <div style={{marginTop:7}}>
                          <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@2dij27@integrationauthImportForm${fields.domkey[0]}`} fieldConfig={fields} form={form} formParams={formParams}/>
                        </div>
                      </WeaFormItem>),
                    colSpan: 1,
                    hide: form.isHide(fields, (key, formParams) => {
                      let hide = false;
                      return hide;
                    }),
                  })
                }
              });
              return <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@1vy1zg`} center={true} col={1} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items} />
            }
          })}
      </WeaRightMenu>
    </WeaDialog>
  }

  getRightMenu() {
    let btnArr = [
      {
        key: 'BTN_SAVE',
        icon: <i className='icon-coms-Preservation' />,
        content: `${getLabel(18596, '导入')}`,
        onClick: () => { this.onRightMenuClick('BTN_SAVE') }
      }
    ];
    return btnArr;
  }

  onRightMenuClick = (type) => {
    const { authenticationCenterStore } = this.props;
    const { registerAppEditForm, registerAppDataMappingImportForm } = authenticationCenterStore;
    if (type == 'BTN_SAVE') {
      //导入
      IntegrationUtil.onCheck(registerAppDataMappingImportForm, () => {
        let operation = "excelImport";
        let params = Object.assign({ appid: registerAppEditForm.getFormParams().appid, operation: operation }, registerAppDataMappingImportForm.getFormParams());
        params.file = JSON.stringify(this.state.file);
        params.filelist = JSON.stringify(this.state.filelist);
        authenticationCenterStore.getRegisterAppDataMappingOperation(params, (result) => {
          authenticationCenterStore.setState({ resultTableHeader: result.resultTableHeader, resultTableData: result.resultTableData })
          authenticationCenterStore.setState({ appEditFormDetailDataMappingImportDialogVisible: false, appEditFormDetailDataMappingImportResultDialogVisible: true })
        });
      });

    }

  }

}
