import './index.scss';
import { Button, Cascader, Form, Radio, Table } from 'antd';
import EditableCell from '~/components/EditableCell';
import { useState } from 'react';
import { MinusOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
import { Uploader } from '~/components/uploader';
import RichText from '~/components/richText';
type EditableTableProps = Parameters<typeof Table>[0];
type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;

const RentAttr = () => {
  const typeList = [
    {
      label: '航拍无人机',
      value: 1,
    },
    {
      label: '行业无人机',
      value: 2,
    },
    {
      label: '挂载',
      value: 3,
    },
    {
      label: '配件',
      value: 4,
    },
  ];

  const attrTableColumns: (ColumnTypes[number] & {
    editable?: boolean;
    dataIndex?: string;
    inputType?: string;
    rules?: any;
    maxLength?: number;
  })[] = [
    {
      title: '参数名称',
      dataIndex: '',
      editable: true,
      align: 'center',
    },
    {
      title: '参数值',
      dataIndex: '',
      editable: true,
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: '',
      render: (_text: string, _record: any, index: number) => (
        <>
          {index === parameterTableData.length - 1 ? (
            <Button
              icon={<PlusOutlined />}
              type='primary'
              onClick={addParameterDataEvent}
              style={{ marginRight: '10px' }}
            ></Button>
          ) : (
            ''
          )}
          {index ? (
            <Button
              type='primary'
              icon={<MinusOutlined />}
              onClick={deleteParameterDataEvent}
            ></Button>
          ) : (
            ''
          )}
        </>
      ),
    },
  ];
  const columns = attrTableColumns.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record: any) => ({
        record,
        dataIndex: col.dataIndex,
        title: col.title,
        editing: col.editable,
        inputType: col.inputType,
        rules: col.rules,
      }),
    };
  });
  const [parameterTableData, setParameterTableData] = useState<any>([{ id: 1 }]);

  //商品参数新增
  const addParameterDataEvent = () => {
    setParameterTableData([...parameterTableData, { id: parameterTableData.length + 1 }]);
  };
  //商品参数删除
  const deleteParameterDataEvent = () => {};

  return (
    <div className='rent-attr'>
      <div className='rent-attr-title'>商品属性</div>
      <Form labelCol={{ span: 2 }} wrapperCol={{ span: 10 }}>
        <Form.Item label='商品类型'>
          <Radio.Group>
            {typeList.map((v) => (
              <Radio key={v.value} value={v.value}>
                {v.label}
              </Radio>
            ))}
          </Radio.Group>
        </Form.Item>
        <Form.Item label='商品型号'>
          <Cascader placeholder='请选择商品型号' />
        </Form.Item>
        <Form.Item label='商品参数'>
          <Form>
            <Table
              columns={columns as ColumnTypes}
              components={{
                body: {
                  cell: EditableCell,
                },
              }}
              dataSource={parameterTableData}
              bordered
              rowKey='id'
              pagination={false}
            ></Table>
          </Form>
        </Form.Item>
        <Form.Item label='商品图片'>
          <Uploader fileUpload listType='picture-card'>
            <UploadOutlined />
          </Uploader>
        </Form.Item>
        <Form.Item label='商品视频'>
          <Uploader fileUpload listType='picture-card'>
            <UploadOutlined />
          </Uploader>
        </Form.Item>
        <Form.Item label='商品详情页'>
          <RichText richTextContent='' />
        </Form.Item>
      </Form>
    </div>
  );
};
export default RentAttr;
