import React, { useState } from 'react';
import { Modal, Table, Button, Checkbox, Popconfirm, message, Descriptions } from 'antd';

// 示例供应商数据
const mockSuppliers = [
  {
    id: 1,
    name: '中山市合创展包装材料有限公司',
    region: '境内',
    creditCode: '910000000000000000',
    type: '中央企业',
    inStore: false, // 还没入库
  },
  {
    id: 2,
    name: '深圳市欧阳华斯电源有限公司',
    region: '境内',
    creditCode: '910000000000000000',
    type: '地方国有企业',
    inStore: true, // 已入库
  },
  {
    id: 3,
    name: '广东振兴塑胶机械有限公司',
    region: '境内',
    creditCode: '910000000000000000',
    type: '民营企业',
    inStore: false, // 还没入库
  },
];

const SupplierAddModal = ({ visible, onCancel, onOk, categoryInfo }) => {
  // 供应商数据（受控）
  const [suppliers, setSuppliers] = useState(mockSuppliers);
  // 已勾选的供应商 id
  const [selectedIds, setSelectedIds] = useState([]);

  // 选择供应商 checkbox 变化
  const handleSelect = (checked, id) => {
    setSelectedIds(checked
      ? [...selectedIds, id]
      : selectedIds.filter(i => i !== id)
    );
  };

  // “移除”操作
  const handleRemove = (id) => {
    setSuppliers(suppliers.map(s =>
      s.id === id ? { ...s, inStore: false } : s
    ));
    message.success('移除成功');
  };

  // 确认入库
  const handleOk = () => {
    // 这里可调接口，演示只做提示
    message.success(`成功入库供应商ID: ${selectedIds.join(', ')}`);
    setSelectedIds([]);
    onOk && onOk();
  };

  // 列表列
  const columns = [
    { title: '序号', dataIndex: 'id', align: 'center', width: 60, render: (t, r, i) => i + 1 },
    { title: '供应商名称', dataIndex: 'name', align: 'center' },
    { title: '境内/境外', dataIndex: 'region', align: 'center' },
    { title: '统一社会信用代码', dataIndex: 'creditCode', align: 'center' },
    { title: '供应商分类', dataIndex: 'type', align: 'center' },
    {
      title: '操作',
      align: 'center',
      render: (text, record) => {
        if (record.inStore) {
          return (
            <>
              <span style={{ color: '#aaa' }}>已入库</span>
              <Popconfirm
                title="确认移除该供应商？"
                onConfirm={() => handleRemove(record.id)}
                okText="确认"
                cancelText="取消"
              >
                <Button size="small" type="link" danger style={{ marginLeft: 6 }}>移除</Button>
              </Popconfirm>
            </>
          );
        }
        return (
          <Checkbox
            checked={selectedIds.includes(record.id)}
            onChange={e => handleSelect(e.target.checked, record.id)}
          >
            选择
          </Checkbox>
        );
      }
    }
  ];

  return (
    <Modal
      title="添加供应商"
      visible={visible}
      onCancel={onCancel}
      footer={[
        <Button key="ok" type="primary" onClick={handleOk}>确认入库</Button>,
        <Button key="cancel" onClick={onCancel}>取消</Button>,
      ]}
      width={820}
      bodyStyle={{ padding: 24 }}
      destroyOnClose
    >
      {/* 基本信息区 */}
      <div style={{ marginBottom: 18 }}>
        <Descriptions
          title="品类库基本信息"
          bordered
          column={2}
          size="small"
          style={{ marginBottom: 18, background: '#fff', borderRadius: 4 }}
          labelStyle={{ width: 110, fontWeight: 500 }}
        >
          <Descriptions.Item label="品类库名称">
            {categoryInfo?.name || '燃油'}
          </Descriptions.Item>
          <Descriptions.Item label="有效期至">
            {categoryInfo?.validDate || '2028-03-31'}
          </Descriptions.Item>
          <Descriptions.Item label="负责人">
            {categoryInfo?.manager || '李四'}
          </Descriptions.Item>
          <Descriptions.Item label="品类结构">
            {categoryInfo?.structure || '货物 燃料'}
          </Descriptions.Item>
        </Descriptions>
      </div>


      {/* 供应商表格 */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        padding: '8px 0 8px 0',
        fontSize: 16,
        fontWeight: 500,
      }}>
        <span>选择供应商</span>

      </div>
      <Table
        columns={columns}
        dataSource={suppliers}
        rowKey="id"
        pagination={false}
        bordered
      />
    </Modal>
  );
};

export default SupplierAddModal;
