/** @format */

import * as React from 'react';
import { ColumnProps } from 'antd/es/table';
import { PaginationProps } from 'antd/es/pagination';
import Result from '../../../../components/result';
// import DataApiSelect from '../../../components/select/dataApi';
import { decodeBase64 } from '../../../../utils/base64';
import Table from '../../../../components/table';
import { useBillDetail, useExportBill } from '../../../../service/accouting';
import UpdateChargeCount from './updateChargeCount'
import RemarkList from './remarkList';
import { Button } from 'antd';
import AddBillRemark from './addBillRemark';
import { numberFormats } from '../../../../utils/numberFormat';


interface RecordProps {
    index: number;
    id: number;
    query_type: string;
    combo_type: string;
    price: string;
    add_order_time: string;
}

const Index: React.FC = props => {
    const search = decodeBase64(location.search.slice(1));
    const billTime = new URLSearchParams(search).get('bill_time');
    const merchantId = new URLSearchParams(search).get('merchant_id');

    const billCreateTime: any = new URLSearchParams(search).get('bill_create_time');
    
    const billId: any = new URLSearchParams(search).get('bill_id');
    const name: any = new URLSearchParams(search).get('merchant_name');


    const merchantName = new URLSearchParams(search).get('merchant_name');

    const billStatus:any = new URLSearchParams(search).get('bill_status')

    const [state, requestData] = useBillDetail({ merchant_id:merchantId, month: billTime,bill_id:billId });
    const [exportUrl,requestBillExcel] = useExportBill({})

    const handleChangePage = ({ current }: PaginationProps) => {
        requestData({
            page_number: current,
        });
    };
    const tableColumns = React.useMemo(() => {
        const Columns: ColumnProps<RecordProps>[] = [
            {
                title: '统计时间',
                dataIndex: 'month',
                key: 'month',
            },
            {
                title: '产品',
                dataIndex: 'data_api_name',
                key: 'data_api_name',
                render:(_,record:any)=>{
                    const { data_api_name,alias } = record
                    return alias || data_api_name
                }
            },
            {
                title: '总查次',
                dataIndex: 'total_count',
                key: 'total_count',
                align:'right',
                render:(_,record:any)=>{
                    const { total_count } = record
                    return total_count || '-'
                }
            },
            {
                title: '有效查次',
                dataIndex: 'valid_count',
                key: 'valid_count',
                align:'right',
                render:(_,record:any)=>{
                    const { valid_count } = record
                    return valid_count || '-'
                }
            },
            {
                title: '实际计费查次',
                align:'right',
                dataIndex: 'charge_count',
                render:(_,record:any)=>{
                    const { charge_count } = record
                    return charge_count ||'-'
                }
            },
            {
                title: '单价',
                dataIndex:'unit_price',
                align:'right',
                render:(_,record:any)=>{
                    const { unit_price } = record
                    return <div>￥{numberFormats(unit_price)}</div>
                }
            },
            {
                title: '消费金额',
                align:'right',
                dataIndex: 'amount',
                render:(_,record:any)=>{
                    const { amount } = record
                    return <div>￥{numberFormats(amount)}</div>
                }
            },
            {
                title: '操作',
                render:(_,record:any)=>{
                    return billStatus == 1 ? <div>-</div>:<UpdateChargeCount record={record} refresh={refresh}/>
                }
            },
        ];
        return Columns;
    }, []);

    const refresh = () => {
        requestData({ merchant_id:merchantId, month: billTime,bill_id:billId })
    }

    const text= (text:string) => {
        return <div style={{fontWeight:500,fontSize:14,color:'#1F2129',marginTop:10 }}>{text}</div>
    }

    const renderBillAllCount = () => {
        return <div style={{display:'flex',marginTop:20, flexDirection:'column',alignItems:'flex-end'}}>
                {text(`合计: ￥${numberFormats(state.amount)}`)}
                {text(`账户余额:￥${numberFormats(state.balance)}`)}
                {text('成都深云智能科技有限公司')}
                {text(billCreateTime)}
        </div>
    }

    const renderBillRemark = () => {
        return <div style={{width:'100%'}}>
        {state?.detailRemark.length != 0? <RemarkList remarkList={state.detailRemark} detailRemark={true}/> :''}
        <AddBillRemark billId={billId} refresh={refresh}/>
        </div>
    }

    const renderBillTitle = () => {
        return <div 
                    style={{width:'100%',
                    flexDirection:'row',
                    justifyContent:'center',
                    display:'flex',
                    color:'#1F2129',
                    fontWeight:'600',
                    marginTop:20,
                    marginBottom:30,
                    fontSize:16}}>
                    {`${merchantName}对账单(${billTime})`}
                    <Button onClick={()=>{requestBillExcel({bill_id:billId,month: billTime,merchant_id:merchantId})}} style={{position:'absolute',right:30}}>导出</Button>
                </div>
    }

    return (
            <Result error={state.error} onRetry={() => requestData({ merchant_id:merchantId, month: billTime })}>
                {renderBillTitle()}
                <Table
                    pagination={{
                        total: state.total,
                        current: state.deepData.page_number
                    }}
                    onChange={handleChangePage}
                    rowKey='bill_detail_id'
                    columns={tableColumns}
                    loading={state.loading}
                    dataSource={state.dataSource}
                    footer={()=><RemarkList remarkList={state.remark}/>}
                />
                <div style={{width:'100%',display:'flex',marginTop:40, flexDirection:'row',justifyContent:'space-between'}}>
                    {billStatus == 1? '': renderBillRemark()}
                </div>
                    {renderBillAllCount()}
            </Result>
    );
};
export default Index;
