import { devicePage, deviceSetinfo, deviceCount } from '@/services/invest/device';
import { history } from '@umijs/max';
import { UploadOutlined } from '@ant-design/icons';
import React, { useRef, useEffect, useState } from 'react';
import { useIntl, useAccess } from '@umijs/max';
import { message, Tag, Button, Modal, Image, Space, Select, Col, Row, Card, Upload } from 'antd';
import { ActionType, PageContainer, ProTable } from '@ant-design/pro-components';
import { PlusOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
// import BonusFormModal from './components/BonusFormModal';

import SetinfoFormModal from './components/SetinfoFormModal';

const GoodsTableList: React.FC = () => {
    const actionRef = useRef<ActionType>();
    const access = useAccess()
    const [shopOption, setShopOption] = useState([]);
    const [row, setRow] = useState(null);
    const [bonusFormModal, setBonusFormModal] = useState(false);
    const [count, setCountRows] = useState({});
    const [searchParams, setSearchParams] = useState({});


    const [setinfoFormModal, setSetinfoFormModal] = useState(false);

    const props = {
        name: 'file',
        action: process.env.API_URL + '/admin/invest/device/importDeviceData',
        headers: {
            Authorization: localStorage.getItem('token'),
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} 导入成功`);
                actionRef.current?.reload();
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} 上传失败`);
            }
        },
    };

    const handleSetinfo = async (value) => {
        const { success } = await deviceSetinfo(value);
        if (success) {
            setSetinfoFormModal(false);
            actionRef.current?.reload();
        }
    };


    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            search: true,
            render: (_, record) => {
                return <Space>
                    <div>{record?.id}</div>
                    {/* <Button
                        type="link"
                        onClick={() => {
                            setRow(record);
                            setBonusFormModal(true);
                        }}
                    >
                        查看
                    </Button> */}
                </Space>;
            },
        },
        {
            title: '安装时间',
            dataIndex: 'installTime',
            search: true,
            render: (_, record) => {
                return record?.installTime ? dayjs(Number(record?.installTime)).format('YYYY-MM-DD HH:mm:ss') : '未安装'
            }
        },
        {
            title: '补贴天数',
            dataIndex: 'helpDay',
            search: true,
        },
        {
            title: '同步时间',
            dataIndex: 'syncTime',
            search: false,
            render: (_, record) => {
                return record?.syncTime ? dayjs(record?.syncTime).format('YYYY-MM-DD HH:mm:ss') : ''
            }
        },
        {
            title: '桩主',
            dataIndex: 'shopName',
            search: {
                fieldProps: {
                    placeholder: '请输入用户名', // 生效！
                },
            },
            render: (_, record) => {
                return <>
                    <div><Image
                        preview={false}
                        width={50}
                        src={record?.investUsersEntity?.avatarUrl}
                    /></div>
                    <div>{record?.investUsersEntity?.username}</div>
                    <div>{record?.investUsersEntity?.mobile}</div>
                </>;
            },
        },
        {
            title: '设备号',
            dataIndex: 'deviceNo',
            search: true,
        },
        {
            title: '设备信息',
            dataIndex: 'siteName',
            search: true,
            render: (_, record) => {
                return <>
                    <div>设备号：{record?.deviceNo}</div>
                    <div>小区：{record?.siteName}</div>
                    <div>地址：{record?.address}</div>
                </>
            }
        },
        {
            title: '价格',
            dataIndex: 'goodsPrice',
            search: false,
        },
        {
            title: '收益',
            dataIndex: 'profit',
            search: false,
        },
        {
            title: '创建时间',
            dataIndex: 'createdAt',
            search: false,
        },
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            render: (_, record) => (
                <Space>
                    {
                        <Button
                            type="link"
                            onClick={() => {
                                setRow({
                                    ...record,
                                    deviceId: record.id,
                                });
                                setSetinfoFormModal(true);
                            }}
                        >
                            设置地址
                        </Button>
                    }

                </Space>
            ),
        },
    ];

    return (
        <PageContainer>
            <Row gutter={10}>
                <Col span={6}>
                    <Card>
                        <div>总数</div>
                        <div>数量: {count?.deviceTotal}</div>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <div>已安装</div>
                        <div>数量: {count?.installTotal}</div>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <div>快过期</div>
                        <div>数量: {count?.unexpireTotal}</div>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <div>已过期</div>
                        <div>数量: {count?.expireTotal}</div>
                    </Card>
                </Col>
            </Row>
            <div style={{ height: '15px' }}></div>
            <div style={{ width: '100%', float: 'right' }}>
                {/* <BonusFormModal
                    values={row}
                    modalOpenState={bonusFormModal}
                    onModalOpenState={setBonusFormModal}
                /> */}

                <SetinfoFormModal
                    values={row}
                    modalOpenState={setinfoFormModal}
                    onModalOpenState={setSetinfoFormModal}
                    onSubmit={handleSetinfo}
                />

                <ProTable
                    actionRef={actionRef}
                    rowKey="id"
                    key="goodsList"
                    search={{
                        labelWidth: 120,
                        defaultCollapsed: false,
                    }}
                    toolBarRender={() => [
                        <Upload {...props} key={'66666'}>
                            <Button key={'6666'} icon={<UploadOutlined />}>导入数据</Button>
                        </Upload>
                    ]}
                    request={async (params, sorter, filter) => {
                        setSearchParams(params)

                        deviceCount(params).then((res) => {
                            setCountRows(res.data)
                        })

                        let { data } = await devicePage(params)
                        return {
                            data: data?.records || [],
                            total: data?.total,
                        };
                    }}
                    columns={columns}
                />
            </div>
        </PageContainer >
    );
};

export default GoodsTableList;
