// 卡券领取统计 
import { connect } from "umi";
import type { CurrentUser } from "umi";
import type { ConnectState } from "@/models/connect";
import React, { useRef, useState } from "react";
import { Drawer, Modal, type FormInstance } from "antd";
import type { ActionType } from "@ant-design/pro-table";
import ProTable from "@ant-design/pro-table";
import PageTitleBox from "@/components/PageTitleBox";
import { handeGetCouponStockList } from "@/pages/travelMember/service";
import moment from 'moment'
import CardVoucherSearch from "../CardVoucherSearch";
import { highlightText } from "@/utils/highlightText";
import CardInfo from "../CardInformationManager/components/CardInfo";


const CardHaveCollection: React.FC<{ currentUser: CurrentUser }> = (props) => {
    const { currentUser } = props
    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();
    const [reqDetailList, setReqDetailList] = useState<any>(); // 合计项数据源
    const [printOut, setPrintOut] = useState<any>(); // 打印数据的内容
    const [collapsible, setCollapsible] = useState<boolean>(false)
    const [treeView, setTreeView] = useState<any>()
    const [printIndex, setPrintIndex] = useState<number>(new Date().getTime())


    // 树相关的属性和方法
    const [selectedId, setSelectedId] = useState<string>()
    // 导出的加载效果
    const [showLoading, setShowLoading] = useState<boolean>(false)
    // 是否显示打印的表格
    const [showExportTable, setShowExportTable] = useState<boolean>(false)
    // 查询的条件
    const [searchParams, setSearchParams] = useState<any>()

    // 点击行的数据
    const [currentRow, setCurrentRow] = useState<any>()
    // 显示详情
    const [showDetial, setShowDetail] = useState<any>()
    // 显示详情
    const [showCouponDetial, setShowCouponDetail] = useState<any>()
    // 当前查询的文字
    const [currentSearchText, setCurrentSearchText] = useState<string>('')

    const columns: any = [
        {
            title: '查询内容',
            hideInTable: true,
            dataIndex: 'searchValue',
            fieldProps: {
                placeholder: '请输入卡券名称'
            }
        },
        {
            title: "卡券类型",
            dataIndex: "COUPON_TYPE",
            width: 120,
            align: 'center',
            ellipsis: true,
            valueType: 'select',
            valueEnum: {
                "1000": "满减券",
                "2000": "折扣券",
                "3000": "抵扣券",
                "4000": "兑换券",
                "5000": "代金券",
                "9000": "实物券"
            }
        },
        {
            title: '领取时间',
            dataIndex: 'search_date',
            valueType: 'dateRange',
            hideInTable: true,
            hideInDescriptions: true,
            search: {
                transform: (value) => {
                    return {
                        STARTDATE: value[0],
                        ENDDATE: value[1],
                    };
                },
            },
            initialValue: [moment().startOf('M').format('YYYY-MM-DD'), moment().add(-1, 'day').format('YYYY-MM-DD')],
        },
        {
            title: "卡券名称",
            width: 250,
            dataIndex: "COUPON_NAME",
            align: 'center',
            hideInSearch: true,
            ellipsis: true,
            render: (_, record) => {
                return record?.COUPON_NAME ?
                    <a onClick={() => {
                        setCurrentRow(record)
                        setShowCouponDetail(true)
                    }}>
                        {highlightText(record?.COUPON_NAME, currentSearchText)}
                    </a> : ""
            }
        },
        {
            title: "发放数量",
            dataIndex: "COUPON_QUOTA",
            width: 120,
            align: 'center',
            sorter: (a, b) => a.COUPON_QUOTA - b.COUPON_QUOTA,
            hideInSearch: true,
            ellipsis: true,
        },
        {
            title: "领取数量",
            dataIndex: "TAKE_COUNT",
            width: 120,
            align: 'center',
            hideInSearch: true,
            ellipsis: true,
            sorter: (a, b) => a.TAKE_COUNT - b.TAKE_COUNT,
            render: (_, record) => {
                return record?.TAKE_COUNT ? <a onClick={() => {
                    setCurrentRow(record)
                    setShowDetail(true)
                }}>{record?.TAKE_COUNT}</a> : "-"
            }
        },
        {
            title: "剩余数量",
            dataIndex: "LAST_COUNT",
            width: 120,
            align: 'center',
            hideInSearch: true,
            ellipsis: true,
            sorter: (a, b) => a.LAST_COUNT - b.LAST_COUNT,
        },
        {
            title: "发放金额",
            dataIndex: "QUOTA_AMOUNT",
            width: 120,
            align: 'center',
            hideInSearch: true,
            ellipsis: true,
            sorter: (a, b) => a.QUOTA_AMOUNT - b.QUOTA_AMOUNT,
        },
        {
            title: "领取金额",
            dataIndex: "TAKE_AMOUNT",
            width: 120,
            align: 'center',
            hideInSearch: true,
            ellipsis: true,
            sorter: (a, b) => a.TAKE_AMOUNT - b.TAKE_AMOUNT,
        },
        {
            title: "活动开始时间",
            dataIndex: "START_TIME",
            width: 180,
            align: 'center',
            hideInSearch: true,
            ellipsis: true,
            render: (_, record) => {
                return record?.START_TIME ? moment(record?.START_TIME).format('YYYY-MM-DD') : "-"
            }
        },
        {
            title: "活动结束时间",
            dataIndex: "END_TIME",
            width: 180,
            align: 'center',
            hideInSearch: true,
            ellipsis: true,
            render: (_, record) => {
                return record?.END_TIME ? moment(record?.END_TIME).format('YYYY-MM-DD') : "-"
            }
        },
    ]

    return (
        <div ref={(el) => {
            // 打印报表
            if (!reqDetailList || reqDetailList.length === 0) return;
            setPrintOut(el);
        }} >
            <div style={{ backgroundColor: '#fff', display: 'flex' }}>
                <div style={{
                    width: '100%',
                    paddingTop: 0,
                    paddingBottom: 0,
                    paddingRight: 0
                }}>
                    <ProTable
                        actionRef={actionRef}
                        formRef={formRef}
                        columns={columns}
                        bordered
                        expandable={{
                            expandRowByClick: true
                        }}
                        scroll={{ y: 'calc(100vh - 430px)' }}
                        // headerTitle={<span style={{ color: "#1890ff", fontSize: 14, fontWeight: 600 }}>单品销售排行统计</span>}
                        headerTitle={<PageTitleBox props={props} />}
                        search={{ span: 6 }}
                        request={async (params) => {
                            const req: any = {
                                SearchParameter: {
                                    COUPON_TYPES: params?.COUPON_TYPE || "",
                                    TAKE_TIME_Start: params?.STARTDATE || "",// 开始时间
                                    TAKE_TIME_End: params?.ENDDATE || "",// 结束时间
                                    COUPON_ISVALID: 1
                                },
                                PageIndex: 1,
                                PageSize: 999999,
                                keyWord: {
                                    key: "COUPON_NAME",
                                    value: params?.searchValue || ""
                                },
                                sortStr: "END_TIME desc"
                            }
                            setSearchParams(params)
                            const data = await handeGetCouponStockList(req)
                            setCurrentSearchText(params?.searchValue || "")
                            console.log('datadatadatadatadata', data);
                            if (data.List && data.List.length > 0) {
                                return { data: data.List, success: true }
                            }
                            return { data: [], success: true }

                        }}
                        toolbar={{
                            actions: [

                            ]
                        }}
                    />
                </div>
            </div>


            <Drawer
                title={currentRow?.COUPON_NAME || ""}
                destroyOnClose={true}
                width={'80%'}
                bodyStyle={{
                    height: '700px', // 你可以根据需要调整高度
                    overflowY: 'auto',
                }}
                visible={showDetial}
                onClose={() => {
                    setCurrentRow(null)
                    setShowDetail(false)
                }}
            >
                <CardVoucherSearch isComponent={true} parentRow={currentRow} />
            </Drawer>

            {/* 卡券的编辑 还是 新增 组件 */}

            <CardInfo showDetail={showCouponDetial} currentRow={currentRow} currentUser={currentUser} parentRef={actionRef} setShowDetail={setShowCouponDetail} setCurrentRow={setCurrentRow} readonly={true} />
        </div >
    )
}

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