import { PlusOutlined } from '@ant-design/icons';
import type {
    ActionType,
    ProColumns,
    ProFormInstance,
} from '@ant-design/pro-components';
import {
    ProCard,
    ProTable,
} from '@ant-design/pro-components';
import { Button, Form, message, Modal, Popconfirm, Select, Space } from 'antd';
import { useState, useRef } from 'react';
//引入接口
import godownApi from '@/api/godown/service'

export default () => {
    const [fromType, setFromType] = useState<any>('table')
    const ref = useRef<ProFormInstance>();
    const actionRef = useRef<ActionType>();
    const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
    const Reolod = () => {
        ref.current?.resetFields()
        actionRef.current?.reload()
    }
    const columns: ProColumns<godownTypes.output>[] = [
        {
            title: '主键',
            dataIndex: 'id',
            search: false,
            formItemProps: {
                hidden: true
            }
        },
        {
            title: '名称',
            dataIndex: 'name',
            search: true
        },
        {
            title: '编码',
            dataIndex: 'code',
            search: true
        },
        {
            title: '操作',
            valueType: 'option',
            fixed: 'right',
            render: (text, row) => [
                <Space key={+new Date() + Math.random()}>
                    <Button type='primary' size='small'
                        onClick={() => {
                            setFromType('form')
                            ref.current?.setFieldsValue(row)
                        }} key={+new Date() + Math.random()} target="_blank" rel="noopener noreferrer">
                        设置物料
                    </Button>
                    <Button type='primary' size='small'
                        onClick={() => {
                            setFromType('form')
                            ref.current?.setFieldsValue(row)
                        }} key={+new Date() + Math.random()} target="_blank" rel="noopener noreferrer">
                        编辑
                    </Button>
                    <Popconfirm
                        key="del"
                        title="确定要删除此条数据吗？"
                        onConfirm={() => {

                            godownApi.Del(row).then((res: MyResponse.Content) => {
                                if (res.statusCode === 200) {
                                    message.info("删除成功!");
                                    Reolod()
                                } else {
                                    message.error(res.errors);
                                }
                            })
                        }}
                        onCancel={() => {
                            message.info('已取消删除');
                        }}
                        okText="确认"
                        cancelText="关闭"
                    >
                        <Button type='primary' danger size='small'>
                            删除
                        </Button>
                    </Popconfirm>
                </Space>
            ],
        },
    ];

    return (
        <>
            <ProTable<godownTypes.output>
                columns={columns}
                type={fromType as 'table'}
                formRef={ref}
                actionRef={actionRef}
                onSubmit={(params: any) => {
                    console.log(params);
                    if (fromType === 'form') {
                        if (params.id) {
                            godownApi.Update(params).then((res: MyResponse.Content) => {
                                if (res.statusCode === 200) {
                                    message.info("更新成功!");
                                    setFromType('table')
                                    Reolod()
                                } else {
                                    message.error(res.errors);
                                }
                            })
                        } else {
                            godownApi.Add(params).then((res: MyResponse.Content) => {
                                if (res.statusCode === 200) {
                                    message.info("新增成功!");
                                    setFromType('table')
                                    Reolod()
                                } else {
                                    message.error(res.errors);
                                }
                            })
                        }
                    }
                }}
                form={{
                    ignoreRules: true,// 自定义提交按钮的属性
                    submitter: {
                        onReset: () => {
                            ref.current?.resetFields()
                            setFromType("table")
                        },
                        searchConfig: { resetText: fromType === 'form' ? '返回' : '重置', submitText: fromType === 'form' ? '提交' : '查询' },
                    }
                }}
                request={async (params = {}) => {
                    const jsonData: godownTypes.queryPage = {
                        pageIndex: params.current || 1,
                        pageSize: params.pageSize || 10,
                        name: params.name || '',
                    };
                    const response = await godownApi.PagedList(jsonData);
                    if (response.statusCode === 200) {
                        return {
                            data: response.data.items,
                            success: true,
                            total: response.data.total,
                        };
                    } else {
                        return {
                            data: [],
                            success: false,
                            total: 0,
                        };
                    }
                }}
                pagination={{
                    pageSize: 5,
                    showSizeChanger: false
                }}
                rowKey="id"
                dateFormatter="string"
                headerTitle="列表"
                toolBarRender={() => [
                    <Button key="3" type="primary" onClick={() => {
                        setFromType('form');
                    }}>
                        <PlusOutlined />
                        新建
                    </Button>,
                ]}
            />
            <Modal
                maskClosable={false}
                key="01"
                width={800}
                title={'设置物料'}
                open={isModalOpen}
                onCancel={() => {
                    setIsModalOpen(false);
                }}
                footer={[
                    <Button
                        key="back"
                        onClick={() => {
                            setIsModalOpen(false);
                        }}
                    >
                        返回
                    </Button>,
                    <Button key="submit" form="materialsForm" type="primary" htmlType="submit">
                        提交
                    </Button>,
                ]}
            >
                <Form>
                    <Form.Item >
                        <Select>
                            
                        </Select>
                    </Form.Item>
                </Form>

            </Modal>
        </>
    );
};