// 积分规则配置
import React, { useRef, useState, Suspense } from 'react';
import moment from 'moment'; // 时间相关引用，没有使用可以删除
import numeral from "numeral"; // 数字相关引用，没有使用可以删除
import { connect } from 'umi';

import useRequest from '@ahooksjs/use-request'; // 请求数据的引用
import Draggable from 'react-draggable';
import SubMenu from "antd/lib/menu/SubMenu";
import ProTable from '@ant-design/pro-table';
import ProDescriptions from '@ant-design/pro-descriptions';
import ProForm, { ProFormDatePicker, ProFormDateTimePicker, ProFormMoney, ProFormSelect, ProFormText, ProFormTextArea, ProFormTreeSelect, ProFormUploadButton } from '@ant-design/pro-form';
import { MenuFoldOutlined, PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Col, Drawer, message, Row, Popconfirm, Space, Image, Modal, Form, Switch, Upload, Tooltip, Descriptions, TreeSelect } from 'antd';

import type { CurrentUser } from "umi";
import type { ConnectState } from '@/models/connect';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import type { FormInstance } from 'antd';

import { getFieldEnumTree, getFieldEnumName } from "@/services/options"; // 枚举的引用，没有使用可以删除
import { handleDeleteSCORESETTING, handleGetSCORESETTINGList, handleSynchroSCORESETTING } from '../service';
import session from '@/utils/session';
import PageTitleBox from '@/components/PageTitleBox';
import ModalFooter from '../scenicSpotConfig/component/modalFooter';
import PointConfig from './PointConfig';
import { handleSetlogSave } from '@/utils/format';



