import React, { useState } from "react";
import { Modal, Button, Select, Input, Table, message } from "antd";
import SupplierSelectModal from "./SupplierSelectModal"; // 上面生成的组件

const { Option } = Select;

interface Supplier {
  id: number;
  name: string;
  unit: string;
  dept: string;
  category: string;
}

interface CreateBlacklistModalProps {
  visible: boolean;
  onOk: () => void;
  onCancel: () => void;
}

const initialSuppliers: Supplier[] = [
  {
    id: 1,
    name: "中山市合创展包装材料有限公司",
    unit: "采购部",
    dept: "采购部",
    category: "船用燃油",
    lastEval: "D",
    lastEvalDate: "2025-02-20",
  },
  {
    id: 2,
    name: "广东振兴塑胶机械有限公司",
    unit: "采购部",
    dept: "采购部",
    category: "船用燃油",
    lastEval: "D",
    lastEvalDate: "2025-02-20",
  }
];

const CreateBlacklistModal: React.FC<CreateBlacklistModalProps> = ({
  visible, onOk, onCancel
}) => {
  const [selectVisible, setSelectVisible] = useState(false);
  const [suppliers, setSuppliers] = useState<Supplier[]>(initialSuppliers);
  const [type, setType] = useState("黑名单");
  const [reason, setReason] = useState("");

  // 删除已选供应商
  const removeSupplier = (id: number) => {
    setSuppliers(suppliers.filter(s => s.id !== id));
  };

  // 选择供应商
  const handleSelectOk = (selected: Supplier[]) => {
    setSuppliers(selected);
    setSelectVisible(false);
  };

  // 提交
  const handleSubmit = () => {
    if (!reason.trim()) {
      message.error("请输入黑灰名单原因！");
      return;
    }
    message.success("提交成功（此处为前端示例）");
    onOk?.();
  };

  const columns = [
    { title: "供应商名称", dataIndex: "name", align: "center" },
    { title: "准入部门", dataIndex: "unit", align: "center" },
    { title: "准入时间", dataIndex: "accessTime", align: "center", render: () => "2023-04-20 13:00" },
    { title: "准入品类", dataIndex: "category", align: "center" },
    { title: "最近一次评价", dataIndex: "lastEval", align: "center" },
    { title: "评价时间", dataIndex: "lastEvalDate", align: "center" },
    {
      title: "选择",
      dataIndex: "option",
      align: "center",
      render: (_: any, record: Supplier) => (
        <Button type="link" onClick={() => removeSupplier(record.id)}>移除</Button>
      )
    }
  ];

  return (
    <>
      <Modal
        title={<div style={{ textAlign: "center", fontWeight: 700, fontSize: 28 }}>供应商黑灰名单申请</div>}
        visible={visible}
        onCancel={onCancel}
        width={900}
        footer={null}
        destroyOnClose
        bodyStyle={{ padding: "36px 36px 16px" }}
      >
        <Button type="primary" style={{ marginBottom: 18 }} onClick={() => setSelectVisible(true)}>
          选择供应商
        </Button>
        <Table
          columns={columns}
          dataSource={suppliers}
          rowKey="id"
          bordered
          pagination={false}
        />

        <div style={{ margin: "32px 0 8px 0" }}>
          <Select style={{ width: 200, marginRight: 16 }} value={type} onChange={setType}>
            <Option value="黑名单">黑名单</Option>
            <Option value="灰名单">灰名单</Option>
          </Select>
        </div>
        <div>
          <Input.TextArea
            placeholder="进入黑灰名单原因（必须填写）"
            rows={4}
            value={reason}
            onChange={e => setReason(e.target.value)}
            style={{ width: "100%", marginTop: 8 }}
          />
        </div>
        <div style={{ marginTop: 28, textAlign: "center" }}>
          <Button type="primary" style={{ marginRight: 24 }} onClick={handleSubmit}>提交审批</Button>
          <Button onClick={onCancel}>取消</Button>
        </div>
      </Modal>
      <SupplierSelectModal
        visible={selectVisible}
        selectedSuppliers={suppliers}
        onOk={handleSelectOk}
        onCancel={() => setSelectVisible(false)}
      />
    </>
  );
};

export default CreateBlacklistModal;
