// 积分成长值汇总表
import { connect, CurrentUser } from "umi";
import { ConnectState } from "@/models/connect";
import { useEffect, useRef, useState } from "react";
import { Button, Col, Drawer, FormInstance, Row, Spin } from "antd";
import ProForm, { ProFormSelect } from "@ant-design/pro-form";
import './SummaryOfIntegralGrowthValue.less'
import { handeGetMembershipCount } from "../service";
import session from "@/utils/session";
import ProTable, { ActionType } from "@ant-design/pro-table";
import MemberInfor from "../memberInfor";

const SummaryOfIntegralGrowthValue: 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 [membershipLevel, setMembershipLevel] = useState<any>()
    // 会员类型数量
    const [membershipTypeTotal, setMembershipTypeTotal] = useState<number>(0)
    // 会员等级数量
    const [membershipLevelTotal, setmembershipLevelTotal] = useState<number>(0)

    // 显示详情抽屉
    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 MEMBERSHIPTYPEYNObj = session.get('MEMBERSHIPTYPEYNObj')

    const handleGetData = async (formData?: any) => {
        console.log('formDataformDataformData', formData);

        const req: any = {
            CalcType: 1, // 会员类型
            OwnerUnitId: currentUser?.OwnerUnitId,
            ExcludeTest: formData ? formData?.ExcludeTest === 1 ? true : false : true,
            StartDate: "",
            EndDate: "",
            MembershipType: "",
            MembershipLevel: ""
        }
        const req2: any = {
            CalcType: 2,// 会员等级
            OwnerUnitId: currentUser?.OwnerUnitId,
            ExcludeTest: formData ? formData?.ExcludeTest === 1 ? true : false : true,
            StartDate: "",
            EndDate: "",
            MembershipType: "",
            MembershipLevel: ""
        }
        setShowLoading(true)
        const data = await handeGetMembershipCount(req)
        const data2 = await handeGetMembershipCount(req2)
        setShowLoading(false)
        console.log('datadatadatadata', data);
        console.log('data2data2data2', data2);

        setMembershipType(data.List)
        setMembershipLevel(data2.List)
        setMembershipTypeTotal(data.OtherData)
        setmembershipLevelTotal(data2.OtherData)
    }

    // 点击事件
    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()
    }, [])

    return (
        <div className="SummaryOfIntegralGrowthValueMain">
            {
                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="SummaryOfIntegralGrowthValueTop">
                {/* <div className="SummaryOfIntegralGrowthValueTitleBox">
                    <div className={selectPageTab === 1 ? 'SummaryOfIntegralGrowthValueTitle SummaryOfIntegralGrowthValueTitleSelect' : 'SummaryOfIntegralGrowthValueTitle'} onClick={() => {
                        setSelectPageTab(1)
                    }}>会员类型</div>
                    <div style={{ marginLeft: '48px' }} className={selectPageTab === 2 ? 'SummaryOfIntegralGrowthValueTitle SummaryOfIntegralGrowthValueTitleSelect' : 'SummaryOfIntegralGrowthValueTitle'} onClick={() => {
                        setSelectPageTab(2)
                    }}>会员等级</div>
                </div> */}

                <Row style={{ marginTop: "16px" }}>
                    <Col span={6}>
                        <ProForm
                            layout={'horizontal'}
                            formRef={formRef}
                            submitter={false}
                            onFinish={async (values: any) => {
                                console.log('valuesvaluesvaluesvalues', values);
                                handleGetData(values)
                            }}
                        >
                            <ProFormSelect
                                label={"是否排除测试会员"}
                                name={"ExcludeTest"}
                                options={[{ label: '是', value: 1 }, { label: '否', value: 0 }]}
                                initialValue={1}
                            />
                        </ProForm>
                    </Col>
                    <Col span={12}></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>

            </div>


            <div className="SummaryOfIntegralGrowthValueBottom">
                {
                    membershipType && membershipType.length > 0 ?
                        <>
                            <div className="SummaryOfIntegralGrowthValueTitleBox">
                                <div className="SummaryOfIntegralGrowthValueTitle">会员类型{membershipTypeTotal ? `（${membershipTypeTotal}人）` : ""}</div>
                            </div>



                            <div className="SummaryOfIntegralGrowthValueContentBox">
                                <div className="SummaryOfIntegralGrowthValueItemOther">
                                    {
                                        membershipType.map((item: any) => {
                                            return <div className="SummaryOfIntegralGrowthValueOtherItem" onClick={() => {
                                                handleShowTableData(1, item.label)
                                            }}>
                                                <div className="otherItemTitle">{item.label === '0' ? '未授权用户' : MEMBERSHIPTYPEYNObj && item.label ? MEMBERSHIPTYPEYNObj[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 > 1000 ? '1000%' : item.key + '%' : ""}</span>
                                                </div>
                                            </div>
                                        })
                                    }

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


                {
                    membershipLevel && membershipLevel.length > 0 ?
                        <>
                            <div className="SummaryOfIntegralGrowthValueTitleBox" style={{ marginTop: '32px' }}>
                                <div className="SummaryOfIntegralGrowthValueTitle">会员等级{membershipLevelTotal ? `（${membershipLevelTotal}人）` : ""}</div>
                            </div>


                            <div className="SummaryOfIntegralGrowthValueContentBox">
                                <div className="SummaryOfIntegralGrowthValueItemOther">
                                    {
                                        membershipLevel.map((item: any) => {
                                            return <div className="SummaryOfIntegralGrowthValueOtherItem" onClick={() => {
                                                handleShowTableData(2, item.label)
                                            }}>
                                                <div className="otherItemTitle">{item.label === '0' ? '未授权用户' : MEMBERSHIPLEVELYNObj && item.label ? MEMBERSHIPLEVELYNObj[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 > 1000 ? '1000%' : item.key + '%' : ""}</span>
                                                </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} noMemberType={searchType === 1} noMemberLevel={searchType === 2} />
            </Drawer>
        </div>
    )
}

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