// agv基础数据页面
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Button, Modal, Form, Input, message, Popconfirm, Tag} from 'antd';
import { useEffect, useRef, useState } from 'react';

import agvbasicInfoAPI from '@/api/agvbasicService'
const AgvPoint = () => {


    // 2.定义编辑/新增的弹窗

    const [isModalOpen, setIsModalOpen] = useState(false);
    //   3.定义表单
    const [typeForm] = Form.useForm();
    const [modelTitle, setModelTitle] = useState<string>();
    const actionRef = useRef<ActionType>();

    // 1.定义列
    const columns: ProColumns<AgvbasicInfoTypes.Info>[] = [
        {
            title: 'id',
            dataIndex: 'id',
            tip: '规则名称是唯一的 key',
            hideInSearch: true,
            hideInTable: true,

        },
        {
            title: '点位名称',
            dataIndex: 'name',
            ellipsis: true,
            align: 'center'
        },

        {
            title: '点位编码',
            dataIndex: 'code',
            hideInSearch: true,
            ellipsis: true,
            align: 'center'
        },
        {
            title: '操作',
            valueType: 'option',
            key: 'option',
            align: 'center',
            // 4.操作内有两个按钮
            render: (_, record) => [
                <Button
                    key="edit"
                    type="primary" ghost
                    onClick={async () => {
                        setIsModalOpen(true);
                        setModelTitle('编辑点位');
                        const copyFormData = JSON.parse(JSON.stringify(record));
                        typeForm.setFieldsValue(copyFormData);
                    }}
                >编辑
                </Button>,

                // 删除
                <Popconfirm
                    key="del"
                    title="确定要删除此条数据吗？"
                    onConfirm={() => {

                        const EnablejsonData: AgvbasicInfoTypes.Info = {
                            id: record.id,
                            name: '',
                            code: ''
                        };

                        agvbasicInfoAPI.Del(EnablejsonData).then((r: MyResponse.Content) => {
                            if (r.statusCode === 200) {
                                message.success(r.statusCode === 200 ? '删除成功' : r.message);
                                actionRef.current?.reload()
                            }
                        });
                    }}
                    onCancel={() => {
                        message.info('已取消删除');
                    }}
                    okText="确认"
                    cancelText="关闭"
                >
                    <Button type="primary" danger ghost>删除</Button>
                </Popconfirm>,
            ]

        },
    ];

    useEffect(() => {

    }, []);



    // 7.定义表单提交
    //  表单提交
    const OnSubmit = async (values: AgvbasicInfoTypes.Info) => {

        if (values.id) {
            const response = await agvbasicInfoAPI.Update(values);
            if (response.statusCode === 200) {
                message.success('修改成功');
                actionRef.current?.reload();
                setIsModalOpen(false);
            } else {
                message.error(JSON.stringify(response.errors) || '修改失败');
            }
        } else {
            const response = await agvbasicInfoAPI.Add(values);
            console.log('response', response);
            if (response.statusCode === 200) {
                message.success('添加成功');
                actionRef.current?.reload();
                setIsModalOpen(false);
            } else {
                message.error(JSON.stringify(response.errors) || '添加失败');
            }
        }
    };
    return (
        <>
            <ProTable<AgvbasicInfoTypes.Info>
                key="myTable"
                actionRef={actionRef}
                cardBordered
                request={async (params = {}) => {
                    const jsonData: AgvbasicInfoTypes.Page = {
                        pageIndex: params.current || 1,
                        pageSize: params.pageSize || 10,
                        name: params.name || '',
                        //   id: '',
                        //   code: ''
                    };
                    const response = await agvbasicInfoAPI.PagedList(jsonData);
                    if (response.statusCode === 200) {
                        return {
                            data: response.data.items,
                            success: true,
                            total: response.data.total,
                        };
                    } else {
                        return {
                            data: [],
                            success: false,
                            total: 0,
                        };
                    }
                }}
                rowKey="id"
                pagination={{
                    pageSize: 10,
                    showSizeChanger:false
                }}
                dateFormatter="string"
                headerTitle="点位列表"
                columns={columns}
                toolBarRender={() => [
                    <Button
                        key="button"
                        type="primary"
                        onClick={() => {
                            typeForm.resetFields();
                            setIsModalOpen(true);
                            setModelTitle('新增点位');

                        }}
                    >
                        新增点位
                    </Button>,
                ]}


            />
            {/* 弹窗 */}
            <Modal
                key="01"
                width={800}
                title={<Tag color="#cd201f">{modelTitle}</Tag>}
                open={isModalOpen}
                onCancel={() => {
                    setIsModalOpen(false);
                }}
                footer={[
                    <Button
                        key="back"
                        onClick={() => {
                            setIsModalOpen(false);

                        }}
                    >
                        返回
                    </Button>,
                    <Button key="submit" form="agvbasicForm" type="primary" htmlType="submit">
                        提交
                    </Button>,
                ]}
            >
                {/* 弹窗内的表单 */}
                <Form
                    form={typeForm}
                    name="basic"
                    id="agvbasicForm"
                    labelAlign='right'
                    // lCol={{ span: 4 }}
                    wrapperCol={{ span: 12 }}
                    onFinish={OnSubmit}
                    autoComplete="off"
                >
                    <Form.Item label="id" name="id" hidden>
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="点位名称"
                        name="name"
                        rules={[{ required: true, message: '此项为必填项!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item label="点位编码" name="code" rules={[{ required: true, message: '此项为必填项!' }]} >
                        <Input />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}

export default AgvPoint