import * as React from 'react';
import { useState, useMemo, useRef } from 'react';
import DrawerPro from '@/components/DrawerPro';
import AutoTable from '@/components/AutoTable';
import PremButton from '@/components/PremButton';
import getcolumns from './columns';
import { useRequest } from 'ahooks';
import { doFetch } from '@/utils/doFetch';
import AutoTables from '@/components/AutoTable/mtable';

function ExtraTable({ spareStockId }) {
  return (
    <div style={{ padding: '4px 4px 4px 36px', backgroundColor: '#cccccc' }}>
      <AutoTables
        path={'/sparepart/spareSupplierStock/queryBySpareStockId'}
        extraparams={{ spareStockId: spareStockId }}
        pagination={false}
        resizeable={false}
        columns={[
          { title: '供应商编号', dataIndex: 'supplierNo', key: 'supplierNo' },
          { title: '供应商名称', dataIndex: 'supplierName', key: 'supplierName' },
          { title: '库存数量', dataIndex: 'actualStock', key: 'actualStock', hideInSearch: true },
        ]}
      />
    </div>
  );
}

function Stock(props) {
  const actionRef = useRef();
  const pathconfig = useMemo(() => {
    let pathconf = getcolumns()?.pathconfig ?? {};
    return pathconf;
  }, []);

  const columns = useMemo(() => {
    let defcolumn = getcolumns()?.columns;
    return defcolumn;
  }, []);

  return (
    <div style={{ position: 'relative' }}>
      <AutoTable
        pagetitle={<h3 className="page-title">备件库存</h3>}
        columns={columns}
        actionRef={actionRef}
        path={pathconfig?.list || '/ngic-auth/sysUser/query/page'}
        resizeable={false}
        expandable={{
          expandedRowRender: (record) => <ExtraTable spareStockId={record?.id} />,
        }}
      />
    </div>
  );
}

export default Stock;