import {
  EditableProTable,
  ProColumns
} from '@ant-design/pro-table';
import React, { useState,useEffect } from 'react';
import { Button,Modal} from 'antd';
import {
    getgoodsattributevalue,
    deletegoodsattributevalue
} from '../service';
const CreateAttribute = (props) => {
    
    const [editableKeys, setEditableRowKeys] = useState([]);
    const [dataSource, setDataSource] = useState([]);
    const columns=[
        {
            title: '名称',
            dataIndex: 'attributeValue',
            formItemProps: (form, { rowIndex }) => {
              return {
                rules:
                  rowIndex > 1 ? [{ required: true, message: '此项为必填项' }] : [],
              };
            },
           
            width: '25%',
          },
          {
            title: '外键',
            dataIndex: 'waiKey',
            width: '15%',
          },
          {
            title: '排序',
            dataIndex: 'sort',
            valueType:'digit',
            width: '15%',
          },
          {
            title: '操作',
            valueType: 'option',
            width: '15%',
            render: () => {
              return null;
            },
          },
    ]
    useEffect( async() => {
        // await getgoodsattributevalue(props.attributeData).then(r=>{
        //     setDataSource(r.data);
        //   })
    }, [])
    return (
        <>
            <Modal
      title="添加属性值"
      width={840}
      visible={props.createattrModalVisible}
      bodyStyle={{ padding: '32px 40px 1px 48px' }}
      footer={null}
      onCancel={() => {
        props.onCancel();
      }}
      destroyOnClose
    >
        <EditableProTable
        headerTitle="属性列表"
        columns={columns}
        rowKey="id"
        request={async () => {
            var Data = [];
            var total=0;
            await getgoodsattributevalue(props.attributeid).then(r=>{
                Data=r.data
                total=r.data.length
                setDataSource(r.data);
                setEditableRowKeys(r.data.map((item)=>item.id))
            })
          return {
            data: Data,
            success: true,
            total: total,
          };
        }}
        value={dataSource}
        onChange={setDataSource}
        recordCreatorProps={{
          newRecordType: 'dataSource',
          record: () => ({
            id: Date.now(),
          }),
        }}
        toolBarRender={() => {
          return [
            <Button
              type="primary"
              key="save"
              onClick={() => {
                // dataSource 就是当前数据，可以调用 api 将其保存
                props.onFinish(dataSource)
                console.log(dataSource);
              }}
            >
              保存数据
            </Button>,
          ];
        }}
        editable={{
          type: 'multiple',
          editableKeys,
          actionRender: (row, config, defaultDoms) => {
            return [defaultDoms.delete,defaultDoms.Button];
          },
          onValuesChange: (record, recordList) => {
            setDataSource(recordList);
          },
          onDelete:async (key, row) =>{
            console.log(key)
            console.log(row)
            await deletegoodsattributevalue(key).then(r=>{

            })
          },
          onChange: setEditableRowKeys,
        }}
      />
      </Modal>
        </>
    )
}
export default CreateAttribute;