import React, { useEffect, useState } from 'react';
import {Button, Modal, Table} from 'antd';
import {useStore} from '../index';
import { outFlowApi, OutItem } from '../api';
import usePagination from '@/hooks/usePagination';

const {Column} = Table;

export default function Index() {
  const {outVisible, setOutVisible, item} = useStore();
  const [delay, setDelay]= useState(true);
  const { list, setParams, loading, paginationConfig } = usePagination(outFlowApi, [], {delay});

  useEffect(() => {
    if (outVisible && item?.poolIds) {
      setParams({poolIds: item.poolIds}, true);
      setDelay(false);
    }
  }, [outVisible]);

  return (
    <Modal
      title={`${item?.partName}滚动90天出库流水`}
      width={1000}
      visible={outVisible}
      maskClosable={false}
      onCancel={() => setOutVisible(false)}
      footer={[
        <Button onClick={() => setOutVisible(false)}>取消</Button>
      ]}
    >
      <Table
        dataSource={list}
        loading={loading}
        pagination={paginationConfig}
        rowKey={(v: OutItem) => `${v.partId}`}
      >
        <Column title="配件编码" dataIndex="partCode" />
        <Column title="配件名称" dataIndex="partName" />
        <Column title="出库数量" dataIndex="partCnt" />
        <Column title="出库类型" dataIndex="typeName" />
        <Column title="服务站名称" dataIndex="shopName" />
        <Column title="出库时间" dataIndex="outTime" />
      </Table>
    </Modal>
  );
}