// 订单售后管理  售后订单管理
import { connect } from "umi";
import type { CurrentUser } from "umi";
import type { ConnectState } from "@/models/connect";
import React, { useRef, useState } from "react";
import { Button, Col, message, Modal, Popconfirm, Row, 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 moment from 'moment'
import { handeGetSALEBILLList, handeGetSaleBillWholeList, handeGetSALEDETAILList, handeWeChatRefundApply, handeWeRevokeRefundApply } from "../service";
import Draggable from "react-draggable";
import ProForm, { ProFormSelect, ProFormText } from "@ant-design/pro-form";
import orderIcon from '@/assets/detail/orderIcon.png'
import closeIcon from '@/assets/detail/closeIcon.png'
import './style.less'
import { handleSetlogSave } from "@/utils/format";
import { highlightText } from "@/utils/highlightText";


const OrderAfterSalesManage: React.FC<{ currentUser: CurrentUser }> = (props) => {
    const { currentUser } = props
    const draggleRef = React.createRef<any>()
    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();
    const modalRef = useRef<FormInstance>();
    // 查询的条件
    const [searchParams, setSearchParams] = useState<any>()
    const [currentRow, setCurrentRow] = useState<any>();
    const [modalVisible, handleModalVisible] = useState<boolean>();
    const [confirmLoading, handleConfirmLoading] = useState<boolean>(false) // 弹出框的内容表单是否在提交
    // 弹出框拖动效果
    const [bounds, setBounds] = useState<{ left: number, right: number, top: number, bottom: number }>() // 移动的位置
    const [disabled, setDraggleDisabled] = useState<boolean>() // 是否拖动
    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 [currentSearchText, setCurrentSearchText] = useState<string>('')


    const columns: any = [
        {
            dataIndex: 'searchText',
            title: '查询内容',
            hideInTable: true,
            fieldProps: {
                placeholder: "请输入购买的商品/订单编号"
            }
        },
        {
            title: '查询时间',
            dataIndex: 'search_date',
            valueType: 'dateRange',
            hideInTable: true,
            hideInDescriptions: true,
            search: {
                transform: (value) => {
                    return {
                        ORDER_DATE_Start: value[0],
                        ORDER_DATE_End: value[1],
                    };
                },
            },
            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')],
                }
            },
            // initialValue: [moment().add(-1, 'M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
            initialValue: [moment(moment().subtract(1, 'd')).startOf('M'), moment()],
        },
        {
            title: "订单状态",
            dataIndex: "orderStatus",
            valueType: "select",
            valueEnum: {
                "0": "全部",
                "8000": "退款申请中",
                "8020": "退款审核中",
                "8900": "订单已退款",
                "9000": "订单已关闭",
            },
            initialValue: '8000',
            hideInTable: true,
        },
        {
            title: "序号",
            dataIndex: "index",
            valueType: "index",
            hideInSearch: true,
            align: "center",
            width: 60,
        },
        {
            title: "会员名称",
            dataIndex: "ORDER_PERSON",
            width: 200,
            hideInSearch: true,
            ellipsis: true,
            align: "center",
        },
        {
            title: "联系电话",
            dataIndex: "ORDER_PERSONTEL",
            width: 150,
            hideInSearch: true,
            ellipsis: true,
            align: "center",
        },
        {
            title: "订单编号",
            dataIndex: "SALEBILL_CODE",
            width: 200,
            hideInSearch: true,
            ellipsis: true,
            align: "center",
            render: (_, record) => {
                return record?.SALEBILL_CODE ? <a onClick={() => {
                    setCurrentRow(record);
                    handleModalVisible(true)
                    handleSetlogSave(`查询【${record?.ORDER_PERSON}】编码为${record?.SALEBILL_CODE}的订单`)
                }}>
                    {/* {record?.SALEBILL_CODE} */}
                    {highlightText(record?.SALEBILL_CODE, currentSearchText)}
                </a> : ""
            }
        },
        {
            title: "购买的商品",
            dataIndex: "COMMODITY_NAME",
            width: 300,
            hideInSearch: true,
            ellipsis: true,
            align: "center",
            render: (_, record) => {
                return highlightText(record?.COMMODITY_NAME, currentSearchText)
            }
        },
        {
            title: "订单状态",
            dataIndex: "SALEBILL_STATE",
            width: 120,
            hideInSearch: true,
            ellipsis: true,
            valueType: "select",
            valueEnum: {
                "8000": "退款申请中",
                "8020": "退款审核中",
                "8900": "订单已退款",
                "9000": "订单已关闭",
            },
            align: "center",
        },
        {
            title: "退款金额",
            dataIndex: "ORDER_AMOUNT",
            width: 120,
            hideInSearch: true,
            ellipsis: true,
            align: "center",
            sorter: (a, b) => a.ORDER_AMOUNT - b.ORDER_AMOUNT,
        },
        {
            title: "申请时间",
            dataIndex: "ORDER_DATE",
            width: 150,
            hideInSearch: true,
            ellipsis: true,
            align: "center",
            sorter: (a, b) => new Date(a.ORDER_DATE).getTime() - new Date(b.ORDER_DATE).getTime(),
            defaultSortOrder: 'descend',
            render: (_, record) => {
                return record?.ORDER_DATE ? moment(record?.ORDER_DATE).format('YYYY-MM-DD HH:mm:ss') : "-"
            }
        },
        {
            title: "退款时间",
            dataIndex: "RESERVATION_ENDDATE",
            width: 120,
            hideInSearch: true,
            ellipsis: true,
            sorter: (a, b) => new Date(a.RESERVATION_ENDDATE).getTime() - new Date(b.RESERVATION_ENDDATE).getTime(),
            align: "center",
        },
        {
            title: "备注说明",
            dataIndex: "SALEBILL_DESC",
            width: 180,
            hideInSearch: true,
            ellipsis: true,
            align: "center",
        }
    ]

    // 订单详情的表格
    const orderDetailColumns: any = [
        {
            dataIndex: "index",
            title: "序号",
            align: 'center',
            hideInSearch: true,
            valueType: "index",
            width: 70,
            ellipsis: true,
        },
        {
            dataIndex: 'COMMODITY_NAME',
            title: '商品名称',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'COMMODITY_BARCODE',
            title: '商品条码',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'ORDER_COUNT',
            title: '数量',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'AVERAGE_PRICE',
            title: '单价',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'ORDER_AMOUNT',
            title: '金额',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
    ]

    // 关闭悬浮框
    const handleCloseModal = () => {
        handleConfirmLoading(false)
        handleModalVisible(false)
        setCurrentRow(undefined);
    }

    // // 删除订单
    // const handleGetDeleteOrder = async () => {

    // }
    // 同意退款
    const handleGetAgreeToRefund = async () => {
        console.log('currentRowcurrentRowcurrentRow', currentRow);
        const req: any = {
            mchid: "1672298991",
            serial_no: "5BA7C0F427FC042DB5BF299E35B373D5EFCECD35",
            mobileOrderCode: "",
            saleBillCode: currentRow?.TABLE_NUMBER,
            refundBillCode: currentRow?.SALEBILL_CODE,
            refundReason: currentRow?.SALEBILL_DESC || "",
            orderAmount: currentRow?.PAY_AMOUNT,
            refundAmount: currentRow?.PAY_AMOUNT,
            provinceCode: "530000"
        }
        console.log('reqreq', req);
        const data = await handeWeChatRefundApply(req)
        if (data.Result_Code === 100) {
            message.success('退款成功!')
            handleConfirmLoading(false)
            handleModalVisible(false)
            setCurrentRow(undefined);

            actionRef.current?.reload()
        } else {
            message.error(data.Result_Desc)
        }
    }
    // 撤销退款
    const handleGetCancelRefund = async () => {
        console.log('currentRowcurrentRowcurrentRow', currentRow);
        const req: any = {
            SaleBillChildId: "",
            SaleBillId: currentRow?.SALEBILL_ID,
            TrackingInfo: ""
        }
        const data = await handeWeRevokeRefundApply(req)
        if (data.Result_Code === 100) {
            message.success('撤销成功!')
            handleConfirmLoading(false)
            handleModalVisible(false)
            setCurrentRow(undefined);

            actionRef.current?.reload()
        } else {
            message.error(data.Result_Desc)
        }
    }

    return (
        <div>
            <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={{ x: "100%", y: "calc(100vh - 410px)" }}
                        headerTitle={<PageTitleBox props={props} />} // 列表表头
                        search={{ span: 6 }}
                        request={async (params) => {
                            const req = {
                                SearchParameter: {
                                    OWNERUNIT_ID: currentUser?.OwnerUnitId,
                                    PROVINCE_CODE: currentUser?.ProvinceCode,
                                    // SALEBILL_TYPES: params?.orderType === '0' ? '8000,8020,8900,9000' : params?.orderType,
                                    ORDER_DATE_Start: params?.ORDER_DATE_Start || "",
                                    ORDER_DATE_End: params?.ORDER_DATE_End || "",
                                    SALEBILL_STATES: params?.orderStatus === "0" ? "8000,8020,8900,9000" : params?.orderStatus,
                                    SALEBILL_TYPES: "3999",
                                    SearchKeyValue: params?.searchText || ""
                                    // CHANNEL_TYPE: params?.PAY_METHOD === "0" ? "" : params?.PAY_METHOD
                                },
                                PageIndex: 1,
                                PageSize: 999999,
                                SortStr: "ORDER_DATE desc",
                                // keyWord: {
                                //     Key: "ORDER_PERSON,ORDER_PERSONTEL,SALEBILL_CODE,COMMODITY_NAME",
                                //     Value: params?.searchText || ""
                                // },

                            }
                            console.log('reqreqreqreqreq', req);

                            // const data = await handeGetSALEBILLList(req);
                            const data = await handeGetSaleBillWholeList(req);
                            setCurrentSearchText(params?.searchText || "")
                            console.log('datadatadatadatadata', data);
                            handleSetlogSave(`点击查询按钮`)
                            if (data.List && data.List.length > 0) {
                                return { data: data.List, success: true, total: data.TotalCount }
                            }
                            return { data: [], success: true }
                        }}
                        toolbar={{
                        }}
                    />
                </div>
            </div>



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

                //         onFocus={() => { }}
                //         onBlur={() => { }}
                //     >
                //         {'订单详情'}
                //     </div>
                // }
                title={false}
                closeIcon={<div></div>}
                destroyOnClose={true}
                width={1200}
                visible={modalVisible}
                confirmLoading={confirmLoading}
                afterClose={() => {
                    formRef.current?.resetFields();
                    setCurrentRow(undefined);
                }}
                onCancel={() => {
                    handleConfirmLoading(false)
                    handleModalVisible(false)
                    setCurrentRow(undefined);
                }}
                footer={<div>
                    {/* style={{ width: "100%", display: 'flex', alignItems: 'center', justifyContent: 'space-between' }} */}
                    {/* <div>
                        {
                            currentUser?.UserPattern === 9000 ?
                                <Popconfirm
                                    title={'确认删除订单?'}
                                    onConfirm={async () => {
                                        await handleGetDeleteOrder()
                                    }}
                                >
                                    <Button type={'primary'} danger>删除订单</Button>
                                </Popconfirm> : ""
                        }
                    </div> */}
                    {
                        currentRow?.SALEBILL_STATE === 8000 ?
                            <div>
                                <Popconfirm
                                    title={'是否撤销退款?'}
                                    onConfirm={async () => {
                                        await handleGetCancelRefund()
                                    }}
                                >
                                    <Button danger>撤销退款</Button>
                                </Popconfirm>
                                <Popconfirm
                                    title={'是否同意退款?'}
                                    onConfirm={async () => {
                                        await handleGetAgreeToRefund()
                                    }}
                                >
                                    <Button type={'primary'}>同意退款</Button>
                                </Popconfirm>
                            </div> : ""
                    }

                </div>}
                modalRender={(modal) => {
                    return <Draggable
                        disabled={disabled}
                        bounds={bounds}
                        onStart={(event, uiData) => onDraggaleStart(event, uiData)}
                        handle=".bookingOrderModalTop"
                    >
                        <div ref={draggleRef}>{modal}</div>
                    </Draggable>
                }}
            >
                <ProForm
                    layout={'horizontal'}
                    formRef={modalRef}
                    submitter={false}
                    initialValues={currentRow ? {
                        ...currentRow,
                        ORDER_DATE: currentRow?.ORDER_DATE ? moment(currentRow?.ORDER_DATE).format('YYYY-MM-DD HH:mm:ss') : ''
                    } : {}}
                >
                    <div className="bookingOrderModalTop">
                        <div className="modalTopLeft">
                            <img className="memberIcon" src={orderIcon} />
                            <span className="modalTitle">订单详情</span>
                        </div>
                        <div className="modalTopRight">
                            <img className="memberIcon" src={closeIcon} onClick={() => {
                                handleCloseModal()
                            }} />
                        </div>
                    </div>

                    <div className="bookingOrderModalCenter">
                        <div className="smallTitle">订单信息</div>

                        <Row gutter={8}>
                            <Col span={8} className="memberInfoDetailItem">
                                <ProFormText
                                    name={"SALEBILL_CODE"}
                                    label={"订单编码"}
                                    readonly
                                    style={{ marginBottom: '16px' }}
                                />
                            </Col>
                            <Col span={8} className="memberInfoDetailItem">
                                <ProFormSelect
                                    name={"CHANNEL_TYPE"}
                                    label={"支付渠道"}
                                    readonly
                                    style={{ marginBottom: '16px' }}
                                />
                            </Col>
                            <Col span={8} className="memberInfoDetailItem">
                                <ProFormText
                                    name={"ORDER_DATE"}
                                    label={"下单时间"}
                                    readonly
                                    style={{ marginBottom: '16px' }}
                                />
                            </Col>
                            <Col span={8} className="memberInfoDetailItem">
                                <ProFormText
                                    name={"RECORD_COUNT"}
                                    label={"商品种类"}
                                    readonly
                                    style={{ marginBottom: '16px' }}
                                />
                            </Col>
                            <Col span={8} className="memberInfoDetailItem">
                                <ProFormText
                                    name={"TOTAL_COUNT"}
                                    label={"商品件数"}
                                    readonly
                                    style={{ marginBottom: '16px' }}
                                />
                            </Col>
                            <Col span={8} className="memberInfoDetailItem">
                                <ProFormText
                                    name={"ORDER_AMOUNT"}
                                    label={"订单金额"}
                                    readonly
                                    style={{ marginBottom: '16px' }}
                                />
                            </Col>
                            <Col span={8} className="memberInfoDetailItem">
                                <ProFormText
                                    name={"COUPON_AMOUNT"}
                                    label={"优惠金额"}
                                    readonly
                                    style={{ marginBottom: '16px' }}
                                />
                            </Col>
                            <Col span={8} className="memberInfoDetailItem">
                                <ProFormText
                                    name={"PACK_AMOUNT"}
                                    label={"打包金额"}
                                    readonly
                                    style={{ marginBottom: '16px' }}
                                />
                            </Col>
                            <Col span={8} className="memberInfoDetailItem">
                                <ProFormText
                                    name={"CONSUME_SCORE"}
                                    label={"使用积分"}
                                    readonly
                                    style={{ marginBottom: '16px' }}
                                />
                            </Col>
                            <Col span={8} className="memberInfoDetailItem">
                                <ProFormText
                                    name={"PAY_AMOUNT"}
                                    label={"实付金额"}
                                    readonly
                                    style={{ marginBottom: '16px' }}
                                />
                            </Col>
                            <Col span={8} className="memberInfoDetailItem">
                                <ProFormText
                                    name={"COST_AMOUNT"}
                                    label={"成本金额"}
                                    readonly
                                    style={{ marginBottom: '16px' }}
                                />
                            </Col>
                            <Col span={8} className="memberInfoDetailItem">
                                <ProFormSelect
                                    name={"SALEBILL_STATE"}
                                    label={"订单状态"}
                                    readonly
                                    style={{ marginBottom: '16px' }}
                                    options={[
                                        { label: "订单待支付", value: 1005 },
                                        { label: "订单待制作", value: 1010 },
                                        { label: "订单待取餐", value: 2000 },
                                        { label: "订单已完成", value: 3000 },
                                        { label: "退款申请中", value: 8000 },
                                        { label: "订单已退款", value: 8900 },
                                        { label: "订单已关闭", value: 9000 },
                                        { label: "订单已撤销", value: 9999 },
                                    ]}
                                />
                            </Col>
                            <Col span={8} className="memberInfoDetailItem">
                                <ProFormSelect
                                    name={"COMMENT_STATE"}
                                    label={"订单评价状态"}
                                    readonly
                                    style={{ marginBottom: '16px' }}
                                    options={[
                                        { label: "未评价", value: 0 },
                                        { label: "已评价", value: 1 },
                                    ]}
                                />
                            </Col>
                            {/* <Col span={8} className="memberInfoDetailItem">
                                <ProFormSelect
                                    name={"TAKE_TYPE"}
                                    label={"取餐方式"}
                                    readonly
                                    style={{ marginBottom: '16px' }}
                                    options={[
                                        { label: "堂食", value: 1000 },
                                        { label: "预约", value: 2000 },
                                    ]}
                                />
                            </Col> */}
                            {/* <Col span={8} className="memberInfoDetailItem">
                                <ProFormSelect
                                    name={"PACK_TYPE"}
                                    label={"就餐方式"}
                                    readonly
                                    style={{ marginBottom: '16px' }}
                                    options={[
                                        { label: "堂食", value: 1000 },
                                        { label: "打包", value: 2000 },
                                    ]}
                                />
                            </Col>
                            <Col span={8} className="memberInfoDetailItem">
                                <ProFormSelect
                                    name={"TAKE_NUMBER"}
                                    label={"取餐码"}
                                    readonly
                                    style={{ marginBottom: '16px' }}
                                />
                            </Col> */}
                        </Row>
                    </div>
                </ProForm>





                <ProTable
                    columns={orderDetailColumns}
                    bordered
                    search={false}
                    options={false}
                    request={async () => {
                        const req: any = {
                            searchParameter: {
                                SALEBILL_ID: currentRow?.SALEBILL_ID
                            },
                            PageIndex: 1,
                            PageSize: 999999,
                        }
                        const data = await handeGetSALEDETAILList(req)
                        console.log('datadatadata', data);
                        if (data.List && data.List.length > 0) {
                            return { data: data.List, success: true, total: data.TotalCount }
                        }
                        return { data: [], success: true }
                    }}
                    summary={() => {
                        // extra 是 request 返回的 extra 字段
                        return (
                            <tr>
                                <td colSpan={2} style={{ textAlign: 'center', fontWeight: 'bold' }}>合计</td>
                                <td />
                                <td style={{ textAlign: 'center', fontWeight: 'bold' }}>{currentRow?.TOTAL_COUNT || 0}</td>
                                <td />
                                <td style={{ textAlign: 'center', fontWeight: 'bold' }}>{currentRow?.ORDER_AMOUNT?.toFixed(2) || '0.00'}</td>
                            </tr>
                        )
                    }}
                />

            </Modal>
        </div>
    )
}

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