import React, { useEffect, useState } from 'react';
import { Button, Modal, Table } from 'antd';
import { outFlowDetailApi, OutItem } from '../api';
import useInitial from '@/hooks/useInitail';
import moment from 'moment';

const { Column } = Table;
interface Props {
  visible?:boolean
  setVisible:Function
  item?:any
}
export default function Index(props:Props) {
  const { visible, setVisible, item } = props;
  const [delay, setDelay] = useState(true);
  const { data, setParams, loading } = useInitial(outFlowDetailApi, [], {}, delay);

  useEffect(() => {
    if (visible && item?.poolIds) {
      setParams({ min: undefined, max: undefined, date: undefined, outCnt: undefined, ...item }, true);
      setDelay(false);
    } else {
      setVisible();
    }
  }, [visible]);

  return (
    <Modal
      title="出库详情"
      width={1000}
      visible={visible}
      maskClosable={false}
      onCancel={() => setVisible()}
      footer={[
        <Button onClick={() => setVisible()}>取消</Button>
      ]}
    >
      <Table
        dataSource={data}
        loading={loading}
        rowKey={(v: OutItem) => `${v.partId}`}
        pagination={false}
        scroll={{ y: 400 }}
      >
        <Column title="配件名称" dataIndex="partName" />
        <Column title="配件编码" dataIndex="partCode" />
        <Column title="出库数量" dataIndex="partCnt" />
        <Column title="出库类型" dataIndex="typeName" />
        <Column title="服务站名称" dataIndex="shopName" />
        <Column title="出库时间" render={r => moment(r.outTime).format('YYYY-MM-DD HH:mm:ss')} />
      </Table>
    </Modal>
  );
}