import React, { useState } from 'react'
import { Button, Table, Input } from '@alifd/next';

export default function DesignPic() {
  // 添加状态管理表格数据
  const [tableData, setTableData] = useState(() => {
    const result = [];
    for (let i = 0; i < 5; i++) {
      result.push({
        title: { name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible` },
        id: 100306660940 + i,
        time: 2e3 + i,
        // 添加名称和标签字段
        picName: '',
        picLabel: ''
      });
    }
    return result;
  });

  const pic_render = (value: any, index: number, record: any) => {
    return (
      <img className='size-20' src={record.url} alt={record.title} />
    );
  }

  // 修改图片名称渲染函数
  const name_render = (value: any, index: number, record: any) => {
    return <>
      <Input.TextArea
        value={record.picName}
        onChange={(value) => handleNameChange(value, index)}
        composition
        placeholder={'请输入图片名称'}
      />
    </>
  };

  // 修改图片标签渲染函数
  const label_render = (value: any, index: number, record: any) => {
    return <>
      <Input.TextArea
        value={record.picLabel}
        onChange={(value) => handleLabelChange(value, index)}
        composition
        placeholder={'请输入图片标签'}
      />
    </>
  };

  // 添加名称变化处理函数
  const handleNameChange = (value: string, index: number) => {
    const newData = [...tableData];
    newData[index].picName = value;
    setTableData(newData);
  };

  // 添加标签变化处理函数
  const handleLabelChange = (value: string, index: number) => {
    const newData = [...tableData];
    newData[index].picLabel = value;
    setTableData(newData);
  };

  const option_render = (value: any, index: number, record: any) => {
    return (
      <a className='text-red-600'>
        删除
      </a>
    );
  };

  return (
    <div className='w-3xl h-fit'>
      <Button>按钮</Button>
      <Table dataSource={tableData}>
        <Table.Column title="图片" cell={pic_render} />
        <Table.Column title="图片名称" cell={name_render} />
        <Table.Column title="图片标签" cell={label_render} />
        <Table.Column title="操作" cell={option_render} />
      </Table>
    </div>
  )
}