// 会员等级分布
import { ConnectState } from "@/models/connect";
import { connect, CurrentUser } from "umi";
import LeftSelectMemberLevel from "./components/LeftSelectMemberLevel";
import { useRef, useState } from "react";
import ProTable, { ActionType } from "@ant-design/pro-table";
import { FormInstance } from "antd";
import PageTitleBox from "@/components/PageTitleBox";
import moment from 'moment'
import { handleSetlogSave } from "@/utils/format";
import session from "@/utils/session";
import { handleGetMEMBERSHIPList } from "../service";

const MembershipLevelDistribution: React.FC<{ currentUser: CurrentUser | undefined }> = (props) => {

    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();
    // 树相关的属性和方法
    const [selectedId, setSelectedId] = useState<string>()
    const [collapsible, setCollapsible] = useState<boolean>(false)
    // 当前行数据
    const [currentRow, setCurrentRow] = useState<any>()
    // 显示详情抽屉
    const [showDetailDrawer, setShowDetailDrawer] = useState<boolean>(false)

    let MEMBERSHIPTYPEYNObj = session.get('MEMBERSHIPTYPEYNObj');
    let CONSUMPTIONRECORDTYPEObj = session.get('CONSUMPTIONRECORDTYPEObj')
    let MEMBERSHIPLEVELYNObj = session.get('MEMBERSHIPLEVELYNObj')

    const columns: any = [
        {
            title: "用户昵称",
            width: 200,
            dataIndex: "MEMBERSHIP_NAME",
            ellipsis: true,
            align: 'center',
            fixed: 'left',
            render: (_, record) => {
                return <a onClick={() => {
                    setCurrentRow(record)
                    setShowDetailDrawer(true)
                    handleSetlogSave(`查看${record?.MEMBERSHIP_NAME}【${record?.MEMBERSHIP_ID}】会员信息`)
                }}>
                    {record?.MEMBERSHIP_NAME || ""}
                </a>
            },
            fieldProps: {
                placeholder: "请输入用户昵称/联系电话/证件号/车牌号"
            }
        },
        {
            title: "会员类型",
            width: 120,
            dataIndex: "MEMBERSHIP_TYPE",
            ellipsis: true,
            hideInTable: true,
            align: 'center',
            valueType: 'select',
            // request: () => {
            //     let MEMBERSHIPTYPEYNList = session.get('MEMBERSHIPTYPEYNList')
            //     let newList: any = []
            //     if (MEMBERSHIPTYPEYNList && MEMBERSHIPTYPEYNList.length > 0) {
            //         MEMBERSHIPTYPEYNList.forEach((item: any) => {
            //             if (item.value !== 1) {
            //                 //  && item.value < 9000
            //                 newList.push(item)
            //             }
            //         })
            //     }
            //     return newList
            // }
            valueEnum: {
                ...MEMBERSHIPTYPEYNObj,
            },
            initialValue: "1"
        },
        {
            title: "会员类型",
            width: 120,
            dataIndex: "MEMBERSHIP_TYPE",
            ellipsis: true,
            hideInSearch: true,
            align: 'center',
            valueType: 'select',
            valueEnum: {
                ...MEMBERSHIPTYPEYNObj,
            },
        },
        {
            title: "会员编码",
            width: 120,
            dataIndex: "MEMBERSHIP_CODE",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
        },
        {
            title: "会员性别",
            width: 120,
            dataIndex: "MEMBERSHIP_SEX",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
            valueType: 'select',
            valueEnum: {
                0: '男',
                1: '女',
            }
        },
        {
            title: "联系电话",
            width: 120,
            dataIndex: "MEMBERSHIP_MOBILEPHONE",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
        },
        {
            title: "会员等级",
            width: 120,
            dataIndex: "MEMBERSHIP_LEVEL",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
            valueType: 'select',
            valueEnum: MEMBERSHIPLEVELYNObj,
            initialValue: "1"
            // request: () => {
            //     let MEMBERSHIPLEVELYNList = session.get('MEMBERSHIPLEVELYNList')
            //     let newList: any = []
            //     if (MEMBERSHIPLEVELYNList && MEMBERSHIPLEVELYNList.length > 0) {
            //         MEMBERSHIPLEVELYNList.forEach((item: any) => {
            //             if (item.value !== '1') {
            //                 //  && item.value < 9000
            //                 newList.push(item)
            //             }
            //         })
            //     }
            //     return newList
            // }
        },
        {
            title: "会员积分",
            width: 120,
            dataIndex: "MEMBERSHIP_POINT",
            hideInSearch: true,
            ellipsis: true,
            sorter: true,
            align: 'center',
        },
        {
            title: "会员成长值",
            width: 120,
            dataIndex: "MEMBERGROWTH_VALUE",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
        },
        {
            title: "账户余额",
            width: 120,
            dataIndex: "ACCOUNT_BALANCE",
            hideInSearch: true,
            ellipsis: true,
            sorter: true,
            align: 'center',
        },
        {
            title: "会员生日",
            width: 150,
            dataIndex: "MEMBERSHIP_BIRTHDAY",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
            render: (_, record) => {
                return record?.MEMBERSHIP_BIRTHDAY ? moment(record?.MEMBERSHIP_BIRTHDAY).format('YYYY-MM-DD') : '-'
            }
        },
        {
            title: "证件号码",
            width: 150,
            dataIndex: "CERTIFICATE_NUMBER",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
        },
        {
            title: "会员卡号",
            width: 120,
            dataIndex: "MEMBERSHIP_CARD",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
        },
        // {
        //     title: "会员头像",
        //     width: 120,
        //     dataIndex: "MEMBERSHIP_HEADIMAGEURL",
        //     hideInSearch: true,
        //     ellipsis: true,
        //     align: 'center',
        //     render: (_, record) => {
        //         return record?.MEMBERSHIP_HEADIMAGEURL ? <a onClick={() => {
        //             window.open(record?.MEMBERSHIP_HEADIMAGEURL)
        //         }}>点击查看</a> : ""
        //     }
        // },
        {
            title: "联系地址",
            width: 180,
            dataIndex: "MEMBERSHIP_ADDRESS",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
        },
        {
            title: "车牌号",
            width: 150,
            dataIndex: "PLATE_NUMBER",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
        },
        // {
        //     title: "付费会员",
        //     width: 120,
        //     dataIndex: "ISPLUS",
        //     hideInSearch: true,
        //     ellipsis: true,
        //     align: 'center',
        //     valueType: 'select',
        //     valueEnum: {
        //         0: "否",
        //         1: "是"
        //     }
        // },
        {
            title: "付费有效期",
            width: 120,
            dataIndex: "PLUS_EXPIRYDATE",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
        },
        {
            title: "推荐人",
            width: 120,
            dataIndex: "RECOMMEND_NAME",
            hideInSearch: true,
            ellipsis: true,
            align: 'center',
        },
        // {
        //     title: "会员状态",
        //     width: 120,
        //     dataIndex: "MEMBERSHIP_STATE",
        //     ellipsis: true,
        //     align: 'center',
        //     valueType: 'select',
        //     valueEnum: COMPANY_STATEObj,
        //     initialValue: "1000"
        // },
        {
            title: "最后活跃时间",
            width: 150,
            // BEHAVIORRECORD_TIME  用于排序  ACTIVE_LASTTIME 用于显示
            dataIndex: "BEHAVIORRECORD_TIME",
            align: 'center',
            hideInSearch: true,
            ellipsis: true,
            sorter: true,
            // defaultSortOrder: 'descend',
            render: (_, record) => {
                return record?.ACTIVE_LASTTIME ? moment(record?.ACTIVE_LASTTIME).format('YYYY-MM-DD HH:mm:ss') : '-'
            }
        },
        {
            title: "注册时间",
            width: 150,
            dataIndex: "ADDTIME",
            align: 'center',
            hideInSearch: true,
            ellipsis: true,
            sorter: true,
            // sorter: (a, b) => {
            // const timeA = new Date(a.ADDTIME).getTime();
            // const timeB = new Date(b.ADDTIME).getTime();
            // return timeB - timeA; // 倒序排序
            // },
            // 默认排序配置
            // defaultSortOrder: 'descend',
            render: (_, record) => {
                return record?.ADDTIME ? moment(record?.ADDTIME).format('YYYY-MM-DD HH:mm:ss') : '-'
            }
        },
        {
            title: "备注",
            width: 120,
            dataIndex: "MEMBERSHIP_DESC",
            hideInSearch: true,
            ellipsis: true,
        },
    ]

    return (
        <div>

            <div style={{ backgroundColor: '#fff', display: 'flex' }}>
                <LeftSelectMemberLevel setSelectedId={setSelectedId} setCollapsible={setCollapsible} collapsible={collapsible} />
                <div style={{
                    width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
                    paddingTop: 0,
                    paddingBottom: 0,
                    paddingRight: 0
                }}>
                    <ProTable
                        actionRef={actionRef}
                        formRef={formRef}
                        columns={columns}
                        bordered
                        expandable={{
                            expandRowByClick: true
                        }}
                        scroll={{ x: "100%", y: "calc(100vh - 410px)" }}
                        headerTitle={<PageTitleBox props={props} />} // 列表表头
                        search={{ span: 6 }}
                        request={async (params, sorter) => {
                            if (!selectedId) {
                                return
                            }
                            const sortstr = Object.keys(sorter).map(n => {
                                const value = sorter[n]
                                return value ? `${n} ${value.replace('end', '')}` : ''
                            })

                            console.log('selectedIdselectedIdselectedId', selectedId);
                            const req: any = {
                                SearchParameter: {
                                    OWNERUNIT_ID: 911,
                                    MEMBERSHIP_LEVELS: selectedId,
                                    MEMBERSHIP_STATE: params?.MEMBERSHIP_STATE,
                                },
                                keyWord: {
                                    Key: "MEMBERSHIP_NAME,MEMBERSHIP_MOBILEPHONE,CERTIFICATE_NUMBER,MEMBERSHIP_CARD,MEMBERSHIP_ADDRESS,PLATE_NUMBER",
                                    value: params?.MEMBERSHIP_NAME || ""
                                },
                                PageIndex: params.current || 1,
                                PageSize: params?.pageSize,
                                sortstr: sortstr.length ? sortstr.toString() === "MEMBERGROWTH_VALUE asc" || sortstr.toString() === "MEMBERGROWTH_VALUE desc" ? "" : sortstr.toString() : "",
                            }

                            handleSetlogSave(`查看了会员账户管理列表`)

                            const data = await handleGetMEMBERSHIPList(req)
                            if (data.List && data.List.length > 0) {
                                return { data: data.List, success: true, total: data.TotalCount }
                            }
                            return { data: [], success: true }
                        }}
                        toolbar={{
                            actions: [

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

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