import ProTable  from '@ant-design/pro-table';
import { Modal,Space, Form,Button,Select,message,Popconfirm} from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import React, { useState,useRef } from 'react';
import CreateAction from './CreateAction';
import {
    gettechnologyactionList,
    addtechnologyaction,
    updatetechnologyaction,
    deletetechnologyaction
} from '../services';
const { Option, OptGroup } = Select;

    
const ActionForm = (props) => {
    const [currentRow , setcurrentRow ] =  useState([]);;
    const [dataSource, setDataSource] = useState([]);
    const actionRef = useRef();
    const [form] = Form.useForm();
    const [actionValueName,setactionValueName]=useState();
    const [createModalVisible, handleModalVisible] = useState(false);
    const options = {
      text:{value:'text',text: `text(字符串)`},
      textareaary:{value:'textareaary',text: `textarea(字符串数组)`},
      select:{ value: `select`, text: `enum(枚举)`},
      // money:{ value: `money`, text: `金额输入`},
      textarea:{ value: `textarea`, text: `text(文本域)`},
      // date:{ value: `date`, text: `日期`},
      // dateTime:{ value: `dateTime`, text: `日期时间`},
      // radio:{ value: `radio`, text: `单选框`},
      // radioButton:{ value: `radioButton`, text: `按钮单选框`},
      digit:{ value: `digit`, text: `int32(整型)`},
      switch:{ value: `switch`, text: `bool(布尔型)`},
    }
    const columns= [
        {
            title: '参数名称',
            dataIndex: 'actionName',
            width: '15%',
          },
      
          {
            title: '数据类型',
            key: 'actionType',
            dataIndex: 'actionType',
            valueType: 'select',
            width: '15%',
            valueEnum:options,
           
          },
          // {
          //   title: '类型值',
          //   dataIndex: 'actionValue',
          //   width: '15%',
          //   valueType:'select',
          //   valueEnum: {
          //     text:{
          //       text: '文本框',
          //       status: 'text',
          //     },
          //     select:{
          //       text: '下拉框',
          //       status: 'select',
          //     }
          //   }
          // },
          // {
          //   title: '单位',
          //   dataIndex: 'unit',
          //   width: '8%',
          // },
          // {
          //   title: '是否绑定物料',
          //   dataIndex: 'isBatch',
          //   width: '15%',
          //   valueEnum: {
          //     true:{
          //       text: '是',
          //       status: 'Success',
          //     },
          //     false:{
          //       text: '否',
          //       status: 'Processing',
          //     }
          //   }
          // },
          // {
          //   title: '排序',
          //   dataIndex: 'sort',
          //   valueType:'digit',
          //   width: '8%',
          // },
          {
            title: '操作',
            valueType: 'option',
            width: 200,
            render: (text, record, _, action) => [
              <a
                key="editable"
                onClick={() => {
                  handleModalVisible(true);
                  setcurrentRow(record);
                }}
              >
                编辑
              </a>,
                <Popconfirm
                type="primary"
                key="primary"
                title="确认删除吗？"
                okText="是"
                cancelText="否"
                onConfirm={() => {
                  handleRemove([record.id]);
                  actionRef.current?.reloadAndRest();
                }}
                onCancel={() => { }}
              >
                <a href="#">删除</a>
              </Popconfirm>,,
            ],
          },
    ]
    const onFinish= async (fields) => {
      console.log(fields)
      await addtechnologyaction(JSON.stringify(fields)).then((r) => {
        if (r.data) {
          message.success('添加成功');
         
        } else {
          message.error(r.errors);
        }
      });
      return true;
    }
    const handleUpdate=async (fields) => {
      await updatetechnologyaction(JSON.stringify(fields)).then((r) => {
        if (r.data) {
          message.success('修改成功');
         
        } else {
          message.error(r.errors);
        }
      });
      return true;
    }
    const handleRemove = async (ids) => {

      try {
        deletetechnologyaction(ids).then((r) => {
          if (r.data) {
            message.success('删除成功');
            actionRef.current.reloadAndRest();
          } else {
            message.error(r.errors);
          }
        });
        return true;
      } catch (error) {
        message.error('删除失败，请重试');
      }
    }
    return (
        <>
        <Modal
      title={'参数配置'}
      width={1140}
      visible={props?.actionFormModalVisible}
      bodyStyle={{ padding: '32px 40px 1px 48px' }}
      footer={null}
      onCancel={() => { 
        props?.onCancel();
      }}
      destroyOnClose
      maskClosable={false}
    >
        <ProTable rowKey="id"
        headerTitle="参数配置列表"
        actionRef={actionRef}
        pagination={false}
        search={false}
        toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              handleModalVisible(true);
              setcurrentRow({});
            }}
          >
            <PlusOutlined /> 新建
          </Button>,
        ]}
        columns={columns}
        request={async () => {
            var data = [];
            console.log(props.values.id)
            await gettechnologyactionList(props.values.id).then((r) => {
              data = r.data;
             
            });
            return {
              data: data,
              success: true,
            };
          }}
        >
        </ProTable>
        <CreateAction
        onFinish={async (value) => {
          var success = false;
          console.log(value)
          console.log(value.actionValue)
          value.productFunctionId=props.values.id;
         
          if (value.id) {
            success = await handleUpdate(value);
          } else {
            success = await onFinish(value);
          }
          if (success) {
            handleModalVisible(false);
            if (actionRef.current) {
              actionRef.current.reloadAndRest();
            }
          }
        }}
        onCancel={() => {
          setcurrentRow(undefined);
          handleModalVisible(false);
        }}
        createModalVisible={createModalVisible}
        actionValueName={actionValueName}
        values={currentRow || {}}
      />
        </Modal>
        </>
    );
};
export default ActionForm;