import { gunPage, gunUpdate, gunAdd, deleteBatchByIds, getInfo,getEnable } from '@/services/power/gun';


import React, { useRef, useEffect, useState } from 'react';
import { useIntl, useAccess } from '@umijs/max';
import { message, Tag, Select, Tooltip, Button, Modal, Switch } from 'antd';
import { ActionType, PageContainer, ProTable } from '@ant-design/pro-components';
import UpdateForm from './edit';
import { PlusOutlined } from '@ant-design/icons';
import { merchantPage } from '@/services/merchant/index';
import { getMerchantSelectDevice } from '@/services/merchant/index'



const LogTableList: React.FC = () => {
    const actionRef = useRef<ActionType>();
    const [modalVisible, setModalVisible] = useState<boolean>(false);
    const [currentRow, setCurrentRow] = useState();


    const [shopOption, setShopOption] = useState([]);
    const [devOption, setDevOption] = useState([]);


    const searchShop = async (value) => {
        const { success, data } = await merchantPage({
            userName: value
        });
        data.records.map((i) => {
            i.userName = i.userName + ' ' + i.phone
        })
        setShopOption(data.records)
    }




    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            valueType: 'text',
            search: false,
            width: 30
        },
        {
            title: '枪编号',
            dataIndex: 'gunNo',
            search: false,
            valueType: 'text',
        },
        {
            title: '枪名称',
            dataIndex: 'gunName',
            valueType: 'text',
        },
        {
            title: '使用状态',
            dataIndex: 'businessStatus',
            valueType: 'text',
            render: (_: any, record: any) => {
                // 业务状态:0-未使用;1-充电中;2-预约中;
                let data = ['blue', 'orange', 'magenta']
                return <Tag color={data[record?.businessStatus]}>{record?.businessStatusName}</Tag>
            },
            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: 0
                        },
                        {
                            name: '启动中',
                            id: 1
                        },
                        {
                            name: '充电中',
                            id: 2
                        },
                    ]}
                />
            },
        },
        {
            title: '枪状态',
            dataIndex: 'gunStatus',
            valueType: 'text',
            search: false,
            render: (_: any, record: any) => {
                let onChange = async (e) => {
                    let _res = await getEnable({ id: record.id })
                    message.success(e ? '启用成功' : '禁用成功');
                    if (actionRef.current) {
                        actionRef.current.reload();
                    }
                }
                return <Switch checkedChildren="启用" value={record.gunStatus == 1 ? true : false} unCheckedChildren="禁用" defaultChecked onChange={onChange} />
                // // 充电枪状态:1-启用;2-禁用;
                // let data = ['', 'green', 'red']
                // return <Tag color={data[record?.gunStatus]}>{record?.gunStatusName}</Tag>
            },
            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,
        },
        {
            title: '最大电压',
            dataIndex: 'maxVoltage',
            valueType: 'text',
            search: false,
        },
        {
            title: '设备信息',
            dataIndex: 'maxVoltage',
            valueType: 'text',
            render: (_: any, record: any) => {
                return <div>
                    <div>设备ID：{record?.deviceId}</div>
                    <div>设备名称：{record?.deviceName}</div>
                </div>
            },
            renderFormItem: (
                _,
                { type, defaultRender, formItemProps, fieldProps, ...rest },
                form,
            ) => {
                return <Select
                    {...fieldProps}
                    allowClear
                    placeholder="请选择设备信息"
                    style={{ width: "100%" }}
                    filterOption={false}
                    fieldNames={{
                        label: "label",
                        value: "id"
                    }}
                    options={devOption}
                />
            },

        },

        {
            title: '二维码',
            dataIndex: 'gunQrCode',
            valueType: 'image',
            search: false,
        },
        {
            title: '站点名称',
            dataIndex: 'stationName',
            valueType: 'text',
            width: 120,
            hideInTable: true
        },
        {
            title: '电站信息',
            dataIndex: 'maxVoltage',
            valueType: 'text',
            search: false,
            render: (_: any, record: any) => {
                return <div>
                    <div>电站ID：{record?.stationId}</div>
                    <div>电站名称：{record?.stationName}</div>
                    <div>
                        电站电话:{record?.stationTel}
                    </div>
                </div>
            },
        },
        {
            title: '商户信息',
            dataIndex: 'merchantId',
            valueType: 'text',
            render: (_: any, record: any) => {
                return <div>
                    <div>商户ID：{record?.merchantId}</div>
                    <div>商户名称：{record?.merchantName}</div>
                    <div>商户电话：{record?.merchantPhone}</div>
                </div>
            },
            renderFormItem: (
                _,
                { type, defaultRender, formItemProps, fieldProps, ...rest },
                form,
            ) => {
                return <Select
                    {...fieldProps}
                    allowClear
                    showSearch
                    placeholder="请输入商户名"
                    style={{ width: "100%" }}
                    filterOption={false}
                    onSearch={
                        (e) => {
                            if (!e) {
                                return;
                            }
                            searchShop(e);
                        }
                    }
                    fieldNames={{
                        label: "userName",
                        value: "id"
                    }}
                    options={shopOption}
                />
            },
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            valueType: 'text',
            search: false,
            width: 120
        },
        // {
        //     title: '操作',
        //     dataIndex: 'option',
        //     width: 120,
        //     valueType: 'option',
        //     render: (_, record: any) => [
        //         <Button
        //             type="link"
        //             size="small"
        //             // hidden={!access.hasPerms('/api/sys/user/update')}
        //             onClick={async () => {
        //                 let { data } = await getInfo({ id: record.id })
        //                 setModalVisible(true);
        //                 setCurrentRow(data);
        //             }}
        //         >
        //             编辑
        //         </Button>,
        //         <Button
        //             type="link"
        //             size="small"
        //             danger
        //             // hidden={!access.hasPerms('/api/sys/user/deleteUserBatchByIds')}
        //             onClick={async () => {
        //                 Modal.confirm({
        //                     title: '删除',
        //                     content: '确定删除该项吗？',
        //                     okText: '确认',
        //                     cancelText: '取消',
        //                     onOk: async () => {
        //                         const success = await deleteBatchByIds([record.id]);
        //                         if (success) {
        //                             if (actionRef.current) {
        //                                 actionRef.current.reload();
        //                             }
        //                         }
        //                     },
        //                 });
        //             }}
        //         >
        //             删除
        //         </Button>,
        //     ],
        // },
    ];

    return (
        <PageContainer>
            <div style={{ width: '100%', float: 'right' }}>
                <ProTable
                    actionRef={actionRef}
                    rowKey="id"
                    key="logList"
                    search={{
                        labelWidth: 120,
                        defaultCollapsed: false,
                    }}
                    // toolBarRender={() => [
                    //     <Button
                    //         type="primary"
                    //         key="add"
                    //         //   hidden={!access.hasPerms('/api/sys/user/add')}
                    //         onClick={async () => {
                    //             setCurrentRow(undefined);
                    //             setModalVisible(true);
                    //         }}
                    //     >
                    //         <PlusOutlined /> 新增
                    //     </Button>,
                    // ]}
                    request={async (params, sorter, filter) => {

                        let _res = await getMerchantSelectDevice()
                        setDevOption(_res.data)

                        let { data } = await gunPage(params)
                        return {
                            data: data?.records || [],
                            total: data?.total,
                        };
                    }}
                    columns={columns}
                />
            </div>
            <UpdateForm
                onSubmit={async (values) => {
                    let success = false;
                    if (values.id) {
                        success = await gunUpdate({ ...values });
                    } else {
                        success = await gunAdd({ ...values });
                    }
                    if (success) {
                        setModalVisible(false);
                        setCurrentRow(undefined);
                        if (actionRef.current) {
                            actionRef.current.reload();
                        }
                    }
                }}
                onCancel={() => {
                    setModalVisible(false);
                    setCurrentRow(undefined);
                }}
                open={modalVisible}
                values={currentRow || {}}
            />
        </PageContainer>
    );
};

export default LogTableList;
