import React, { useState,useEffect } from 'react';
import { Modal, Form, Input, Button, Select,InputNumber,TreeSelect } from 'antd';
import {
  EditableProTable
} from '@ant-design/pro-table';
const CreateForm = (props) => {
  const [dataSource, setDataSource] = useState([]);
  const [editableKeys, setEditableRowKeys] = useState([]);
  const [form] = Form.useForm();
  const columns=[
    {
        title: '名称',
        dataIndex: 'attributeValue',
        formItemProps: (form, { rowIndex }) => {
          return {
            rules:
              rowIndex > 1 ? [{ required: true, message: '此项为必填项' }] : [],
          };
        },
       
        width: '25%',
      },
      {
        title: '排序',
        dataIndex: 'sort',
        valueType:'digit',
        width: '15%',
      },
      {
        title: '操作',
        valueType: 'option',
        width: '15%',
        render: () => {
          return null;
        },
      },
]
const headleOk=()=>{
  form
  .validateFields()
  .then((values) => {
    // console.log("dataSource",dataSource)
    // console.log("values",values)
    values.goodsAttributeValueList=dataSource
    props.onFinish(values)
  })
}
  return (
    <Modal
      title={props.values.id ? '编辑' : '新建'}
      width={640}
      visible={props.createModalVisible}
      bodyStyle={{ padding: '32px 40px 1px 48px' }}
      // footer={null}
      okText="确认"
      cancelText="取消"
      onOk={headleOk}
      onCancel={() => {
        props.onCancel();
      }}
      destroyOnClose
    >
      <Form
        labelCol={{ span: 4 }}
        layout="horizontal"
        // initialValues={props.values}
        form={form}
        // onFinish={props.onFinish}
      >
        <Form.Item name="id" hidden={true}>
          <Input />
        </Form.Item>
        <Form.Item name="attributeName" label="属性名称" rules={[{ required: true,max:50 }]}>
          <Input />
        </Form.Item>

        {/* <Form.Item name="goodsTypeId" label="商品类型" rules={[{ required: true }]}>
          <TreeSelect
            allowClear
            showSearch
            multiple
            treeCheckable= {true}
            showCheckedStrategy='SHOW_ALL'
            style={{ width: '100%' }}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            treeData={props.treeDatas}
            placeholder="请选择商品类型"
            treeDefaultExpandAll
          />
        </Form.Item> */}
        <Form.Item name="sort" label="排序"  rules={[{ required: true, message: '请输入排序号' }]} >
          <InputNumber style={{width:'100%'}} />
        </Form.Item>
        {/* <Form.Item>
        <Button  htmlType="button" style={{float:'right',left:10}} onClick={props.onCancel} >
                        取消
                    </Button>
        <Button type="primary" htmlType="submit" style={{float:'right'}} >
                        保存
                    </Button>
        </Form.Item> */}
      </Form>
     
        <EditableProTable
        headerTitle={<span style={{fontSize:14}}><span style={{color:'red',marginRight: 3}}>*</span>属性值设置</span>}
        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 CreateForm;
