import React, { useState,useEffect } from 'react';
import { Modal, Form, Input, Button, Select,InputNumber,Popconfirm } 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: (_, record) => [
          <Popconfirm
          type="primary"
          key="primary"
          title="确认删除吗？"
          okText="是"
          cancelText="否"
          onConfirm={async () => {
            props.deletattrvalue(record.id);
            setDataSource(dataSource.filter((item) => item.id !== record.id));
            // await deletegoodsattribute([record.id]).then((r) => {
            //   if (r.succeeded) {
            //     message.success('删除成功');
            //     actionRef.current.reloadAndRest();
            //   } else {
            //     message.error(r.errors);
            //   }
            // });
          }}
          onCancel={() => {}}
        >
          <a href="#">删除</a>
        </Popconfirm>
        ],
      },
]
useEffect(() => {
  console.log("props.values",props.values)
  if(props.values?.id){
    form.setFieldsValue({
      id:props.values?.id,
      attributeName:props.values?.attributeName,
      sort:props.values?.sort
    })
    setEditableRowKeys(props.values?.attributeValueList.map((item) => item.id))
    setDataSource(props.values?.attributeValueList)
  }else{
    form.setFieldsValue({
      id:'',
      attributeName:'',
      sort:0
    })
    setDataSource(props.values?.attributeValueList)
  }
}, [props.values]);
const headleOk=()=>{
  form
  .validateFields()
  .then((values) => {
    values.goodsAttributeValueList=dataSource
    console.log("dataSource",dataSource)
    console.log("values",values)
   
    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();
      }}
      maskClosable={false}
      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="sort" label="排序"  rules={[{ required: true, message: '请输入排序号' }]} >
          <InputNumber style={{width:'100%'}} />
        </Form.Item>
      </Form>
     
        <EditableProTable
        headerTitle={<span style={{fontSize:14}}><span style={{color:'red',marginRight: 3}}>*</span>属性值设置</span>}
        columns={columns}
        rowKey="id"
        value={dataSource}
        onChange={setDataSource}
        recordCreatorProps={{
          newRecordType: 'dataSource',
          record: () => ({
            id: Date.now(),
          }),
        }}
        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)
            props.deletattrvalue(key);
            // await deletegoodsattributevalue(key).then(r=>{

            // })
          },
          onChange: setEditableRowKeys,
        }}
      />
    </Modal>
  );
};

export default CreateForm;
