import useNumber from '@/Hook/useNumber'
import { Card, Col, Row } from 'antd'
import React from 'react'
import style from './index.less'
import Leiji from './leiji'
import Zonghaoshu from './zonghaoshu'
import Benyue from './benyue'
import Shangyue from './shangyue'
const gutter = { xs: 24, sm: 24, md: 12, xl: 6 }
function DailyReport(props: any) {
    let { amount, cost, roi, channel_count, on_channel_count, off_channel_count, this_month_cost, this_month_amount, this_month_roi, last_month_cost, last_month_amount, last_month_roi, last_month_far_roi, } = props
    return (<div >
        {  <Row className={style.body} gutter={[20, 20]}>
            <Col {...gutter}>
                <Card hoverable >
                    <div className={style.box}>
                        <p>
                            <span>累计消耗</span>
                            <em>¥ {cost ? useNumber(cost) : 0}</em>
                        </p>
                        <p>
                            <span>累计充值</span>
                            <em>¥ {amount ? useNumber(amount) : 0}</em>
                        </p>
                        <p>
                            <span>综合回本率</span>
                            <em>{roi ? useNumber((roi) * 100) : 0}%</em>
                        </p>
                        <p><em>&nbsp;</em></p>
                        <Leiji {...[cost || 0, amount || 0, ((roi || 0) * 100).toFixed(2)]} />
                    </div>
                </Card>
            </Col>
            <Col {...gutter}>
                <Card hoverable >
                    <div className={style.box}>
                        <p>
                            <span>总号数</span>
                            <em>{channel_count ? useNumber(channel_count) : 0}</em>
                        </p>
                        <p>
                            <span>在投号数</span>
                            <em>{on_channel_count ? useNumber(on_channel_count) : 0}</em>
                        </p>
                        <p>
                            <span>停投号数</span>
                            <em>{off_channel_count ? useNumber(off_channel_count) : 0}</em>
                        </p>
                        <p><em>&nbsp;</em></p>
                        <Zonghaoshu {...[channel_count || 0, on_channel_count || 0, off_channel_count || 0]} />
                    </div>
                </Card>
            </Col>
            <Col {...gutter}>
                <Card hoverable >
                    <div className={style.box}>
                        <p>
                            <span>本月消耗</span>
                            <em>￥{this_month_cost ? useNumber(this_month_cost) : 0}</em>
                        </p>
                        <p>
                            <span>本月新用户充值</span>
                            <em>￥{this_month_amount ? useNumber(this_month_amount) : 0}</em>
                        </p>
                        <p>
                            <span>本月回本率</span>
                            <em>{this_month_roi ? useNumber((this_month_roi) * 100) : 0}%</em>
                        </p>
                        <p><em>&nbsp;</em></p>
                        <Benyue  {...[this_month_cost || 0, this_month_amount || 0, (this_month_roi || 0) * 100]} />
                    </div>
                </Card>
            </Col>
            <Col {...gutter}>
                <Card hoverable >
                    <div className={style.box}>
                        <p>
                            <span>上月消耗</span>
                            <em>￥{last_month_cost ? useNumber(last_month_cost) : 0}</em>
                        </p>
                        <p>
                            <span>上月新用户充值</span>
                            <em>￥{last_month_amount ? useNumber(last_month_amount) : 0}</em>
                        </p>
                        <p>
                            <span>上月30日回本率</span>
                            <em>{last_month_roi ? useNumber((last_month_roi) * 100) : 0}%</em>
                        </p>
                        <p>
                            <span>上月至今回本率</span>
                            <em>{last_month_far_roi ? useNumber((last_month_far_roi) * 100) : 0}%</em>
                        </p>
                        <Shangyue  {...[
                            (last_month_roi || 0) * 100,
                            last_month_cost || 0,
                            (last_month_far_roi || 0) * 100,
                            last_month_amount || 0
                        ]} />
                    </div>
                </Card>
            </Col>
        </Row>}
    </div>)
}

export default React.memo(DailyReport)