import React, {useState} from 'react';
import { PlusOutlined, DownloadOutlined, UploadOutlined } from '@ant-design/icons';
import { Card, Button } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import Filter from './components/Filter';
import List from './components/List';
import store from './store';
import { createStore } from '@/hooks/moz';
import ImportModal from './components/UploadExcel';
import UploadMoreModal from './components/UploadMoreModal';
import StorageFlowModal from './components/StorageFlowModal';

export const { Provider, useStore } = createStore(store);

function PartShop() {
  const { setImportVisible, fw, setVisible, setIsadd, fwS } = useStore();
  const [more, setMore] = useState(false);
  const [stock, setStock] = useState(false);
  const [islock, setIslock] = useState(false);
  const [storageFlowVisible, setStorageFlowVisible] = useState(false);

  return (
    <PageHeaderWrapper title={`服务站配件${fw ? `(霏微${fwS ? '(库存)' : ''})`: ''}`}>
      <Card>
        <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20 }}>
          <Filter />
          <div style={{ display: 'flex', alignItems: 'center'}}>
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => { setVisible(true); setIsadd(true); }}
            >
              新增
            </Button>
            {fw && (
            <Button
              icon={<UploadOutlined />}
              type="primary"
              onClick={() => setImportVisible(true)}
              style={{ marginLeft: 10 }}
            >
              导入
            </Button>
              )}
            {fw && (
            <Button
              icon={<UploadOutlined />}
              type="primary"
              onClick={() => { setImportVisible(true); setStock(true); }}
              style={{marginLeft: 10}}
            >
              调拨库存导入
            </Button>
              )}
            <Button
              type="primary"
              icon={<DownloadOutlined />}
              onClick={() => { setMore(true); setIslock(true); }}
              style={{marginLeft: 10}}
            >
              锁件批量导出
            </Button>
            <Button
              type="primary"
              icon={<DownloadOutlined />}
              onClick={() => setMore(true)}
              style={{marginLeft: 10}}
            >
              库存批量导出
            </Button>
            <Button
              type="primary"
              icon={<DownloadOutlined />}
              onClick={() => setStorageFlowVisible(true)}
              style={{marginLeft: 10}}
            >
              库房流水导出
            </Button>
          </div>
        </div>
        <List />
        <ImportModal stock={stock} setStock={setStock} />
        <UploadMoreModal
          visible={more}
          onCancel={() => setMore(false)}
          islock={islock}
          setIslock={setIslock}
        />
        <StorageFlowModal visible={storageFlowVisible} onCancel={() => setStorageFlowVisible(false)} />
      </Card>
    </PageHeaderWrapper>
  );
}

export default () => <Provider><PartShop /></Provider>;