import {
  DragSortTable,
  EditableProTable,
  type ProColumns,
  ProFormCheckbox,
  ProFormDigit,
  ProFormRadio,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
} from '@ant-design/pro-components';
import { Divider, Space, Typography } from 'antd';
import React from 'react';
import type {
  ProdWeightRangePricesDO,
  ProdWeightRangePricesSaveInfoVO,
} from '@/services/prod/prod-manager/rule';

const { Text, Title } = Typography;
type ValueConfig = {
  weightSwitch?: number;
  prodWeightConfig?: ProdWeightRangePricesSaveInfoVO;
};
interface ProdWeightConfigProps {
  value?: ValueConfig;
  onChange?: (value?: ValueConfig) => void;
}

const columns = [
  {
    title: '体型&体重',
    dataIndex: 'name',
    key: 'name',
    width: '20%',
    render: (text: string, record: any) => {
      return <ProFormText name={record.key} label={text} />;
    },
  },
  {
    title: '价格',
    dataIndex: 'price',
    key: 'price',
    width: '20%',
  },
  {
    title: '操作',
    dataIndex: 'price',
    key: 'price',
    width: '20%',
  },
];
const prodWeightConfig: React.FC<ProdWeightConfigProps> = (props) => {
  const { value } = props;
  const columns: ProColumns<ProdWeightRangePricesDO>[] = [
    {
      title: '体型&体重 *',
      dataIndex: 'weightRange',
      width: '30%',
      formItemProps: {
        rules: [
          {
            required: true,
            whitespace: true,
            message: '此项是必填项',
          },
        ],
      },
    },
    {
      title: '价格 *',
      dataIndex: 'price',
      width: '30%',
      formItemProps: {
        rules: [
          {
            required: true,
            whitespace: true,
            message: '此项是必填项',
          },
        ],
      },
    },

    {
      title: '操作',
      valueType: 'option',
      width: 250,
      render: () => {
        return null;
      },
    },
  ];
  return (
    <>
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          flexWrap: 'wrap',
          gap: 12,
        }}
      >
        <div>
          <Title level={4}>服务区域配置</Title>
          <Text type="secondary">
            默认服务区域为全城，开启此配置，可自定义可服务区域以及超区时的限制规则
          </Text>
        </div>
        <ProFormSwitch
          name="weightSwitch"
          label="应用配置"
          labelCol={{ span: 13 }}
          fieldProps={{
            onChange: (checked) => {
              props.onChange?.({
                weightSwitch: checked ? 1 : 0,
              });
            },
            checkedChildren: '开启',
            unCheckedChildren: '关闭',
          }}
        />
      </div>

      <Divider />
      <ProFormRadio.Group
        name="isWeightCharge"
        label="是否收费"
        options={[
          {
            label: '是',
            value: 0,
          },
          {
            label: '否',
            value: 1,
          },
        ]}
        rules={[
          {
            required: true,
            message: '请选择是否收费',
          },
        ]}
      />
      {/* <EditableProTable<ProdWeightRangePricesDO>
      rowKey="id"
      headerTitle="可拖拽编辑表格"
      maxLength={10}
      recordCreatorProps={{
        position: 'bottom',
        record: () => ({ id: Date.now().toString(), weightRange: '', price: 0, }),
      }}
      columns={columns}
      value={dataSource}
      onChange={setDataSource}
      editable={{
        type: 'multiple',
        editableKeys,
        onSave: async (rowKey, data) => {
          console.log('保存数据:', data);
        },
        onChange: setEditableRowKeys,
      }}
      // 拖拽排序配置
      dragSortKey="sort"
      onDragSortEnd={(newDataSource) => {
        console.log('排序后:', newDataSource);
        setDataSource(newDataSource as DataType[]);
      }}
    /> */}
    </>
  );
};

export default React.memo(prodWeightConfig);

// import { EditableProTable } from '@ant-design/pro-components';
// import type { ProColumns } from '@ant-design/pro-components';
// import { useState } from 'react';
// import { MenuOutlined } from '@ant-design/icons';

// interface DataType {
//   id: string;
//   name: string;
//   age: number;
//   email: string;
// }

// const DragEditableProTable: React.FC = () => {
//   const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
//   const [dataSource, setDataSource] = useState<DataType[]>([
//     { id: '1', name: '张三', age: 25, email: 'zhangsan@example.com' },
//     { id: '2', name: '李四', age: 30, email: 'lisi@example.com' },
//     { id: '3', name: '王五', age: 28, email: 'wangwu@example.com' },
//   ]);

//   const columns: ProColumns<DataType>[] = [
//     {
//       title: '排序',
//       dataIndex: 'sort',
//       width: 60,
//       render: () => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />,
//     },
//     {
//       title: '姓名',
//       dataIndex: 'name',
//       formItemProps: {
//         rules: [{ required: true, message: '请输入姓名' }],
//       },
//     },
//     {
//       title: '年龄',
//       dataIndex: 'age',
//       valueType: 'digit',
//     },
//     {
//       title: '邮箱',
//       dataIndex: 'email',
//       valueType: 'text',
//     },
//     {
//       title: '操作',
//       valueType: 'option',
//       width: 200,
//       render: (text, record, _, action) => [
//         <a
//           key="editable"
//           onClick={() => {
//             action?.startEditable?.(record.id);
//           }}
//         >
//           编辑
//         </a>,
//         <a
//           key="delete"
//           onClick={() => {
//             setDataSource(dataSource.filter((item) => item.id !== record.id));
//           }}
//         >
//           删除
//         </a>,
//       ],
//     },
//   ];

//   return (
//     <EditableProTable<DataType>
//       rowKey="id"
//       headerTitle="可拖拽编辑表格"
//       maxLength={10}
//       recordCreatorProps={{
//         position: 'bottom',
//         record: () => ({ id: Date.now().toString(), name: '', age: 0, email: '' }),
//       }}
//       columns={columns}
//       value={dataSource}
//       onChange={setDataSource}
//       editable={{
//         type: 'multiple',
//         editableKeys,
//         onSave: async (rowKey, data) => {
//           console.log('保存数据:', data);
//         },
//         onChange: setEditableRowKeys,
//       }}
//       // 拖拽排序配置
//       dragSortKey="sort"
//       onDragSortEnd={(newDataSource) => {
//         console.log('排序后:', newDataSource);
//         setDataSource(newDataSource as DataType[]);
//       }}
//     />
//   );
// };

// export default DragEditableProTable;
