import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import { Button, message, Space, Modal, Form, Input, Alert ,Popconfirm, InputNumber } from 'antd';
import { useRef, useState,useEffect } from 'react';
import request from 'umi-request';
import Api from "@/api/kepService"

export default () => {
    const actionRef = useRef<ActionType>();
    const [current, setSurrent] = useState({});
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [form] = Form.useForm();
    var timer = 0;

    const columns: ProColumns[] = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            hideInSearch: true,
        },
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '代码',
            dataIndex: 'code',
            key: 'code',
        },
        {
            title: '最小区间值',
            dataIndex: 'minLimitValue',
            key: 'minLimitValue',
            hideInSearch: true,
        },
        {
            title: '最大区间值',
            dataIndex: 'maxLimitValue',
            key: 'maxLimitValue',
            hideInSearch: true,
        },
        {
            title: '操作',
            valueType: 'option',
            key: 'option',
            render: (text, record, _, action) => [
                <a
                    key="editable"
                    onClick={() => {
                        setSurrent(record);
                        form.setFieldsValue(record);
                        setIsModalVisible(true);
                    }}
                >
                    编辑
                </a>,
                <Popconfirm
                key='del'
                    title="确定要删除吗？"
                    onConfirm={async () =>{
                        const response = await Api.Del(record.id);
                        if (response.data) {
                            message.success('删除成功');
                            actionRef.current?.reload();
                        } else {
                            message.error(response.msg || '删除失败');
                        }
                    }}
                    okText="确定"
                    cancelText="取消"
                >
                    <a>删除</a>
                </Popconfirm>
            ],
        },
    ];

    return (
        <>
            <ProTable
                columns={columns}
                actionRef={actionRef}
                cardBordered
                rowKey="id"
                request={async (params = {}, sort, filter) => {
                    console.log(sort, filter);
                    const response = await Api.Getdatavalarmlimitpage({
                        pageIndex: params.current || 1,
                        pageSize: params.pageSize || 10
                    });
                    if (response.statusCode === 200) {
                        return {
                            data: response.data.items,
                            success: true,
                            total: response.data.total
                        }
                    } else {
                        message.error(response.errors || '获取列表失败');
                        return {
                            data: [],
                            success: false,
                            total: 0
                        }
                    }
                }}
               
                search={{
                    labelWidth: 'auto',
                }}
                options={{
                    setting: {
                        listsHeight: 400,
                    },
                }}
                headerTitle="大屏配置"
                toolBarRender={() => [
                    <Button
                        key="button"
                        icon={<PlusOutlined />}
                        onClick={() => {
                            form.resetFields();
                            setIsModalVisible(true);
                        }}
                        type="primary"
                    >
                        新建
                    </Button>
                ]}
            />

            <Modal footer={null} title={current.id === '' ? '添加' : '编辑'} open={isModalVisible}
                onCancel={() => setIsModalVisible(false)}>
                <Form
                    name="basic"
                    form={form}
                    onFinish={async (item) => {
                        if (item.id) {
                            const response = await Api.Updatedatavalarmlimit(item);
                            if (response.data) {
                                message.success('更新信息成功');
                                setIsModalVisible(false);
                                actionRef.current?.reload();
                            } else {
                                message.error(response.msg || '更新信息失败');
                            }
                        } else {
                            const response = await Api.Adddatavalarmlimit(item);
                            if (response.data) {
                                message.success('创建成功');
                                setIsModalVisible(false);
                                actionRef.current?.reload();
                            } else {
                                message.error(response.msg || '创建失败');
                            }
                        }

                    }}
                >
                    <Form.Item label="id" name="id" hidden={true} >
                        <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.Item
                        label="最小区间值"
                        name="minLimitValue"
                        rules={[{ required: true, message: '请输入值！' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="最大区间值"
                        name="maxLimitValue"
                        rules={[{ required: true, message: '请输入值！' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item >
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </>

    );
};