// 运营活动统计
import { connect, CurrentUser } from "umi";
import { ConnectState } from "@/models/connect";
import { useEffect, useRef, useState } from "react";
import { Button, Col, Drawer, FormInstance, Row, Spin, Tooltip } from "antd";
import ProForm, { ProFormDateRangePicker, ProFormSelect } from "@ant-design/pro-form";
import './BusinessActivityStatistics.less'
import { handeGetMarketingSummary, handeGetMembershipCount } from "../service";
import session from "@/utils/session";
import ProTable, { ActionType } from "@ant-design/pro-table";
import MemberInfor from "../memberInfor";
import moment from 'moment'
import addIcon from '@/assets/detail/addIcon.png'
import reduceIcon from '@/assets/detail/reduceIcon.png'

const BusinessActivityStatistics: React.FC<{ currentUser: CurrentUser | undefined }> = (props) => {
    const { currentUser } = props
    const formRef = useRef<FormInstance>();
    const actionRef = useRef<ActionType>();

    // 选择的tab
    const [selectPageTab, setSelectPageTab] = useState<any>(1)
    // 会员类型数据
    const [membershipType, setMembershipType] = useState<any>()
    // 活动总数
    const [activityTotal, setActivityTotal] = useState<number>()
    // 会员等级数据
    const [revenueList, setRevenueList] = useState<any>()
    // 营收合计
    const [revenueTotal, setRevenueTotal] = useState<number>()
    // 显示详情抽屉
    const [showDetail, setShowDetail] = useState<boolean>(false)
    const [currentRow, setCurrentRow] = useState<any>()
    // 抽屉显示的标题
    const [currentDrawerTitle, setCurrentDrawerTitle] = useState<string>()
    // 1 是 会员类型  2是 会员等级
    const [searchType, setSearchType] = useState<any>()
    // 对应的枚举类型
    const [valueType, setValueType] = useState<any>()
    // 显示加载效果
    const [showLoading, setShowLoading] = useState<boolean>(false)

    let MEMBERSHIPLEVELYNObj = session.get('MEMBERSHIPLEVELYNObj')
    let MEMBERSHIPLEVELYNList = session.get('MEMBERSHIPLEVELYNList')
    let MEMBERSHIPTYPEYNObj = session.get('MEMBERSHIPTYPEYNObj')
    let MEMBERSHIPTYPEYNList = session.get('MEMBERSHIPTYPEYNList')


    const handleGetData = async (formData?: any) => {
        console.log('formDataformDataformData', formData);
        let [start, end] = ['', '']
        if (formData && formData?.searchTime) {
            [start, end] = formData.searchTime
        }

        const req: any = {
            CalcType: 3, // 拉新
            OwnerUnitId: currentUser?.OwnerUnitId,
            ExcludeTest: formData ? formData?.ExcludeTest === 1 ? true : false : true,
            StartDate: start ? start : "",
            EndDate: end ? end : "",
            MembershipType: formData?.MembershipType === 1 ? '' : formData?.MembershipType || "",
            MembershipLevel: formData?.MembershipLevel === '1' ? '' : formData?.MembershipLevel || "",
        }

        const req2: any = {
            OwnerUnitId: currentUser?.OwnerUnitId,
            StartDate: start ? start : "",
            EndDate: end ? end : "",
            SalebillType: "",
            MembershipType: formData?.MembershipType === 1 ? '' : formData?.MembershipType || "",
            MembershipLevel: formData?.MembershipLevel === '1' ? '' : formData?.MembershipLevel || "",
        }


        setShowLoading(true)
        const data = await handeGetMembershipCount(req)
        const data2 = await handeGetMarketingSummary(req2)
        setShowLoading(false)
        console.log('datadatadatadata', data);

        setMembershipType(data.List)
        setActivityTotal(data.OtherData)
        setRevenueList(data2.List)
    }

    // 点击事件
    const handleShowTableData = async (type: number, memberType: any) => {
        // type 1 的话是 会员类型  2 的话是 会员等级   memberType 对应的枚举值
        setCurrentDrawerTitle(`${type === 1 ? '会员类型' : type === 2 ? '会员等级' : ''}【${type === 1 ? MEMBERSHIPTYPEYNObj && memberType ? MEMBERSHIPTYPEYNObj[memberType] : '' : type === 2 ? MEMBERSHIPLEVELYNObj && memberType ? MEMBERSHIPLEVELYNObj[memberType] : '' : ''}】`)
        setSearchType(type)
        setValueType(memberType)
        setShowDetail(true)
    }

    useEffect(() => {
        handleGetData({ searchTime: [moment().startOf('M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')] })
    }, [])

    return (
        <div className="BusinessActivityStatisticsMain">
            {
                showLoading ?
                    <div
                        style={{
                            width: '100%',
                            height: '100%',
                            background: 'rgba(0,0,0,0.1)',
                            position: 'absolute',
                            zIndex: 5,
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}
                    >
                        <div style={{
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            padding: '15px 20px 10px',
                            background: '#fff',
                            borderRadius: '8px',
                            width: '200px'
                        }}>
                            <Spin />
                            <span style={{ marginLeft: '5px' }}>加载中...</span>
                        </div>
                    </div> : ''
            }

            <div className="BusinessActivityStatisticsTop">
                {/* <div className="BusinessActivityStatisticsTitleBox">
                    <div className={selectPageTab === 1 ? 'BusinessActivityStatisticsTitle BusinessActivityStatisticsTitleSelect' : 'BusinessActivityStatisticsTitle'} onClick={() => {
                        setSelectPageTab(1)
                    }}>会员类型</div>
                    <div style={{ marginLeft: '48px' }} className={selectPageTab === 2 ? 'BusinessActivityStatisticsTitle BusinessActivityStatisticsTitleSelect' : 'BusinessActivityStatisticsTitle'} onClick={() => {
                        setSelectPageTab(2)
                    }}>会员等级</div>
                </div> */}
                <ProForm
                    layout={'horizontal'}
                    formRef={formRef}
                    submitter={false}
                    onFinish={async (values: any) => {
                        console.log('valuesvaluesvaluesvalues', values);
                        handleGetData(values)
                    }}
                >
                    <Row gutter={16} style={{ marginTop: "16px" }}>
                        <Col span={6}>
                            <ProFormDateRangePicker
                                label={"查询时间"}
                                name={"searchTime"}
                                // initialValue={[moment().startOf('M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]}
                                initialValue={[moment().startOf('M'), moment()]}
                                fieldProps={{
                                    ranges: {
                                        "本月": [moment().startOf('M'), moment()],
                                        "上月": [moment().subtract(1, 'M').startOf('M'), moment().subtract(1, 'M').endOf('M')],
                                        "近三月": [moment().subtract(3, 'M').startOf('M'), moment().endOf('M')],
                                        "近半年": [moment().subtract(6, 'M').startOf('M'), moment().endOf('M')],
                                    }
                                }}
                            />
                        </Col>
                        <Col span={6}>
                            <ProFormSelect
                                label={"会员类型"}
                                name={"MembershipType"}
                                options={MEMBERSHIPTYPEYNList}
                            />

                        </Col>
                        <Col span={6}>
                            <ProFormSelect
                                label={"会员等级"}
                                name={"MembershipLevel"}
                                options={MEMBERSHIPLEVELYNList}
                            />
                        </Col>
                        <Col span={6}>

                            <ProFormSelect
                                label={"是否排除测试会员"}
                                name={"ExcludeTest"}
                                options={[{ label: '是', value: 1 }, { label: '否', value: 0 }]}
                                initialValue={1}
                            />

                        </Col>
                        <Col span={18}></Col>
                        <Col span={6}>
                            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                                <Button style={{ marginRight: '8px' }} onClick={() => {
                                    formRef.current?.resetFields()
                                }}>重置</Button>
                                <Button type={"primary"} onClick={() => {
                                    formRef.current?.submit()
                                }}>查询</Button>
                            </div>
                        </Col>
                    </Row>
                </ProForm>
            </div>


            <div className="BusinessActivityStatisticsBottom">
                {
                    membershipType && membershipType.length > 0 ?
                        <>
                            <div className="BusinessActivityStatisticsTitleBox">
                                <div className="BusinessActivityStatisticsTitle">运营活动{activityTotal ? `（${activityTotal}人）` : ""}</div>
                            </div>

                            <div className="BusinessActivityStatisticsContentBox">
                                <div className="BusinessActivityStatisticsItemOther">
                                    {
                                        membershipType.map((item: any) => {
                                            return <div className="BusinessActivityStatisticsOtherItem">
                                                <div className="otherItemTitle">{item.label}</div>
                                                <div className="otherItemValue">{item.value}<span className="otherItemValueUnit">人</span></div>
                                                <div className="addLabel">占比</div>
                                                <div className="otherItemAddBox">
                                                    <span className="addValue">{item.key ? item.key + '%' : ""}</span>
                                                </div>
                                            </div>
                                        })
                                    }

                                </div>
                            </div>
                        </>
                        : ""
                }

            </div>

            <div className="BusinessActivityStatisticsBottom">
                {
                    revenueList && revenueList.length > 0 ?
                        revenueList.map((item: any) => {
                            return <div style={{ marginBottom: '16px' }}>
                                <div className="BusinessActivityStatisticsTitleBox">
                                    <div className="BusinessActivityStatisticsTitle">{item.MarketingActivity}</div>
                                </div>

                                <div className="BusinessActivityStatisticsContentBox">
                                    <div className="BusinessActivityStatisticsItemOther">
                                        <div className="BusinessActivityStatisticsOtherItem">
                                            <div className="otherItemTitle">实际销售金额（扣除退款）</div>
                                            <div className="otherItemValue">{item && item?.TotalActualAmount ? item?.TotalActualAmount.summaryData : "-"}</div>
                                            <div className="addLabel">环比增长</div>
                                            <div className="otherItemAddBox">
                                                {
                                                    item && item?.TotalActualAmount && item?.TotalActualAmount.QOQData && item?.TotalActualAmount.summaryData ?
                                                        <img className="addIcon" src={((item?.TotalActualAmount.summaryData - item?.TotalActualAmount.QOQData) / item?.TotalActualAmount.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
                                                }
                                                {
                                                    item && item?.TotalActualAmount && item?.TotalActualAmount.QOQData && item?.TotalActualAmount.summaryData ?
                                                        <Tooltip title={`((${item?.TotalActualAmount.summaryData} - ${item?.TotalActualAmount.QOQData}) / ${item?.TotalActualAmount.QOQData}) * 100`}>
                                                            <span className="addValue">{(((item?.TotalActualAmount.summaryData - item?.TotalActualAmount.QOQData) / item?.TotalActualAmount.QOQData) * 100).toFixed(2) + '%'}</span>
                                                        </Tooltip>
                                                        : "-"
                                                }
                                            </div>
                                        </div>

                                        <div className="BusinessActivityStatisticsOtherItem">
                                            <div className="otherItemTitle">成交销售金额</div>
                                            <div className="otherItemValue">{item && item?.TotalSuccAmount ? item?.TotalSuccAmount.summaryData : "-"}</div>
                                            <div className="addLabel">环比增长</div>
                                            <div className="otherItemAddBox">
                                                {
                                                    item && item?.TotalSuccAmount && item?.TotalSuccAmount.QOQData && item?.TotalSuccAmount.summaryData ?
                                                        <img className="addIcon" src={((item?.TotalSuccAmount.summaryData - item?.TotalSuccAmount.QOQData) / item?.TotalSuccAmount.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
                                                }
                                                {
                                                    item && item?.TotalSuccAmount && item?.TotalSuccAmount.QOQData && item?.TotalSuccAmount.summaryData ?
                                                        // <span className="addValue">{item && item?.TotalSuccAmount ? item?.TotalSuccAmount.QOQData : "-"}</span>
                                                        <Tooltip title={`((${item?.TotalSuccAmount.summaryData} - ${item?.TotalSuccAmount.QOQData}) / ${item?.TotalSuccAmount.QOQData}) * 100`}>
                                                            <span className="addValue">{(((item?.TotalSuccAmount.summaryData - item?.TotalSuccAmount.QOQData) / item?.TotalSuccAmount.QOQData) * 100).toFixed(2) + '%'}</span>
                                                        </Tooltip>
                                                        : "-"
                                                }
                                            </div>
                                        </div>

                                        <div className="BusinessActivityStatisticsOtherItem">
                                            <div className="otherItemTitle">成交订单笔数</div>
                                            <div className="otherItemValue">{item && item?.TotalSuccTicket ? item?.TotalSuccTicket.summaryData : "-"}</div>
                                            <div className="addLabel">环比增长</div>
                                            <div className="otherItemAddBox">
                                                {
                                                    item && item?.TotalSuccTicket && item?.TotalSuccTicket.QOQData && item?.TotalSuccTicket.summaryData ?
                                                        <img className="addIcon" src={((item?.TotalSuccTicket.summaryData - item?.TotalSuccTicket.QOQData) / item?.TotalSuccTicket.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
                                                }
                                                {
                                                    item && item?.TotalSuccTicket && item?.TotalSuccTicket.QOQData && item?.TotalSuccTicket.summaryData ?
                                                        <Tooltip title={`((${item?.TotalSuccTicket.summaryData} - ${item?.TotalSuccTicket.QOQData}) / ${item?.TotalSuccTicket.QOQData}) * 100`}>
                                                            <span className="addValue">{(((item?.TotalSuccTicket.summaryData - item?.TotalSuccTicket.QOQData) / item?.TotalSuccTicket.QOQData) * 100).toFixed(2) + '%'}</span>
                                                        </Tooltip>
                                                        : "-"
                                                }
                                            </div>
                                        </div>

                                        {/* <div className="BusinessActivityStatisticsOtherItem">
                                            <div className="otherItemTitle">成交销售数量</div>
                                            <div className="otherItemValue">{item && item?.TotalCount ? item?.TotalCount.summaryData : "-"}</div>
                                            <div className="addLabel">环比增长</div>
                                            <div className="otherItemAddBox">
                                                {
                                                    item && item?.TotalCount && item?.TotalCount.QOQData && item?.TotalCount.summaryData ?
                                                        <img className="addIcon" src={((item?.TotalCount.summaryData - item?.TotalCount.QOQData) / item?.TotalCount.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
                                                }
                                                {
                                                    item && item?.TotalCount && item?.TotalCount.QOQData && item?.TotalCount.summaryData ?
                                                        // <span className="addValue">{item && item?.TotalCount ? item?.TotalCount.QOQData : "-"}</span>
                                                        <Tooltip title={`((${item?.TotalCount.summaryData} - ${item?.TotalCount.QOQData}) / ${item?.TotalCount.QOQData}) * 100`}>
                                                            <span className="addValue">{(((item?.TotalCount.summaryData - item?.TotalCount.QOQData) / item?.TotalCount.QOQData) * 100).toFixed(2) + '%'}</span>
                                                        </Tooltip>
                                                        : "-"
                                                }
                                            </div>
                                        </div>

                                        <div className="BusinessActivityStatisticsOtherItem">
                                            <div className="otherItemTitle">交易失败笔数</div>
                                            <div className="otherItemValue">{item && item?.TotalFailureTicket ? item?.TotalFailureTicket.summaryData : "-"}</div>
                                            <div className="addLabel">环比增长</div>
                                            <div className="otherItemAddBox">
                                                {
                                                    item && item?.TotalFailureTicket && item?.TotalFailureTicket.QOQData && item?.TotalFailureTicket.summaryData ?
                                                        <img className="addIcon" src={((item?.TotalFailureTicket.summaryData - item?.TotalFailureTicket.QOQData) / item?.TotalFailureTicket.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
                                                }
                                                {
                                                    item && item?.TotalFailureTicket && item?.TotalFailureTicket.QOQData && item?.TotalFailureTicket.summaryData ?
                                                        // <span className="addValue">{item && item?.TotalFailureTicket ? item?.TotalFailureTicket.QOQData : "-"}</span>
                                                        <Tooltip title={`((${item?.TotalFailureTicket.summaryData} - ${item?.TotalFailureTicket.QOQData}) / ${item?.TotalFailureTicket.QOQData}) * 100`}>
                                                            <span className="addValue">{(((item?.TotalFailureTicket.summaryData - item?.TotalFailureTicket.QOQData) / item?.TotalFailureTicket.QOQData) * 100).toFixed(2) + '%'}</span>
                                                        </Tooltip>
                                                        : "-"
                                                }
                                            </div>
                                        </div>

                                        <div className="BusinessActivityStatisticsOtherItem">
                                            <div className="otherItemTitle">退款订单笔数</div>
                                            <div className="otherItemValue">{item && item?.TotalRefundTicket ? item?.TotalRefundTicket.summaryData : "-"}</div>
                                            <div className="addLabel">环比增长</div>
                                            <div className="otherItemAddBox">
                                                {
                                                    item && item?.TotalRefundTicket && item?.TotalRefundTicket.QOQData && item?.TotalRefundTicket.summaryData ?
                                                        <img className="addIcon" src={((item?.TotalRefundTicket.summaryData - item?.TotalRefundTicket.QOQData) / item?.TotalRefundTicket.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
                                                }
                                                {
                                                    item && item?.TotalRefundTicket && item?.TotalRefundTicket.QOQData && item?.TotalRefundTicket.summaryData ?
                                                        // <span className="addValue">{item && item?.TotalRefundTicket ? item?.TotalRefundTicket.QOQData : "-"}</span>
                                                        <Tooltip title={`((${item?.TotalRefundTicket.summaryData} - ${item?.TotalRefundTicket.QOQData}) / ${item?.TotalRefundTicket.QOQData}) * 100`}>
                                                            <span className="addValue">{(((item?.TotalRefundTicket.summaryData - item?.TotalRefundTicket.QOQData) / item?.TotalRefundTicket.QOQData) * 100).toFixed(2) + '%'}</span>
                                                        </Tooltip>
                                                        : "-"
                                                }
                                            </div>
                                        </div>

                                        <div className="BusinessActivityStatisticsOtherItem">
                                            <div className="otherItemTitle">退款订单金额</div>
                                            <div className="otherItemValue">{item && item?.TotalRefundAmount ? item?.TotalRefundAmount.summaryData : "-"}</div>
                                            <div className="addLabel">环比增长</div>
                                            <div className="otherItemAddBox">
                                                {
                                                    item && item?.TotalRefundAmount && item?.TotalRefundAmount.QOQData && item?.TotalRefundAmount.summaryData ?
                                                        <img className="addIcon" src={((item?.TotalRefundAmount.summaryData - item?.TotalRefundAmount.QOQData) / item?.TotalRefundAmount.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
                                                }
                                                {
                                                    item && item?.TotalRefundAmount && item?.TotalRefundAmount.QOQData && item?.TotalRefundAmount.summaryData ?
                                                        // <span className="addValue">{item && item?.TotalRefundAmount ? item?.TotalRefundAmount.QOQData : "-"}</span>
                                                        <Tooltip title={`((${item?.TotalRefundAmount.summaryData} - ${item?.TotalRefundAmount.QOQData}) / ${item?.TotalRefundAmount.QOQData}) * 100`}>
                                                            <span className="addValue">{(((item?.TotalRefundAmount.summaryData - item?.TotalRefundAmount.QOQData) / item?.TotalRefundAmount.QOQData) * 100).toFixed(2) + '%'}</span>
                                                        </Tooltip>
                                                        : "-"
                                                }
                                            </div>
                                        </div> */}


                                        <div className="BusinessActivityStatisticsOtherItem">
                                            <div className="otherItemTitle">优惠金额</div>
                                            <div className="otherItemValue">{item && item?.CouponAmount ? item?.CouponAmount.summaryData : "-"}</div>
                                            <div className="addLabel">环比增长</div>
                                            <div className="otherItemAddBox">
                                                {
                                                    item && item?.CouponAmount && item?.CouponAmount.QOQData && item?.CouponAmount.summaryData ?
                                                        <img className="addIcon" src={((item?.CouponAmount.summaryData - item?.CouponAmount.QOQData) / item?.CouponAmount.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
                                                }
                                                {
                                                    item && item?.CouponAmount && item?.CouponAmount.QOQData && item?.CouponAmount.summaryData ?
                                                        <Tooltip title={`((${item?.CouponAmount.summaryData} - ${item?.CouponAmount.QOQData}) / ${item?.CouponAmount.QOQData}) * 100`}>
                                                            <span className="addValue">{(((item?.CouponAmount.summaryData - item?.CouponAmount.QOQData) / item?.CouponAmount.QOQData) * 100).toFixed(2) + '%'}</span>
                                                        </Tooltip>
                                                        : "-"
                                                }
                                            </div>
                                        </div>

                                        <div className="BusinessActivityStatisticsOtherItem">
                                            <div className="otherItemTitle">积分抵扣</div>
                                            <div className="otherItemValue">{item && item?.ConsumePoint ? item?.ConsumePoint.summaryData : "-"}</div>
                                            <div className="addLabel">环比增长</div>
                                            <div className="otherItemAddBox">
                                                {
                                                    item && item?.ConsumePoint && item?.ConsumePoint.QOQData && item?.ConsumePoint.summaryData ?
                                                        <img className="addIcon" src={((item?.ConsumePoint.summaryData - item?.ConsumePoint.QOQData) / item?.ConsumePoint.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
                                                }
                                                {
                                                    item && item?.ConsumePoint && item?.ConsumePoint.QOQData && item?.ConsumePoint.summaryData ?
                                                        <Tooltip title={`((${item?.ConsumePoint.summaryData} - ${item?.ConsumePoint.QOQData}) / ${item?.ConsumePoint.QOQData}) * 100`}>
                                                            <span className="addValue">{(((item?.ConsumePoint.summaryData - item?.ConsumePoint.QOQData) / item?.ConsumePoint.QOQData) * 100).toFixed(2) + '%'}</span>
                                                        </Tooltip>
                                                        : "-"
                                                }
                                            </div>
                                        </div>

                                        <div className="BusinessActivityStatisticsOtherItem">
                                            <div className="otherItemTitle">积分抵扣</div>
                                            <div className="otherItemValue">{item && item?.EarnPoint ? item?.EarnPoint.summaryData : "-"}</div>
                                            <div className="addLabel">环比增长</div>
                                            <div className="otherItemAddBox">
                                                {
                                                    item && item?.EarnPoint && item?.EarnPoint.QOQData && item?.EarnPoint.summaryData ?
                                                        <img className="addIcon" src={((item?.EarnPoint.summaryData - item?.EarnPoint.QOQData) / item?.EarnPoint.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
                                                }
                                                {
                                                    item && item?.EarnPoint && item?.EarnPoint.QOQData && item?.EarnPoint.summaryData ?
                                                        <Tooltip title={`((${item?.EarnPoint.summaryData} - ${item?.EarnPoint.QOQData}) / ${item?.EarnPoint.QOQData}) * 100`}>
                                                            <span className="addValue">{(((item?.EarnPoint.summaryData - item?.EarnPoint.QOQData) / item?.EarnPoint.QOQData) * 100).toFixed(2) + '%'}</span>
                                                        </Tooltip>
                                                        : "-"
                                                }
                                            </div>
                                        </div>



                                    </div>
                                </div>

                            </div>
                        }) : ""
                }



            </div>
            <Drawer
                width={'80%'}
                title={currentDrawerTitle || ""}
                visible={showDetail}
                destroyOnClose
                closable={false}
                onClose={() => {
                    setSearchType(null)
                    setValueType(null)
                    setShowDetail(false)
                }}
            >
                <MemberInfor searchType={searchType} valueType={valueType} isComponent={true} />
            </Drawer>
        </div >
    )
}

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