import { useAddTime } from '@/Hook/useDate';
import { FallOutlined, RiseOutlined } from '@ant-design/icons';
import { Col, Progress, Row, Statistic, Table, } from 'antd';
import moment from 'moment';
import React from 'react'
import style from './table.less'
import './index.less'
export const expandedRowRender = (data: any) => {
    let columns: any = [
        {
            title: '15日复充数据',
            dataIndex: 'date',
            key: 'date',
            align: 'center',
            render: (a: string, b: any) => {
                let data: any[] = b?.data || []
                let firstData: any = {}
                if (data?.length > 0) {
                    firstData = data[0]
                }
                let col: any[] = []
                let index = 0
                let nowDate = moment().format('YYYY-MM-DD')
                let end = b?.date || moment().format('YYYY-MM-DD')
                let count = moment(nowDate).diff(end,'day')
                if (Object.keys(firstData).length > 0) {
                    Object.keys(firstData).map((item: any, eq: number) => {
                        if (item !== 'user_order_count') {
                            col.push({
                                title: index === 0 ? b?.date : useAddTime(index, 'days', 'YYYY-MM-DD', b?.date),
                                dataIndex: 'd' + (index + 1),
                                key: 'd' + (index + 1),
                                align: 'center',
                                render: (value1: any, value2: any) => {
                                    return <Row gutter={[10, 0]} key={eq} className={`${style.mytable_body_div} ${moment(new Date).format('YYYY-MM-DD') >= useAddTime(eq - 1, 'days', 'YYYY-MM-DD', b?.date) ? style.show : style.red}`} >
                                        {count + 1 < eq && <div className={style.red}></div>}
                                        <Col style={{ color: '#3f51b5', fontWeight: 600 }} span={24} ><span>原：</span>
                                            <Statistic value={value1?.origin || 0} valueStyle={{ color: '#3f51b5', fontSize: 12, fontWeight: 600 }} />
                                        </Col>
                                        <Col style={{ color: '#ff9800', fontWeight: 600 }} span={24} ><span>现：</span>
                                            <Statistic value={value1.now || 0} valueStyle={{ color: '#ff9800', fontSize: 12, fontWeight: 600 }} />
                                        </Col>
                                        <Col style={{ color: 'red', fontWeight: 600 }} span={24} ><span>增：</span>
                                            <Statistic value={value1?.new || 0} valueStyle={{ color: 'red', fontSize: 12, fontWeight: 600 }} prefix={<RiseOutlined />} />
                                        </Col>
                                        <Col style={{ color: 'green', fontWeight: 600 }} span={24} ><span>移：</span>
                                            <Statistic value={value1?.move || 0} valueStyle={{ color: 'green', fontSize: 12, fontWeight: 600 }} prefix={<FallOutlined />} />
                                        </Col>
                                        <Col style={{ color: '#000', fontWeight: 600 }} span={24} >
                                            <div className={style.bitRate}>
                                                <span>比：</span>
                                                <div className="my_progrss">
                                                    <span className='content'>{(value1?.follow_order_rate * 100)?.toFixed(2) || '0.00'}%</span>
                                                    <Progress
                                                        strokeColor="#82d0fa"
                                                        showInfo={false}
                                                        style={{ height: 25 }}
                                                        percent={(value1?.follow_order_rate * 100) || 0}
                                                    />
                                                </div>
                                            </div>
                                        </Col>
                                    </Row>
                                }
                            })
                            index++
                        }
                    })
                }
                const columns: any = [
                    {
                        title: '充值次数',
                        dataIndex: 'user_order_count',
                        key: 'user_order_count',
                        width: 40,
                        align: 'center'
                    },
                    ...col
                ]
                data = data?.map((item, index: number) => {
                    if (index === 0) {
                        return { ...item, id: Math.random() + index + 1 }
                    }
                    return { ...item, id: Math.random() + index + 1 }
                })
                return <Table columns={columns} className="sumTable" dataSource={data} bordered pagination={false} />
            }
        },

    ];
    return <Table columns={columns} dataSource={[data]} pagination={false} rowKey='id' bordered />;
};