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

const store = ["oauth2Store"];

@inject(...store)
@observer
export default class AppDataMappingImportDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      file: [],
      filelist: [],
    }
  }

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

  render() {
    const { oauth2Store } = this.props;
    const status = toJS(oauth2Store.status);
  
    return <WeaDialog
      title={getLabel('381943,18596', '数据映射导入')}
      onCancel={() => oauth2Store.setState({ appEditFormDetailDataMappingImportDialogVisible: false })}
      visible={status.appEditFormDetailDataMappingImportDialogVisible}
      style={{ width: 700, height: 400 }}
      hasScroll
      moduleName="integration"
      buttons={[
        <Button type="primary" onClick={() => this.onRightMenuClick('BTN_SAVE')}>{getLabel(18596, '导入')}</Button>
      ]}
      moreBtn={{
        datas: this.getRightMenu(),
        collectParams: []
      }}
    >
      <WeaRightMenu
        datas={this.getRightMenu()}
        collectParams={[]}
      >
        {
          oauth2Store.registerAppDataMappingImportForm.render({ col: 1, center: true }, {
            onChange: (v) => {
            },
            isHide: (key, formParams) => { }

          }, true, (c, idx) => {
            if (idx == 0) {
              let items = [];
              let form = oauth2Store.registerAppDataMappingImportForm;
              let formParams = form.getFormParams();
              c.items.map((fields, index) => {
                if (index === 0) {
                  items.push({
                    com: (
                      <WeaFormItem
                        label={`${fields.label}`}
                        labelCol={{ span: `${fields.labelcol}` }}
                        wrapperCol={{ span: `${fields.fieldcol}` }}
                        error={form.getError(fields)}
                        tipPosition="bottom"
                      >
                        <div>
                          <div style={{ float: 'left' }}>
                            <WeaUpload
                              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>选择文件</Button>
                            </WeaUpload>
                          </div>
                          <div style={{ float: 'left', paddingLeft: 10, paddingTop: 6 }}>
                            {this.state.filelist.length == 0 ? <p>未选择任何文件</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;
                    }),
                    onChange: (v) => {

                    }
                  })

                } else {
                  items.push({
                    com: (
                      <WeaFormItem
                        label={`${fields.label}`}
                        labelCol={{ span: `${fields.labelcol}` }}
                        wrapperCol={{ span: `${fields.fieldcol}` }}
                        error={form.getError(fields)}
                        tipPosition="bottom"
                      > 
                        <div style={{marginTop:7}}>
                          <WeaSwitch fieldConfig={fields} form={form} formParams={formParams}
                            onChange={(v) => {
                              if (getKey(fields) === 'userid') {
                              }
                            }}
                          />
                        </div>

                      </WeaFormItem>),
                    colSpan: 1,
                    hide: form.isHide(fields, (key, formParams) => {
                      let hide = false;
                      return hide;
                    }),
                    onChange: (v) => {

                    }
                  })
                }
              });
              return <WeaSearchGroup
                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 { oauth2Store } = this.props;
    const { registerAppEditForm, registerAppDataMappingImportForm, status } = oauth2Store;
    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);
        oauth2Store.getRegisterAppDataMappingOperation(params, (result) => {

          oauth2Store.setState({ resultTableHeader: result.resultTableHeader, resultTableData: result.resultTableData })
          oauth2Store.setState({ appEditFormDetailDataMappingImportDialogVisible: false, appEditFormDetailDataMappingImportResultDialogVisible: true })
        });
      });

    }

  }

}
