import React from 'react';
import Spin from 'antd/lib/Spin';
import { FileUpload } from './FileUpload';
import { Renderer, RendererProps } from '../../../../../factory';
import { render as renderAmis } from '../../../../../index';
import { BaseSchema } from '../../../../../Schema';
import { WrapperModal, WrapperLoading } from './style';
import Scoped, { ScopedContext, IScopedContext } from '../../../../../Scoped';
import Button from '../../../../../components/Button';
import './style.scss'
import { evalExpression } from '../../../../../utils/tpl';
import LionCopyItem from '../../../components/LionCopyItem';
import { getLagerThanMaxZindex } from '../../../../../utils/helper';
interface ImportExcelProps {
  downLoadTempUrl: any;
  upLoadFileUrl: any;
  rules: string;
  reload: string;
}

interface ImportExcelState {
  visible: boolean;
  loading: boolean;
}

export interface LionImportSchema extends BaseSchema {
  type: 'lion-cell-import';
}

export interface LionImportProps extends RendererProps, Omit<LionImportSchema, 'type' | 'className'> { }

type ImportProps = RendererProps & ImportExcelProps;


export default class LionImportExcel extends React.Component<ImportProps, ImportExcelState> {

  static contextType = ScopedContext;

  constructor(props: ImportProps, context: IScopedContext) {
    super(props);

    this.state = {
      visible: false,
      loading: false
    }

    const scoped = context;
    scoped.registerComponent(this);
  }

  static defaultProps: Partial<LionImportProps> = {
    label: '导入',
    rules: "重复导入同个物流商数据将覆盖原有数据, 同一个物流商名称或同一个供应商编码存在多条记录，以第一条记录为准"
  }

  componentWillUnmount() {
    const scoped = this.context as IScopedContext;
    scoped.unRegisterComponent(this);
  }

  reloadTarget = (target: string, data: any) => {
    const scoped = this.context as IScopedContext;
    scoped.reload(target, data);
  }

  _uploadRef: any;

  setLoading = (loading: boolean) => {
    const that = this;
    that.setState({
      loading: loading ? loading : !that.state.loading
    })
  }

  handleCancel = (e: React.MouseEvent) => {

    this.setState({
      visible: !this.state.visible
    })
  }

  handleUpload = () => {
    this._uploadRef?.uploadClick && this._uploadRef?.uploadClick();
  }

  onRef = (ref: any) => {
    this._uploadRef = ref;
  }

  render() {
    const { env, label, rules, size, disabled, data, disabledOn, level, active, activeLevel, primary, name
      , translate: __, } = this.props;
    return (
      <>
        {/* <WrapperBtn onClick={this.handleCancel}>{label}</WrapperBtn> */}
        <LionCopyItem
          showItems={[{ value: name ?? "", label: __('Alert.copyName'), icon: "fa fa-sticky-note-o" }]}
          env={this.props?.env!}
        >
          <Button
            size={size}
            level={
              activeLevel && active
                ? activeLevel
                : level || (primary ? 'primary' : undefined)
            }
            disabled={disabled || evalExpression(disabledOn, data)}
            onClick={(e: React.MouseEvent) => { this.handleCancel(e) }}>
            {label}
          </Button>
        </LionCopyItem>

        <WrapperModal
          title={label}
          closable
          onCancel={this.handleCancel}
          wrapClassName='modal-export-body'
          visible={this.state.visible}
          getContainer={this.props.env?.getModalContainer}
          footer={null}
          bodyStyle={{
            flex: 1,
            overflow: 'auto',
            padding: '10px',
            color: '#606266',
            fontSize: '14px',
            wordBreak: 'break-all'
          }}
          destroyOnClose={true}
          zIndex={getLagerThanMaxZindex()}
        >
          <div style={{ width: '100%', position: 'relative' }} className="import-body">
            <div className="import-Upload">
              <div style={{
                display: 'inline-block'
              }}>{
                  renderAmis({
                    type: 'submit',
                    className: 'import-reload-btn',
                    reload: this.props.reload
                  })
                }
                <button
                  className='import-btn'
                  onClick={() => { this.handleUpload() }}
                >点击上传</button>
                <button className="download-model" onClick={() => { this._uploadRef.openDownloadDialog && this._uploadRef.openDownloadDialog(this.props.downLoadTempUrl) }}>
                  下载模板
                </button>
              </div>
              <FileUpload reload={this.props.reload} data={data} reloadTarget={this.reloadTarget} url={this.props.upLoadFileUrl} env={this.props.env} loading={this.state.loading} setLoading={(loading) => { this.setLoading(loading) }} onRef={this.onRef} />
              <div style={{
                fontSize: '12px',
                color: '#606266',
                marginTop: '5px'
              }}>
                <span>只能上传xls/xlsx文件</span>
              </div>
            </div>
            {
              rules && rules?.length > 0 ? <div className="import-Tip">
                <div className='import-cell'>
                  <div style={{
                    color: 'rgba(0,0,0,.65)',
                    margin: 0
                  }}>
                    <div style={{
                      marginBottom: "10px"
                    }}>
                      <div className="import-rules">导入规则</div>
                      <ol>
                        {
                          rules.split(',').map((_rule: string, index) => {
                            return <li key={index}>{_rule}</li>
                          })
                        }
                      </ol>
                    </div>
                  </div>
                </div>
              </div> : null
            }
          </div>
          {
            this.state.loading ? <WrapperLoading className="import-loading">
              <Spin indicator={<span className={"fa fa-spin fa-circle-o-notch"} style={{ fontSize: 24 }} ></span>} size="small" spinning tip='文件导入中....'></Spin>
            </WrapperLoading> : null
          }
        </WrapperModal>
      </>

    )
  }
}

@Renderer({
  type: 'lion-cell-import'
})
export class LionImportExcelRenderer extends LionImportExcel {

}