/**
 * KRA - Menu Parameters Configuration Component
 * Configure menu route parameters
 */
import React from 'react';
import { Table, Button, Input, Select, Space } from 'antd';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';

export interface MenuParameter {
  ID?: number;
  type: string;
  key: string;
  value: string;
}

interface MenuParamsProps {
  value?: MenuParameter[];
  onChange?: (value: MenuParameter[]) => void;
}

const MenuParams: React.FC<MenuParamsProps> = ({ value = [], onChange }) => {
  // 添加参数
  const handleAdd = () => {
    const newParams = [...value, { type: 'query', key: '', value: '' }];
    onChange?.(newParams);
  };

  // 删除参数
  const handleDelete = (index: number) => {
    const newParams = [...value];
    newParams.splice(index, 1);
    onChange?.(newParams);
  };

  // 更新参数
  const handleUpdate = (index: number, field: keyof MenuParameter, fieldValue: string) => {
    const newParams = [...value];
    newParams[index] = { ...newParams[index], [field]: fieldValue };
    onChange?.(newParams);
  };

  const columns = [
    {
      title: '参数类型',
      dataIndex: 'type',
      width: 120,
      render: (_: any, record: MenuParameter, index: number) => (
        <Select
          value={record.type}
          onChange={(v) => handleUpdate(index, 'type', v)}
          style={{ width: '100%' }}
          size="small"
        >
          <Select.Option value="query">query</Select.Option>
          <Select.Option value="params">params</Select.Option>
        </Select>
      ),
    },
    {
      title: '参数key',
      dataIndex: 'key',
      width: 150,
      render: (_: any, record: MenuParameter, index: number) => (
        <Input
          value={record.key}
          onChange={(e) => handleUpdate(index, 'key', e.target.value)}
          placeholder="请输入参数key"
          size="small"
        />
      ),
    },
    {
      title: '参数值',
      dataIndex: 'value',
      render: (_: any, record: MenuParameter, index: number) => (
        <Input
          value={record.value}
          onChange={(e) => handleUpdate(index, 'value', e.target.value)}
          placeholder="请输入参数值"
          size="small"
        />
      ),
    },
    {
      title: '操作',
      width: 80,
      render: (_: any, __: MenuParameter, index: number) => (
        <Button
          type="text"
          danger
          size="small"
          icon={<DeleteOutlined />}
          onClick={() => handleDelete(index)}
        />
      ),
    },
  ];

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Space>
          <span style={{ fontWeight: 600 }}>菜单参数配置</span>
          <Button type="primary" size="small" icon={<PlusOutlined />} onClick={handleAdd}>
            新增菜单参数
          </Button>
        </Space>
      </div>
      <Table
        dataSource={value}
        columns={columns}
        rowKey={(_, index) => `param-${index}`}
        pagination={false}
        size="small"
        bordered
        locale={{ emptyText: '暂无参数配置' }}
      />
    </div>
  );
};

export default MenuParams;
