import { devicePage } from '@/services/piles';
import { exportData } from '@/utils/func';
import React, { useRef, useEffect, useState } from 'react';
import { useIntl, useAccess } from '@umijs/max';
import { message, Tag, Image, Button, Select } from 'antd';
import { ActionType, PageContainer, ProTable } from '@ant-design/pro-components';
import BonusFormModal from './components/BonusFormModal';


const LogTableList: React.FC = () => {
    const actionRef = useRef<ActionType>();
    const [searchParams, setSearchParams] = useState(null);
    const [bonusFormModal, setBonusFormModal] = useState(false);
    const [row, setRow] = useState();

    const columns = [
        {
            title: '设备号',
            dataIndex: 'deviceNo',
            valueType: 'text',
            search: false,
            render: (_: any, record: any) => {
                return <div className={'flex items-center'}>
                    {record.deviceNo || '-'}
                    <Button type="link" onClick={() => {
                        setRow(record);
                        setBonusFormModal(true);
                    }}>查看</Button>
                </div>
            }
        },
        {
            title: '订单号',
            dataIndex: 'orderId',
            valueType: 'text',
            search: false,
        },
        {
            title: '设备类型',
            dataIndex: 'deviceType',
            valueType: 'text',
            search: false,
        },

        {
            title: '设备状态',
            dataIndex: 'deviceStatus',
            valueType: 'text',
            search: false,
            render: (_: any, record: any) => {
                let color = record.deviceStatus == 1 ? 'volcano' : record.deviceStatus == 2 ? 'orange' : 'red'
                return <Tag color={color}>{record.deviceStatus == 1 ? '已安装' : record.deviceStatus == 2 ? '已运营' : '未安装'}</Tag>
            },
        },
        {
            title: '设备总收益',
            dataIndex: 'income',
            valueType: 'text',
            search: false,
        },
        {
            title: '安装站点名称',
            dataIndex: 'stationName',
            valueType: 'text',
            search: false,
        },
        {
            title: '安装站点地址',
            dataIndex: 'stationAddress',
            valueType: 'text',
            search: false,
        },
        {
            title: '安装时间',
            dataIndex: 'installTime',
            valueType: 'text',
            search: false,
        },
        {
            title: '交付时间',
            dataIndex: 'deliverDate',
            valueType: 'text',
            search: false,
        },
        {
            title: '分账有效期',
            dataIndex: 'paymentValidity',
            valueType: 'text',
            search: false,
        },
        {
            title: '分账类型',
            dataIndex: 'paymentType',
            valueType: 'text',
            search: false,
            render: (_: any, record: any) => {
                let color = record.paymentType == 1 ? 'volcano' : 'red'
                return <Tag color={color}>{record.paymentType == 1 ? '普通分账' : '不分账'}</Tag>
            },
        },

        {
            title: '创建时间',
            dataIndex: 'createTime',
            valueType: 'text',
            search: false,
        },
    ];

    return (
        <PageContainer>
            <div style={{ width: '100%', float: 'right' }}>
                <BonusFormModal
                    values={row}
                    modalOpenState={bonusFormModal}
                    onModalOpenState={setBonusFormModal}
                />
                <ProTable
                    actionRef={actionRef}
                    rowKey="id"
                    key="logList"
                    search={{
                        labelWidth: 120,
                    }}
                    request={async (params, sorter, filter) => {
                        setSearchParams({ ...params });
                        let { data } = await devicePage(params)
                        return {
                            data: data?.records || [],
                            total: data?.total,
                        };
                    }}
                    columns={columns}
                />
            </div>
        </PageContainer>
    );
};

export default LogTableList;