import React from 'react';
import { Drawer, Table, Upload, Modal } from 'kts-components-antd-x4';
import { RcFile } from 'kts-components-antd-x4/lib/upload';
import Invoice from '../../..';  
import Icon from '@ant-design/icons';
import { ReactComponent as DownloadSvg } from './icon/download.svg';
import { ReactComponent as UploadSvg } from './icon/upload.svg';
import styles from './index.module.less';

export default () => {
  const controller = Invoice.useInvoiceController();

  const visible = controller.useMemo(s => s.goodsListState.importGoods.isVisibleBatchImportDrawer, []);

  const onClose = React.useCallback(() => {
    controller.pipeline(async s => { s.goodsListState.importGoods.isVisibleBatchImportDrawer = false })();
  }, [controller]);

  const beforeUpload = React.useCallback(async (e: RcFile, type: string = 'xls') => {
    if (controller.importdApplicationLines) {
      controller.importdApplicationLines(e, type);
    } 
    return false;
  }, [controller])

  const downloadApplicationTempalte = () => {
    if (controller.downloadApplicationTempalte) {
      controller.downloadApplicationTempalte();
    }
  }
  return (
    <Drawer
      title="批量导入"
      placement="right"
      // closable={false}
      destroyOnClose={true}
      width={500}
      onClose={onClose}
      visible={visible}
    >
      <div className={styles.excel} >
        <div className={styles.left} >
          <div className={styles.download} onClick={downloadApplicationTempalte} >
            <div>
              <Icon component={DownloadSvg} />
            </div>
            <p style={{ fontWeight: 'bold' }} >Excel 模板下载</p>
            <p>点击图标下载模板</p>
          </div>
        </div>
        <div className={styles.right} >
          <Upload
            showUploadList={false}
            beforeUpload={(e) => { beforeUpload(e, 'xls') }}
            accept=".xlsx,.xls"
          >
            <div className={styles.upload} >
              <div>
                <Icon component={UploadSvg} />
              </div>
              <p style={{ fontWeight: 'bold' }} >Excel 上传</p>
              <p>点击图标上传Excel文件</p>
            </div>
          </Upload>
        </div>
      </div >
    </Drawer>
  );
};