import React, { useMemo, useState } from 'react';
import DrawerPro from '@/components/DrawerPro';
import AutoTable from '@/components/AutoTable/mtable';
import PremButton from '@/components/PremButton';
import { Tooltip } from "antd";
import Filedetail from "@/components/Filedetail";
import { doFetch, exportFetch } from '@/utils/doFetch';
import { message } from "antd";
const statusColor = {
    1: '#00bce4',
    2: '#7ac143',
    3: '#6a737b'
}
const commona = [
    {
        title: '当期金额',
        dataIndex: 'thisPrice',
        key: 'thisPrice',
        search: false
    },
    {
        title: '回款日期',
        dataIndex: 'collectionDate',
        key: 'collectionDate',
        search: false
    },
    {
        title: '预警日期',
        dataIndex: 'warnDate',
        key: 'warnDate',
        search: false
    },
    {
        title: '状态',
        dataIndex: 'statusName',
        key: 'statusName',
        search: false,
        render: (_, row) => {
            return <span style={{ color: statusColor[row.status] }}>{row.statusName}</span>
        }
    }
],
    commonb = [
        {
            title: '是否回款',
            dataIndex: 'isCollectionName',
            key: 'isCollectionName',
            search: false
        },
        {
            title: '回款时间',
            dataIndex: 'collectionTime',
            key: 'collectionTime',
            search: false
        },
        {
            title: '回款形式',
            dataIndex: 'collectionTypeName',
            key: 'collectionTypeName',
            search: false
        }
    ],
    columnsc = [
        {
            title: '基本信息',
            valueType: 'split'
        },
        {
            title: '期数',
            dataIndex: 'thisTenancy',
            key: 'thisTenancy'
        },
        {
            title: '当期开始时间',
            dataIndex: 'tenancyStartDate',
            key: 'tenancyStartDate'
        },
        {
            title: '当期结束时间',
            dataIndex: 'tenancyEndDate',
            key: 'tenancyEndDate'
        },
        ...commona,
        {
            title: '回款信息',
            valueType: 'split'
        },
        ...commonb,
        {
            title: '回款确认人',
            dataIndex: 'collectionUserName',
            key: 'collectionUserName'
        },
        {
            title: '是否逾期',
            dataIndex: 'isOverdueName',
            key: 'isOverdueName'
        },
        {
            title: '减免租金信息',
            valueType: 'split'
        },
        {
            title: '当期租金减免金额',
            dataIndex: 'reducePrice',
            key: 'reducePrice'
        },
        {
            title: '最近租金减免时间',
            dataIndex: 'reduceTime',
            key: 'reduceTime'
        },
        {
            title: '最近租金减免人',
            dataIndex: 'reduceUserName',
            key: 'reduceUserName'
        },
        {
            title: '减免情况说明',
            dataIndex: 'reduceRemark',
            key: 'reduceRemark'
        },
        {
            title: '相关文件',
            dataIndex: 'reduceFileList',
            key: 'reduceFileList',
            render: (_, row) => {
                return <Filedetail files={row?.['reduceFileList']} />
            }
        },
        {
            title: '开票信息',
            valueType: 'split'
        },
        {
            title: '是否开票',
            dataIndex: 'isOpenName',
            key: 'isOpenName'
        },
        {
            title: '开票时间',
            dataIndex: 'openTime',
            key: 'openTime'
        },
        {
            title: '开票记录人',
            dataIndex: 'openUserName',
            key: 'openUserName'
        },
    ];
const Leaseterminformation = ({ drawer, boxRef }) => {
    const [detail, cd] = useState({
        open: false,
    });
    const columns = [
        {
            title: '期数',
            dataIndex: 'thisTenancy',
            key: 'thisTenancy',
            search: false
        },
        ...commona,
        ...commonb,
        {
            title: '是否逾期',
            dataIndex: 'isOverdueName',
            key: 'isOverdueName',
            search: false
        },
        {
            title: '租金减免金额',
            dataIndex: 'reducePrice',
            key: 'reducePrice',
            search: false
        },
        {
            title: '租金情况说明',
            dataIndex: 'reduceRemark',
            key: 'reduceRemark',
            search: false
        },
        {
            title: '是否开票',
            dataIndex: 'isOpenName',
            key: 'isOpenName',
            search: false
        },
        {
            title: '操作',
            valueType: 'option',
            width: 80,
            render: (text, row, _, action) => rightExtra(text, row, _, action),
        }
    ];
    const rightExtra = (text, row, _, action) => {
        return [
            <PremButton
                key='confirm'
                btn={{
                    size: 'small',
                    onClick: () => {
                        cd((s) => ({
                            ...s,
                            open: true,
                            item: row,
                            title: '租期详情',
                            val: 'detail'
                        }));
                    },
                }}
            >
                详情
            </PremButton>
        ]
    }

    return <div style={{ position: "relative" }}>
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <PremButton
                key='export'
                btn={{
                    type: 'primary',
                    onClick: async () => {
                        message.warning('导出中，请稍后');
                        await exportFetch({ url: '/lease/umContractEquipmentTenancy/exportExcelTenancy', params: { id: drawer?.item?.id } });
                    }
                }}
            >
                导出
            </PremButton>
        </div>
        <AutoTable
            columns={columns}
            path={'/lease/umContractEquipmentTenancy/queryByContractEquipmentId'}
            resizeable={false}
            bordered={false}
            extraparams={{ id: drawer?.item?.id }}
            options={false}
            pagination='false'
        />
        <DrawerPro
            {...detail}
            fields={columnsc}
            params={{ id: detail?.item?.id }}
            detailpath='/lease/umContractEquipmentTenancy/queryDetail'
            placement="right"
            onClose={() => {
                cd((s) => ({
                    ...s,
                    open: false,
                }));
            }}
            getContainer={() => boxRef.current}

        >
        </DrawerPro>
    </div>
}
export default Leaseterminformation;