import SelectGoodsTable from '@/pages/capital/ReceiveRules/component/SelectGoodsTable';
import { Button, Card, Popconfirm, Row, Table } from 'antd';
import React, { useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import RenderGoodsSpec from '@/pages/capital/components/RenderGoodsSpec';

const Column = Table.Column;

interface GoodsProps {
  onChange?: Function;
  value?: any;
  multiple?: boolean;
  disabled?: boolean;
}
function RenderSelectGoos({ onChange, value = [], multiple, disabled }: GoodsProps) {
  const [goodsModal, setGoodsModal] = useState({ visible: false });
  function deleteItem(code: string) {
    const newData = value.filter((i: any) => i.code !== code);
    onChange && onChange(newData);
  }

  return (
    <Card>
      {!disabled ? (
        <Row justify="end" style={{ marginBottom: 10 }}>
          <Button type="primary" icon={<PlusOutlined />} onClick={() => setGoodsModal({ visible: true })}>新增</Button>
        </Row>
      ) : null}
      <Table
        dataSource={value}
        pagination={multiple ? undefined : false}
        // loading={loading}
        bordered={false}
        size="small"
        rowKey="code"
      >
        <Column title="物品名称" dataIndex="name" />
        <Column title="物品编码" dataIndex="code" />
        <Column
          title="型号规格"
          dataIndex="spec"
          width="16%"
          ellipsis
          render={(text, record) => text && <RenderGoodsSpec specList={JSON.parse(text)} />}
        />
        <Column
          align="center"
          title="操作"
          // width={400}
          render={(value, record) => {
            return (
              <>
                <Popconfirm title="确认删除?" onConfirm={() => deleteItem(value.code)}>
                  {!disabled && (
                    <Button type="link">
                      删除
                    </Button>
                  )}
                </Popconfirm>
              </>
            );
          }}
        />
      </Table>
      <SelectGoodsTable
        multiple={multiple}
        visible={goodsModal.visible}
        onCancel={() => setGoodsModal({ visible: false })}
        onChange={(v) => onChange && onChange(v)}
      />
    </Card>
  );
}
export default RenderSelectGoos;