import React, { useState } from 'react';
import { Descriptions, Tag, Spin, Modal, Space, Flex, Button, Divider, Alert } from 'antd';
import { AlipayOutlined, WechatOutlined, ReloadOutlined } from '@ant-design/icons';
import Styles from './web.pc.module.less';
import { ThousandCont, ToYuan } from "oak-domain/lib/utils/money";
import { OfflineAccount as OADetail } from '../../offlineAccount/config/web.pc';
import { WpAccount as WADetail } from '../../wpAccount/config/web.pc';
import TransferList from '../transferList';
import SysAccountMoveCreate from '../../sysAccountMove/create';
import SysAccountOperList from '../../sysAccountOper/list';
import assert from 'assert';
function OfflineAccount(props) {
    const { data, t } = props;
    const { type, channel, color, name } = data;
    switch (type) {
        case 'bank': {
            return (<Flex style={{ height: '100%' }} vertical gap="small" align="center" justify="center">
                    <Tag>{t('offlineAccount:name')}</Tag>
                    <div className={Styles.title}>{t(`offlineAccount:v.type.${type}`)}</div>
                    <div className={Styles.subtitle}>{channel}</div>
                </Flex>);
        }
        case 'alipay': {
            return (<Flex style={{ height: '100%' }} vertical gap="small" align="center" justify="center">
                    <Tag>{t('offlineAccount:name')}</Tag>
                    <AlipayOutlined style={{ color, fontSize: 18 }}/>
                    <div className={Styles.subtitle}>{name || t('qrCode')}</div>
                </Flex>);
        }
        case 'wechat': {
            return (<Flex style={{ height: '100%' }} vertical gap="small" align="center" justify="center">
                    <Tag>{t('offlineAccount:name')}</Tag>
                    <WechatOutlined style={{ color, fontSize: 18 }}/>
                    <div className={Styles.subtitle}>{name || t('qrCode')}</div>
                </Flex>);
        }
        case 'shouqianba':
        case 'others': {
            return (<Flex style={{ height: '100%' }} vertical gap="small" align="center" justify="center">
                    <Tag>{t('offlineAccount:name')}</Tag>
                    <div className={Styles.title}>{t(`offlineAccount:v.type.${type}`)}</div>
                    <div className={Styles.subtitle}>{name || t('qrCode')}</div>
                </Flex>);
        }
    }
}
function WpAccount(props) {
    const { data, t } = props;
    return (<Flex style={{ height: '100%' }} vertical gap="middle" align="center" justify="center">
            <Tag>{t('wpAccount:name')}</Tag>
            <WechatOutlined style={{ color: 'green', fontSize: 34 }}/>
        </Flex>);
}
function GeneralAccount(props) {
    const { entity, t } = props;
    return (<Flex style={{ height: '100%' }} vertical gap="small" align="center" justify="center">
            <Tag>{t(`${entity}:name`)}</Tag>
        </Flex>);
}
const RenderSysAccountCardTopDict = {
    'offlineAccount': OfflineAccount,
    'wpAccount': WpAccount,
};
const RenderSysAccountDetailDict = {
    'offlineAccount': OADetail,
    'wpAccount': WADetail,
};
export function registerSysAccountCardTopComponent(entity, component) {
    assert(!RenderSysAccountCardTopDict[entity]);
    RenderSysAccountCardTopDict[entity] = component;
}
export function registerSysAccountDetailComponent(entity, component) {
    assert(!RenderSysAccountDetailDict[entity]);
    RenderSysAccountDetailDict[entity] = component;
}
export default function render(props) {
    const { accounts, total, systemId, accountNum, accountTotalSum, accountAvailSum, refundCnt, refundPriceSum, transferCnt, transferPriceSum, orderCnt, orderPaidSum, orderRefundSum, refreshing, } = props.data;
    const { t, setMessage, refreshData } = props.methods;
    if (accounts && systemId) {
        const [showTransferList, setShowTransferList] = useState(false);
        const [showMoveCreate, setShowMoveCreate] = useState(false);
        const [showHistoryList, setShowHistoryList] = useState(false);
        const [showHistoryAcc, setShowHistoryAcc] = useState(undefined);
        return (<div className={Styles.container}>
                <Spin spinning={refreshing} fullscreen/>
                <Descriptions title={t('sysAccount')} bordered items={[
                {
                    label: t('total'),
                    children: <div className={Styles.total}>
                                <span className={Styles.symbol}>{t('common::pay.symbol')}</span>
                                <span className={Styles.value}>{ThousandCont(ToYuan(total || 0), 2)}</span>
                            </div>
                },
                {
                    label: t('count'),
                    children: accounts.length,
                }
            ]} column={2} extra={<>
                            <Space>
                                <Button type="text" icon={<ReloadOutlined />} onClick={() => refreshData()}/>
                                <Button type="primary" onClick={() => setShowMoveCreate(true)}>
                                    {t('move')}
                                </Button>
                            </Space>
                            <Modal destroyOnClose open={showMoveCreate} onCancel={() => setShowMoveCreate(false)} closeIcon={null} width={800} title={t('move')} footer={null}>
                                <SysAccountMoveCreate oakPath="$opb-sysAccount-survery-saMoveCreate" systemId={systemId} onSuccess={() => setShowMoveCreate(false)}/>
                            </Modal>
                        </>}/>
                <div className={Styles.sysAccounts}>
                    {accounts.map(({ entity, data }, idx) => {
                const TopRender = RenderSysAccountCardTopDict[entity];
                assert(TopRender);
                return (<div className={Styles.sysAccount} key={idx}>
                                        <div className={Styles.top}>
                                            {TopRender ? <TopRender data={data} t={t}/> : <GeneralAccount entity={entity} t={t}/>}
                                        </div>
                                        <div className={Styles.middle}>
                                            <span className={Styles.symbol}>{t('common::pay.symbol')}</span>
                                            <span className={Styles.value}>{ThousandCont(ToYuan(data.price || 0), 2)}</span>
                                        </div>
                                        <div className={Styles.bottom}>
                                            <Button onClick={() => {
                        setShowHistoryAcc({ entity, data });
                        setShowHistoryList(true);
                    }} style={{ marginRight: 8, }}>
                                                {t('history')}
                                            </Button>
                                            <Button onClick={() => {
                        const DetailRender = RenderSysAccountDetailDict[entity];
                        if (DetailRender) {
                            Modal.info({
                                width: 560,
                                // @oak-ignore
                                title: `${t(`${entity}:name`)}${t('common::action.detail')}`,
                                content: (<DetailRender data={data} systemId={systemId} t={t}/>),
                                onOk() { },
                            });
                        }
                        else {
                            setMessage({
                                title: t('noDetailRender'),
                                type: 'error',
                            });
                        }
                    }}>
                                                {t('common::action.detail')}
                                            </Button>

                                            {!!showHistoryAcc && showHistoryList &&
                        <Modal destroyOnClose open={showHistoryList} onCancel={() => {
                                setShowHistoryAcc(undefined);
                                setShowHistoryList(false);
                            }} width={800} title={showHistoryAcc.entity === 'offlineAccount' ?
                                (showHistoryAcc.data.type === 'bank' ?
                                    // @oak-ignore
                                    `${t(`${showHistoryAcc.entity}:v.type.${showHistoryAcc.data.type}`)}-${showHistoryAcc.data.channel}-${t('history')}`
                                    // @oak-ignore
                                    : `${t(`${showHistoryAcc.entity}:v.type.${showHistoryAcc.data.type}`)}-${showHistoryAcc.data.name}-${t('history')}`
                                // @oak-ignore
                                ) : `${t(`${showHistoryAcc.entity}:name`)}-${t('history')}`} footer={null}>
                                                    <div style={{ height: '65vh' }}>
                                                        <SysAccountOperList entity={showHistoryAcc.entity} entityId={showHistoryAcc.data.id} oakPath="$opb-sysAccount-survery-operList"/>
                                                    </div>
                                                </Modal>}
                                        </div>
                                    </div>);
            })}
                </div>
                <Divider />
                {accountNum && <Descriptions title={t('business')} bordered extra={<Alert type="info" message={t('tips1')}/>} items={[
                    {
                        label: t('accountTotalSum'),
                        children: <div className={Styles.total}>
                                    <span className={Styles.symbol}>{t('common::pay.symbol')}</span>
                                    <span className={Styles.value}>{ThousandCont(ToYuan(accountTotalSum || 0), 2)}</span>
                                </div>
                    },
                    {
                        label: t('accountAvailSum'),
                        children: <div className={Styles.total}>
                                    <span className={Styles.symbol}>{t('common::pay.symbol')}</span>
                                    <span className={Styles.value}>{ThousandCont(ToYuan(accountAvailSum || 0), 2)}</span>
                                </div>
                    },
                    {
                        label: t('accountNum'),
                        children: <span className={Styles.value}>{accountNum || 0}</span>,
                    },
                    {
                        label: t('refundCnt'),
                        children: <span className={Styles.value}>{refundCnt || 0}</span>
                    },
                    {
                        label: t('refundPriceSum'),
                        span: 2,
                        children: (<div className={Styles.span2}>
                                        <span className={Styles.total}>
                                            <span className={Styles.symbol}>{t('common::pay.symbol')}</span>
                                            <span className={Styles.value}>{ThousandCont(ToYuan(refundPriceSum || 0), 2)}</span>
                                        </span>
                                        <Button style={{ marginLeft: 20 }}>
                                            {t('refundList')}
                                        </Button>
                                    </div>)
                    },
                    {
                        label: t('transferCnt'),
                        children: <span className={Styles.value}>{transferCnt || 0}</span>
                    },
                    {
                        label: t('transferPriceSum'),
                        span: 2,
                        children: (<div className={Styles.span2}>
                                        <span className={Styles.total}>
                                            <span className={Styles.symbol}>{t('common::pay.symbol')}</span>
                                            <span className={Styles.value}>{ThousandCont(ToYuan(transferPriceSum || 0), 2)}</span>
                                        </span>
                                        <Button onClick={() => setShowTransferList(true)}>
                                            {t('transferList')}
                                        </Button>
                                        <Modal open={showTransferList} onCancel={() => setShowTransferList(false)} footer={null} closeIcon={null} width={800}>
                                            <TransferList oakPath="$opb-sysAccount-survery-transferList"/>
                                        </Modal>
                                    </div>)
                    },
                    {
                        label: t('orderCnt'),
                        children: <span className={Styles.value}>{orderCnt || 0}</span>
                    },
                    {
                        label: t('orderPriceSum'),
                        children: (<div className={Styles.span2}>
                                        <div className={Styles.total}>
                                            <span className={Styles.symbol}>{t('common::pay.symbol')}</span>
                                            <span className={Styles.value}>{ThousandCont(ToYuan((orderPaidSum || 0) - (orderRefundSum || 0)), 2)}</span>
                                        </div>
                                        <Button>
                                            {t('orderList')}
                                        </Button>
                                    </div>)
                    }
                ]} column={3}/>}
            </div>);
    }
    return null;
}