const PointsRuleConfig: React.FC<{ currentUser: CurrentUser | undefined }> = (props) => {
    const { currentUser } = props
    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();
    const [currentRow, setCurrentRow] = useState<any>();
    const [showDetail, setShowDetail] = useState<boolean>();
    const [modalVisible, handleModalVisible] = useState<boolean>();
    const [showConfigModal, setShowConfigModal] = useState<boolean>();


    const [confirmLoading, handleConfirmLoading] = useState<boolean>(false) // 弹出框的内容表单是否在提交
    const [searchParams, setSearchParams] = useState<any>();
    // 积分类型的枚举
    let SCORETYPEList = session.get('SCORETYPEList')
    let SCORETYPEObj = session.get('SCORETYPEObj')
    let SCORETYPETree = session.get('SCORETYPETree')
    let MEMBERSHIPLEVELYNObj = session.get('MEMBERSHIPLEVELYNObj')
    let MEMBERSHIPLEVELYNList = session.get('MEMBERSHIPLEVELYNList')
    let MEMBERSHIPTYPEYNList = session.get('MEMBERSHIPTYPEYNList')
    let MEMBERSHIPTYPEYNObj = session.get('MEMBERSHIPTYPEYNObj')

    // 弹出框拖动效果
    const [bounds, setBounds] = useState<{ left: number, right: number, top: number, bottom: number }>() // 移动的位置
    const [disabled, setDraggleDisabled] = useState<boolean>() // 是否拖动
    const draggleRef = React.createRef<any>()

    const onDraggaleStart = (event, uiData) => {
        const { clientWidth, clientHeight } = window.document.documentElement;
        const targetRect = draggleRef.current?.getBoundingClientRect();
        if (!targetRect) {
            return;
        }
        setBounds({
            left: -targetRect.left + uiData.x,
            right: clientWidth - (targetRect.right - uiData.x),
            top: -targetRect.top + uiData.y,
            bottom: clientHeight - (targetRect.bottom - uiData.y),
        });
    };
    // 拖动结束

    // 定义列表字段内容
    const columns: any = [
        {
            dataIndex: 'SCORE_TYPE',
            title: '积分类别',
            align: 'center',
            width: 200,
            hideInSearch: true,
            valueType: 'treeSelect',
            request: () => {
                let SCORETYPETree = session.get('SCORETYPETree')
                return SCORETYPETree
            }
            // valueEnum: SCORETYPEObj
        },
        {
            dataIndex: 'SCORE_NAME',
            title: '规则名称',
            width: 200,
            align: 'center',
            hideInSearch: true,
            render: (_, record) => {
                return record?.SCORE_NAME ? <a onClick={() => {
                    setCurrentRow({ ...record });
                    handleModalVisible(true);
                }}>
                    {record?.SCORE_NAME}
                </a> : '-'
            }
        },
        {
            dataIndex: 'MEMBERSHIP_LEVEL',
            title: '会员等级',
            width: 120,
            align: 'center',
            valueType: 'select',
            valueEnum: MEMBERSHIPLEVELYNObj
        },
        {
            dataIndex: 'MEMBERSHIP_TYPE',
            title: '会员类型',
            width: 120,
            align: 'center',
            valueType: 'select',
            valueEnum: MEMBERSHIPTYPEYNObj
        },
        {
            dataIndex: 'EXCHANGE_BASE',
            title: '兑换基数',
            width: 120,
            tooltip: "每1个[兑换单位]可获得的积分数（具体单位由业务决定，如：元、次、件等）",
            align: 'center',
            hideInSearch: true,
        },
        {
            dataIndex: 'CONVERTIBLE_PROPORTION',
            title: '兑换比例',
            width: 120,
            align: 'center',
            hideInSearch: true,
        },
        // {
        //     dataIndex: 'MEET_AMOUNT',
        //     title: '满足金额',
        //     valueType: 'money',
        //     width: 120,
        //     align: 'center',
        //     hideInSearch: true,
        // },
        {
            dataIndex: 'EARN_POINTS',
            title: '赚取积分',
            align: 'center',
            width: 120,
            hideInSearch: true,
        },
        {
            dataIndex: 'GROWTH_VALUE',
            title: '获得成长值',
            width: 120,
            align: 'center',
            hideInSearch: true,
        },
        // {
        //     dataIndex: 'START_DATE',
        //     title: '开始时间',
        //     width: 150,
        //     valueType: 'date',
        //     align: 'center',
        //     hideInSearch: true,
        //     render: (_, record) => {
        //         return record?.START_DATE ? moment(record?.START_DATE).format('YYYY-MM-DD HH:mm:ss') : ""
        //     }
        // },
        // {
        //     dataIndex: 'END_DATE',
        //     title: '结束时间',
        //     width: 150,
        //     valueType: 'date',
        //     align: 'center',
        //     hideInSearch: true,
        //     render: (_, record) => {
        //         return record?.END_DATE ? moment(record?.END_DATE).format('YYYY-MM-DD HH:mm:ss') : ""
        //     }
        // },
        // {
        //     dataIndex: 'EXPIRY_DATE',
        //     title: '有效期',
        //     width: 120,
        //     align: 'center',
        //     hideInSearch: true,
        // },
        // {
        //     dataIndex: 'PROVINCE_CODE',
        //     title: '省份编码',
        //     align: 'center',
        //     hideInSearch: true,
        // },
        // {
        //     dataIndex: 'OWNERUNIT_NAME',
        //     title: '业主单位名称',
        //     align: 'center',
        //     hideInSearch: true,
        // },
        {
            dataIndex: 'SCORESETTING_STATE',
            title: '有效状态',
            width: 120,
            align: 'center',
            valueType: 'select',
            valueEnum: {
                "1": "有效",
                "0": "无效"
            },
            initialValue: "1"
        },
        {
            dataIndex: 'OPERATE_DATE',
            title: '操作时间',
            width: 150,
            align: 'center',
            hideInSearch: true,
            render: (_, record) => {
                return record?.OPERATE_DATE ? moment(record?.OPERATE_DATE).format('YYYY-MM-DD HH:mm:ss') : ""
            }
        },
        // {
        //     dataIndex: 'STAFF_NAME',
        //     title: '操作员名称',
        //     align: 'center',
        //     hideInSearch: true,
        // },
        // {
        //     dataIndex: 'OPERATE_DATE',
        //     title: '操作时间',
        //     valueType: 'fromNow',
        //     align: 'center',
        //     hideInSearch: true,
        // },
        // {
        //     dataIndex: 'SCORESETTING_DESC',
        //     title: '备注',
        //     align: 'center',
        //     hideInSearch: true,
        // },
        // {
        //     dataIndex: 'option',
        //     title: '操作',
        //     width: 150,
        //     valueType: 'option',
        //     align: 'center',
        //     hideInSearch: true,
        //     render: (_, record) => {
        //         return (
        //             <Space>
        //                 <a
        //                     onClick={() => {
        //                         setCurrentRow({ ...record });
        //                         handleModalVisible(true);
        //                     }}
        //                 >
        //                     编辑
        //                 </a>
        //                 <Popconfirm
        //                     title="确认删除该积分规则列表信息吗?"
        //                     onConfirm={async () => {
        //                         await handelDelete(record.SCORESETTING_ID);
        //                     }}
        //                 >
        //                     <a>删除</a>
        //                 </Popconfirm>
        //             </Space>
        //         );
        //     },
        // },
    ];

    const handelDelete = async (id: number) => {
        const result = await handleDeleteSCORESETTING({
            SCORESETTINGId: id
        });

        if (result.Result_Code !== 100) {
            message.error(`${result.Result_Desc}` || `${result.Result_Code}:删除失败`);
        } else {
            message.success('删除成功！');
            handleSetlogSave(`删除【${currentRow?.SCORE_NAME}】类别`)
            actionRef.current?.reload()
            handleConfirmLoading(false)
            handleModalVisible(false)
        }
    };

    // 同步积分规则
    const handleAddUpdate = async (res: any) => {
        let req: any = {}

        if (currentRow?.SCORESETTING_ID) {
            req = {
                ...currentRow,
                ...res,
                MEMBERSHIP_TYPE: res.MEMBERSHIP_TYPE === 0 ? '' : res.MEMBERSHIP_TYPE,
                MEMBERSHIP_LEVEL: res.MEMBERSHIP_LEVEL === 0 ? '' : res.MEMBERSHIP_LEVEL,
            }
        } else {
            req = {
                ...res,
                MEMBERSHIP_TYPE: res.MEMBERSHIP_TYPE === 0 ? '' : res.MEMBERSHIP_TYPE,
                MEMBERSHIP_LEVEL: res.MEMBERSHIP_LEVEL === 0 ? '' : res.MEMBERSHIP_LEVEL,
                ADDTIME: moment().format('YYYY-MM-DD HH:mm:ss'),
                STAFF_ID: currentUser?.ID,
                STAFF_NAME: currentUser?.Name,
                OWNERUNIT_ID: currentUser?.OwnerUnitId,
                OWNERUNIT_NAME: currentUser?.OwnerUnitName,
                PROVINCE_CODE: currentUser?.ProvinceCode
            }
        }

        console.log('reqreq', req);


        const data = await handleSynchroSCORESETTING(req)
        if (data.Result_Code === 100) {
            handleSetlogSave(`${currentRow?.SCORESETTING_ID ? '更新' : '新增'}【${data.Result_Data?.SCORE_NAME}】类别`)
            message.success(data.Result_Desc)
            formRef?.current?.resetFields()
            setCurrentRow(undefined)
            handleModalVisible(false)
            actionRef.current?.reload()
        } else {
            message.error(data.Result_Desc)
        }
    }


    return (
        <PageContainer header={{
            title: '',
            breadcrumb: {}
        }}>
            <ProTable
                style={{ height: 'calc(100vh - 135px)', background: '#fff' }}
                scroll={{ y: 'calc(100vh - 410px)' }}
                rowKey={(record) => {
                    return `${record?.SCORESETTING_ID}`
                }}
                bordered
                formRef={formRef}
                headerTitle={<PageTitleBox props={props} />}
                actionRef={actionRef}
                search={{ span: 6, labelWidth: 'auto' }}
                // 请求数据
                request={async (params, sorter) => {
                    const searchWholeParams = {
                        searchParameter: {
                            PROVINCE_CODE: currentUser?.ProvinceCode || "",
                            OWNERUNIT_ID: 911,
                            SCORESETTING_STATE: params?.SCORESETTING_STATE,
                            MEMBERSHIP_TYPE: params?.MEMBERSHIP_TYPE || "",
                            MEMBERSHIP_LEVEL: params?.MEMBERSHIP_LEVEL || "",
                        },
                        PageIndex: 1,
                        PageSize: 999999,
                        SortStr: "OPERATE_DATE desc"
                    }
                    setSearchParams(searchWholeParams)
                    const data = await handleGetSCORESETTINGList(searchWholeParams);
                    handleSetlogSave(`点击查询按钮`)
                    if (data.List && data.List.length > 0) {
                        return { data: data.List, success: true, total: data.TotalCount }
                    }
                    return { data: [], success: true }
                }}
                columns={columns}
                toolbar={{
                    actions: [
                        // 新增按钮
                        <Button
                            key="new"
                            icon={<PlusOutlined rev={undefined} />}
                            type="primary"
                            onClick={() => {
                                handleModalVisible(true);
                            }}
                        >
                            积分规则
                        </Button>,
                        <Button
                            key="new"
                            type="primary"
                            onClick={() => {
                                setShowConfigModal(true);
                            }}
                        >
                            积分类别枚举配置
                        </Button>
                    ],
                }}
            // pagination={{ defaultPageSize: 10 }}
            />

            <Modal
                title={
                    <div
                        className='pointsRuleConfig'
                        style={{
                            width: '100%',
                            cursor: 'move',
                        }}
                        onMouseOver={() => {
                            if (disabled) {
                                setDraggleDisabled(false)
                            }
                        }}
                        onMouseOut={() => {
                            setDraggleDisabled(true)
                        }}

                        onFocus={() => { }}
                        onBlur={() => { }}
                    >
                        {currentRow ? '更新积分规则' : '新建积分规则'}
                    </div>
                }
                destroyOnClose={true}
                width={900}
                bodyStyle={{
                    height: '700px', // 你可以根据需要调整高度
                    overflowY: 'auto',
                }}
                visible={modalVisible}
                confirmLoading={confirmLoading}
                afterClose={() => {
                    formRef.current?.resetFields();
                    setCurrentRow(undefined);
                }}
                onCancel={() => {
                    handleConfirmLoading(false)
                    handleModalVisible(false)
                }}
                footer={<ModalFooter
                    hideDelete={!currentRow?.SCORESETTING_ID}
                    handleDelete={async () => {
                        await handelDelete(currentRow?.SCORESETTING_ID)
                    }}
                    handleCancel={() => {
                        handleConfirmLoading(false)
                        handleModalVisible(false)
                    }}
                    handleOK={() => {
                        formRef?.current?.validateFields().then(() => {
                            handleConfirmLoading(true)
                            formRef?.current?.submit()
                        })
                    }}

                />}

                onOk={async () => { // 提交框内的数据
                    formRef?.current?.validateFields().then(() => {
                        handleConfirmLoading(true)
                        formRef?.current?.submit()
                    })
                }}
                modalRender={(modal) => {
                    return <Draggable
                        disabled={disabled}
                        bounds={bounds}
                        onStart={(event, uiData) => onDraggaleStart(event, uiData)}
                        handle='.pointsRuleConfig'
                    >
                        <div ref={draggleRef}>{modal}</div>
                    </Draggable>
                }}
            >
                <ProForm
                    layout={'horizontal'}
                    formRef={formRef}
                    autoFocusFirstInput
                    submitter={false}
                    preserve={false}
                    labelCol={{ style: { width: 130 } }}
                    initialValues={{
                        ...currentRow,
                        SCORESETTING_STATE: (currentRow?.SCORESETTING_STATE || currentRow?.SCORESETTING_STATE === 0) ? currentRow?.SCORESETTING_STATE : 1,
                        MEMBERSHIP_LEVEL: currentRow?.MEMBERSHIP_LEVEL ? currentRow?.MEMBERSHIP_LEVEL.toString() : ""
                    }}
                    onFinish={async (values) => {
                        let newValue: any = { ...values };
                        if (currentRow) {
                            // 编辑数据
                            newValue = { ...values, SCORESETTING_ID: currentRow.SCORESETTING_ID };
                        }
                        await handleAddUpdate(newValue);

                        handleConfirmLoading(false)
                    }}
                >
                    <Row gutter={8}>
                        <Col span={12}>
                            {/* <ProFormSelect */}
                            <ProFormTreeSelect
                                name="SCORE_TYPE"
                                label="积分类别"
                                request={async () => {
                                    let SCORETYPETree = session.get('SCORETYPETree')
                                    return SCORETYPETree
                                }}
                                fieldProps={{
                                    placeholder: "请选择积分类别",
                                    treeDefaultExpandAll: true,  // 默认展开所有节点
                                    showSearch: true,           // 可选：启用搜索功能
                                    filterTreeNode: (inputValue: string, treeNode: any) => {
                                        // 通过label进行模糊匹配
                                        return treeNode.label.toLowerCase().includes(inputValue.toLowerCase());
                                    },
                                }}
                                // options={SCORETYPEList}
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择积分类别'
                                    }
                                ]}
                            />
                        </Col>
                        <Col span={12}>
                            <ProFormText
                                name="SCORE_NAME"
                                label="规则名称"
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择规则名称'
                                    }
                                ]}
                            />
                        </Col>
                        <Col span={12}>
                            <ProFormSelect
                                name="MEMBERSHIP_LEVEL"
                                label="会员等级"
                                options={MEMBERSHIPLEVELYNList}
                            />
                        </Col>
                        <Col span={12}>
                            <ProFormSelect
                                name="MEMBERSHIP_TYPE"
                                label="会员类型"
                                options={MEMBERSHIPTYPEYNList}
                            />
                        </Col>

                        <Col span={12}>
                            <ProFormText
                                name="EXCHANGE_BASE"
                                label="兑换基数"
                                tooltip="获得1积分需要消费的金额"
                            />
                        </Col>
                        <Col span={12}>
                            <ProFormText
                                name="EARN_POINTS"
                                label="赚取积分"
                                tooltip="获得的积分值"
                            />
                        </Col>
                        <Col span={12}>
                            <ProFormText
                                name="CONVERTIBLE_PROPORTION"
                                label="成长值兑换基数"
                                tooltip="获取1成长值需要消费的金额"
                            />
                        </Col>
                        {/* <Col span={12}>
                            <ProFormText
                                name="MEET_AMOUNT"
                                label="满足金额"
                            />
                        </Col> */}

                        <Col span={12}>
                            <ProFormText
                                name="GROWTH_VALUE"
                                label="获得成长值"
                            />
                        </Col>
                        <Col span={12}>
                            <ProFormSelect
                                name="SCORESETTING_STATE"
                                label="有效状态"
                                options={[
                                    { label: '有效', value: 1 },
                                    { label: '无效', value: 0 },
                                ]}
                            />
                        </Col>
                        {/* <Col span={12}>
                            <ProFormDatePicker
                                width="lg"
                                name="START_DATE"
                                label="开始时间"
                            />
                        </Col>
                        <Col span={12}>
                            <ProFormDatePicker
                                width="lg"
                                name="END_DATE"
                                label="结束时间"
                            />
                        </Col> */}
                        <Col span={24}>
                            <ProFormTextArea
                                name="SCORESETTING_DESC"
                                label="备注"
                            />
                        </Col>
                    </Row>
                </ProForm>
            </Modal>

            <Modal
                title={"成长值枚举配置"}
                destroyOnClose={true}
                width={1200}
                bodyStyle={{
                    height: '700px', // 你可以根据需要调整高度
                    overflowY: 'auto',
                }}
                visible={showConfigModal}
                footer={false}
                onCancel={() => {
                    setShowConfigModal(false)
                }}
            >
                <PointConfig />
            </Modal>
        </PageContainer >
    );
};
export default connect(({ user }: ConnectState) => ({
    currentUser: user.currentUser
}))(PointsRuleConfig);