import {
    ProFormInstance,
    ProTable,
    ActionType
} from '@ant-design/pro-components';
import { message, Modal, Select,Tag } from 'antd';
import { useRef, useEffect } from 'react';
import { findOperatorDevicePage } from '@/services/operator/index';



export default ({ values, setModalVisit, modalVisit }) => {
    const actionRef = useRef<ActionType>();
    useEffect(() => {
        if (actionRef.current) {
            actionRef.current.reload();
        }
    }, [values]);


    const columns: any = [
        {
            title: 'ID',
            dataIndex: 'id',
            valueType: 'text',
            search: false,
            width: 30
        },
        {
            title: '商户信息',
            dataIndex: 'merchantId',
            valueType: 'text',
            width: 150,
            search: false,
            render: (_: any, record: any) => {
                return <div>
                    <div>商户ID：{record?.merchantId}</div>
                    <div>商户名称：{record?.merchantName}</div>
                    <div>商户电话：{record?.merchantPhone}</div>
                </div>
            },
        },
        {
            title: '电站信息',
            dataIndex: 'merchantName',
            valueType: 'text',
            search: false,
            width: 200,
            render: (data, _) => {
                return <div>
                    <div>
                        电站ID:{_.stationId}
                    </div>
                    <div>
                        电站名称:{_.stationName}
                    </div>
                    <div>
                        电站电话:{_.stationTel}
                    </div>
                </div>
            },
        },
        // {
        //     title: '设备名称',
        //     dataIndex: 'deviceName',
        //     valueType: 'text',
        //     // search: false,
        //     width: 150
        // },
        {
            title: '设备编号',
            dataIndex: 'deviceNo',
            valueType: 'text',
            search: false,
            width: 150
        },
        {
            title: '设备类型',
            dataIndex: 'deviceType',
            valueType: 'text',
            search: false,
            width: 150,
            render: (_, data) => {
                return _ == 1 ? <Tag color="green">直流</Tag> : _ == 2 ? <Tag color="blue">交流</Tag> : data
            },
            renderFormItem: (
                _,
                { type, defaultRender, formItemProps, fieldProps, ...rest },
                form,
            ) => {
                return <Select
                    {...fieldProps}
                    allowClear
                    placeholder="请选择设备类型"
                    style={{ width: "100%" }}
                    filterOption={false}
                    fieldNames={{
                        label: "name",
                        value: "id"
                    }}
                    options={[
                        {
                            name: '直流',
                            id: 1
                        },
                        {
                            name: '交流',
                            id: 2
                        }
                    ]}
                />
            },
        },
        {
            title: '最大功率',
            dataIndex: 'maxPower',
            valueType: 'text',
            search: false,
            width: 120
        },
        {
            title: '最大电压',
            dataIndex: 'maxVoltage',
            valueType: 'text',
            search: false,
            width: 120
        },
        {
            title: '枪数',
            dataIndex: 'gunCount',
            valueType: 'text',
            search: false,
            width: 150
        },
        {
            title: '心跳时间',
            dataIndex: 'hearTime',
            valueType: 'text',
            search: false,
            width: 150
        },
        {
            title: '状态',
            dataIndex: 'status',
            valueType: 'text',
            search: false,
            width: 150,
            render: (_, data) => {
                return _ == 1 ? <Tag color="green">启用</Tag> : _ == 2 ? <Tag color="red">禁用</Tag> : data
            },
            renderFormItem: (
                _,
                { type, defaultRender, formItemProps, fieldProps, ...rest },
                form,
            ) => {
                return <Select
                    {...fieldProps}
                    allowClear
                    placeholder="请选择状态"
                    style={{ width: "100%" }}
                    filterOption={false}
                    fieldNames={{
                        label: "name",
                        value: "id"
                    }}
                    options={[
                        {
                            name: '启用',
                            id: 1
                        },
                        {
                            name: '禁用',
                            id: 2
                        }
                    ]}
                />
            },
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            valueType: 'text',
            search: false,
            width: 120
        }
    ]

    return (
        <>
            <Modal width={1400} title="运营商-设备信息" open={modalVisit} onOk={async () => {
                setModalVisit(false)
            }} onCancel={async () => {
                setModalVisit(false)
            }}>
                <ProTable
                    rowKey="id"
                    key="logList"
                    actionRef={actionRef}
                    search={{
                        labelWidth: 120,
                        defaultCollapsed: false,
                    }}
                    request={async (params, sorter, filter) => {
                        params.operatorId = values.id
                        let { data } = await findOperatorDevicePage(params)
                        return {
                            data: data?.records || [],
                            total: data?.total,
                        };
                    }}
                    columns={columns}
                />
            </Modal>
        </>
    );
};