import { connect } from "umi";
import type { ConnectState } from "@/models/connect";
import type { ActionType } from "@ant-design/pro-table";
import ProTable from "@ant-design/pro-table";
import { useRef, useState } from "react";
import { getMoney } from "@/services/options";
import numeral from 'numeral'
import type { FormInstance} from "antd";
import { Tooltip } from "antd";
import { handleGetTableMonthlyReconciliation } from "../../ShopExpenseDetail/service";
import { wrapTreeNode } from "@/utils/format";

type DetailProps = {
    currentDetail: any
}
const YearContentDetail = ({ currentDetail }: DetailProps) => {

    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();
    // 合作商户合同期结算明细表表格的隐藏字段
    const [recordColumnsStateMap, setRecordColumnsStateMap] = useState<any>({
        BreachPenalty: { show: false },
        OtherFee: { show: false },
        SHOPEXPENSE_AMOUNT_1000: { show: false },
        SHOPEXPENSE_AMOUNT_2000: { show: false },
        SHOPEXPENSE_AMOUNT_3000: { show: false },
        SHOPEXPENSE_AMOUNT_5000: { show: false },
    })
    // 展开的行
    const [expandedRowKeys, setExpandedRowKeys] = useState<any>()

    const detailColumns: any = [
        {
            title: <div style={{ textAlign: 'center' }}>期限</div>,
            dataIndex: 'PeriodDesc',
            align: 'left',
            width: 300,
            fixed: 'left',
            hideInSearch: true,
            render: (_, record) => {
                return <span>{`${record?.PeriodDesc}`}</span>
            }
        },
        {
            title: <div style={{ textAlign: 'center' }}>结算状态</div>,
            dataIndex: 'IsApplySuccess',
            align: 'right',
            width: 100,
            hideInSearch: true,
            render: (_, record) => {
                return record?.IsApplySuccess ?
                    // 子级跳进去
                    <span style={{ color: '#faad14', cursor: 'pointer' }}>{'已结算'}</span>
                    :
                    record?.BusinessApprovalId ?
                        <span style={{ color: '#faad14', cursor: 'pointer' }}>结算中</span> :
                        <span style={{ color: '#faad14', cursor: 'pointer' }}>{'待结算'}</span>
            }
        },
        {
            title: '租金信息',
            dataIndex: '',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>保底/固定租金</div>,
                    dataIndex: 'MinturnOver',
                    valueType: 'digit',
                    align: 'right',
                    width: 130,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>提成比率</div>,
                    dataIndex: 'GuaranteeRatio',
                    hideInSearch: true,
                    align: 'right',
                    width: 100,
                    render: (_, record) => {
                        return record?.GuaranteeRatio ? `${record?.GuaranteeRatio}%` : ''
                    }
                }
            ]
        },
        {
            title: '营业额',
            dataIndex: '',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>现金</div>,
                    dataIndex: 'CashAmount',
                    valueType: 'digit',
                    align: 'right',
                    width: 80,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>微支付</div>,
                    dataIndex: 'MobilePayAmount',
                    valueType: 'digit',
                    align: 'right',
                    width: 100,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>小计</div>,
                    dataIndex: 'RevenueAmount',
                    valueType: 'digit',
                    align: 'right',
                    width: 150,
                    hideInSearch: true,
                    render: (_, record) => {
                        return <span>{record?.RevenueAmount ? numeral(getMoney(record?.RevenueAmount)).format('0,0.00') : '0'}</span>
                    }
                }
            ]
        },
        {
            title: <div style={{ textAlign: 'center' }}>业主收款</div>,
            dataIndex: 'RoyaltyAmount',
            valueType: 'digit',
            width: 100,
            align: 'right',
            hideInSearch: true,
        },
        {
            title: '应收费用',
            dataIndex: '',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>合计</div>,
                    dataIndex: 'ReceivableAmount',
                    valueType: 'digit',
                    align: 'right',
                    width: 100,
                    hideInSearch: true,
                    render: (_, record) => {
                        const str: string = `租金(${numeral(record?.GuaranteeFee).format('0.00')}) + 物业费(${numeral(record?.PropertyFee).format('0.00')}) + 房租(${numeral(record?.HouseRent).format('0.00')}) + 罚款(${numeral(record?.BreachPenalty).format('0.00')}) + 电费(${numeral(record?.ElectricityCharge).format('0.00')}) + 水费(${numeral(record?.WaterCharge).format('0.00')}) + 其他(${numeral(record?.OtherFee).format('0.00')})`

                        return record?.ReceivableAmount ?
                            <Tooltip title={str}>
                                <span>
                                    {numeral(record?.ReceivableAmount).format('0,0.00')}
                                </span>
                            </Tooltip>
                            : ''
                    }
                },
                {
                    title: <div style={{ textAlign: 'center' }}>租金</div>,
                    dataIndex: 'GuaranteeFee',
                    valueType: 'digit',
                    align: 'right',
                    width: 120,
                    hideInSearch: true,
                    render: (_, record) => {
                        return record?.GuaranteeFee ? numeral(getMoney(record?.GuaranteeFee)).format('0,0.00') : ''
                    }
                },
                {
                    title: <div style={{ textAlign: 'center' }}>物业费</div>,
                    dataIndex: 'PropertyFee',
                    valueType: 'digit',
                    align: 'right',
                    width: 100,
                    hideInSearch: true,
                    render: (_, record) => {
                        return record?.PropertyFee ?
                            numeral(getMoney(record?.PropertyFee)).format('0,0.00')
                            : record?.PropertyFee === 0 ? <span style={{ color: 'red' }}>0</span> : ''
                    }
                },
                {
                    title: <div style={{ textAlign: 'center' }}>房租</div>,
                    dataIndex: 'HouseRent',
                    valueType: 'digit',
                    align: 'right',
                    width: 80,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>罚款</div>,
                    dataIndex: 'BreachPenalty',
                    valueType: 'digit',
                    align: 'right',
                    width: 80,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>电费</div>,
                    dataIndex: 'ElectricityCharge',
                    valueType: 'digit',
                    align: 'right',
                    width: 80,
                    hideInSearch: true,
                    render: (_, record) => {
                        return record?.ElectricityCharge ?
                            numeral(getMoney(record?.ElectricityCharge)).format('0,0.00')
                            : record?.ElectricityCharge === 0 ? <span style={{ color: 'red' }}>0</span> : ''
                    }
                },
                {
                    title: <div style={{ textAlign: 'center' }}>水费</div>,
                    dataIndex: 'WaterCharge',
                    valueType: 'digit',
                    align: 'right',
                    width: 80,
                    hideInSearch: true,
                    render: (_, record) => {
                        return record?.WaterCharge ?
                            numeral(getMoney(record?.WaterCharge)).format('0,0.00')
                            : record?.WaterCharge === 0 ? <span style={{ color: 'red' }}>0</span> : ''
                    }
                },
                {
                    title: <div style={{ textAlign: 'center' }}>其他</div>,
                    dataIndex: 'OtherFee',
                    valueType: 'digit',
                    align: 'right',
                    width: 80,
                    hideInSearch: true,
                }
            ]
        },
        {
            title: '已缴费用',
            dataIndex: '',
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>合计</div>,
                    dataIndex: 'PaidFee',
                    valueType: 'digit',
                    align: 'right',
                    width: 100,
                    hideInSearch: true,
                    render: (_, record) => {
                        const str: string = `水费(${numeral(record?.SHOPEXPENSE_AMOUNT_1000).format('0.00')}) + 电费(${numeral(record?.SHOPEXPENSE_AMOUNT_2000).format('0.00')}) + 房租(${numeral(record?.SHOPEXPENSE_AMOUNT_3000).format('0.00')})
                        + 物业费(${numeral(record?.SHOPEXPENSE_AMOUNT_5000).format('0.00')})`

                        return record?.PaidFee
                            ?
                            <Tooltip title={str}>
                                <span>{numeral(record?.PaidFee).format('0,0.00')}</span>
                            </Tooltip>
                            : ''
                    }
                },
                {
                    title: <div style={{ textAlign: 'center' }}>水费</div>,
                    dataIndex: 'SHOPEXPENSE_AMOUNT_1000',
                    valueType: 'digit',
                    align: 'right',
                    width: 80,
                    hideInSearch: true,
                    render: (_, record) => {
                        return record?.SHOPEXPENSE_AMOUNT_1000 ?
                            numeral(getMoney(record?.SHOPEXPENSE_AMOUNT_1000)).format('0,0.00')
                            : record?.SHOPEXPENSE_AMOUNT_1000 === 0 ? <span style={{ color: 'red' }}>0</span> : ''
                    }
                },
                {
                    title: <div style={{ textAlign: 'center' }}>电费</div>,
                    dataIndex: 'SHOPEXPENSE_AMOUNT_2000',
                    valueType: 'digit',
                    align: 'right',
                    width: 80,
                    hideInSearch: true,
                    render: (_, record) => {
                        return record?.SHOPEXPENSE_AMOUNT_2000 ?
                            numeral(getMoney(record?.SHOPEXPENSE_AMOUNT_2000)).format('0,0.00')
                            : record?.SHOPEXPENSE_AMOUNT_2000 === 0 ? <span style={{ color: 'red' }}>0</span> : ''
                    }
                },
                {
                    title: <div style={{ textAlign: 'center' }}>房租</div>,
                    dataIndex: 'SHOPEXPENSE_AMOUNT_3000',
                    valueType: 'digit',
                    align: 'right',
                    width: 80,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>物业费</div>,
                    dataIndex: 'SHOPEXPENSE_AMOUNT_5000',
                    valueType: 'digit',
                    align: 'right',
                    width: 100,
                    hideInSearch: true,
                    render: (_, record) => {
                        return record?.SHOPEXPENSE_AMOUNT_5000 ?
                            numeral(getMoney(record?.SHOPEXPENSE_AMOUNT_5000)).format('0,0.00')
                            : record?.SHOPEXPENSE_AMOUNT_5000 === 0 ? <span style={{ color: 'red' }}>0</span> : ''
                    }
                }
            ]
        },
        {
            title: <div style={{ textAlign: 'center' }}>退补款</div>,
            dataIndex: 'RefundSupplement',
            valueType: 'digit',
            align: 'right',
            fixed: 'right',
            width: 100,
            hideInSearch: true,
            render: (_, record) => {
                const str: string = `业主收款(${record?.RoyaltyAmount || 0}) - 应收费用(${record?.ReceivableAmount || 0}) + 已缴费用(${record?.PaidFee || 0})`

                return record?.RefundSupplement ?
                    <Tooltip title={str}>
                        <span>{numeral(record?.RefundSupplement).format('0,0.00')}</span>
                    </Tooltip>
                    : ''
            }
        },
    ]

    return (
        <div>
            <ProTable
                rowKey={(record) => {
                    return `${record?.ShopRoyalty_Id}-${record?.PeriodIndexStr}-${record?.StartDate}-${record?.EndDate}-${record?.level}`
                }}
                actionRef={actionRef}
                formRef={formRef}
                columns={detailColumns}
                bordered
                search={false}
                className={'detailTable'}
                request={async (params: any) => {
                    const req = {
                        BUSINESSPROJECT_ID: currentDetail?.BUSINESSPROJECT_ID,
                        SHOPROYALTY_ID: currentDetail?.ShopRoyaltyId || currentDetail?.SHOPROYALTY_ID
                    }
                    const data = await handleGetTableMonthlyReconciliation(req)
                    console.log('321312312', data);
                    let res: any = {}
                    let list: any = []
                    let isYearList: any = {}
                    if (data.List && data.List.length > 0) {
                        res = data.List[0]
                        if (data.List[0].ProjectPeriodList) {
                            const resObj: any = data.List[0].ProjectPeriodList
                            isYearList = wrapTreeNode([data.List[0].ProjectPeriodList])[0]
                            if (resObj.children && resObj.children.length > 0) {
                                list = wrapTreeNode(resObj.children)
                            }
                        }
                    }
                    console.log('list321312312312', list);
                    if (list && list.length > 0) {
                        const rowList: string[] = []
                        list.forEach((item: any) => {
                            rowList.push(`${item?.ShopRoyalty_Id}-${item?.PeriodIndexStr}-${item?.StartDate}-${item?.EndDate}-${item?.level}`)
                        })
                        setExpandedRowKeys(rowList)
                        return { data: list, success: true }
                    }
                    setExpandedRowKeys([])
                    return { data: [], success: true }
                }}
                expandable={{
                    expandRowByClick: true,
                    expandedRowKeys
                }}
                scroll={{ x: 'max-content' }}
                headerTitle={`合作商户合同期结算明细表`} // 列表表头
                pagination={false}
                columnsState={{
                    value: recordColumnsStateMap,
                    onChange: setRecordColumnsStateMap,
                }}
            >
            </ProTable>
        </div>
    )
}

export default connect(({ user, }: ConnectState) => ({
    currentUser: user.currentUser,
}))(YearContentDetail);