import { connect } from "umi";
import type { ConnectState } from "@/models/connect";
import { Descriptions, FormInstance, Modal } from "antd";
import { useRef, useState } from "react";
import React from "react";
import Draggable from "react-draggable";
import ProTable, { ActionType } from "@ant-design/pro-table";
import { handleGetGetCOMMODITYDetail, handleGetINSALES_STATISTICList } from "../../service";

type DetailProps = {
    onShow: any
    onCancel: any
    parentRow: any
}
const COMMODITYINFO = ({ onShow, onCancel, parentRow }: DetailProps) => {
    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();
    const draggleRef = React.createRef<any>()
    // 当前显示的数据类型
    const [currentDataType, setCurrentDataType] = useState<string>('1') // 1含税 2不含税
    // 商品详情
    const [commodityInfo, setCommodityInfo] = useState<any>()


    // 弹出框拖动效果
    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 columns: any = [
        {
            title: "数据类型",
            dataIndex: "dataType",
            valueType: 'select',
            hideInTable: true,
            fieldProps: {
                options: [{ label: "含税", value: '1' }, { label: "除税", value: '2' }],
            },
            initialValue: currentDataType,
        },


        {
            title: "盘存信息",
            dataIndex: 'info',
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: "序号",
                    dataIndex: "index",
                    valueType: "index",
                    hideInSearch: true,
                    align: 'center',
                    width: 80
                },
                {
                    title: "盘存时间",
                    dataIndex: "CHECKDATE",
                    hideInSearch: true,
                    align: 'center',
                    width: 150
                }
            ]
        }
    ]

    // 含税的时候拼在coulmns后面的 
    const columnsType1: any = [
        {
            title: "本期结存",
            dataIndex: "OVERPLU",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "OVERPLUSCOUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "OVERPLUS_AMOUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期损溢",
            dataIndex: "LOSSPROFIT",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "LOSSPROFIT_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "LOSSPROFIT_AMOUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                }
            ]
        },
        {
            title: <div style={{ textAlign: 'center' }}>毛利</div>,
            dataIndex: "GROSS_PROFIT",
            align: 'right',
            valueType: 'digit',
            width: 90,
            ellipsis: true,
            hideInSearch: true,
        },
        {
            title: <div style={{ textAlign: 'center' }}>收益</div>,
            dataIndex: "TOTAL_PROFIT",
            align: 'right',
            valueType: 'digit',
            width: 90,
            ellipsis: true,
            hideInSearch: true,
        },
        {
            title: "上期结存",
            dataIndex: "LASTOVERPLUS",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "LAST_OVERPLUSCOUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "LAST_OVERPLUSAMOUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期入库",
            dataIndex: "PURCHASE",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "PURCHASE_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "PURCHASE_TOTALTAXPRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期销售",
            dataIndex: "SELL",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "SELL_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "SELL_TOTALTAXPRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>成本</div>,
                    dataIndex: "SELL_COST",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期调拨",
            dataIndex: "TRANSFER",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "TRANSFER_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "TRANSFER_AMOUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期领用",
            dataIndex: "RECEIVE",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "RECEIVE_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "RECEIVE_AMOUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期退货",
            dataIndex: "BACK",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "BACK_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "BACK_AMOUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        }
    ]

    // 除税的时候拼在coulmns后面的 
    const columnsType2: any = [
        {
            title: "本期结存",
            dataIndex: "OVERPLU",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "OVERPLUSCOUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "OVERPLUS_PRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期损溢",
            dataIndex: "LOSSPROFIT",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "LOSSPROFIT_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "LOSSPROFIT_PRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                }
            ]
        },
        {
            title: <div style={{ textAlign: 'center' }}>毛利</div>,
            dataIndex: "GROSS_PROFITPRICE",
            align: 'right',
            valueType: 'digit',
            width: 90,
            ellipsis: true,
            hideInSearch: true,
        },
        {
            title: <div style={{ textAlign: 'center' }}>收益</div>,
            dataIndex: "TOTAL_PROFITPRICE",
            align: 'right',
            valueType: 'digit',
            width: 90,
            ellipsis: true,
            hideInSearch: true,
        },
        {
            title: "上期结存",
            dataIndex: "LASTOVERPLUS",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "LAST_OVERPLUSCOUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "LAST_OVERPLUSPRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期入库",
            dataIndex: "PURCHASE",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "PURCHASE_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "PURCHASE_TOTALPRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期销售",
            dataIndex: "SELL",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "SELL_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "SELL_TOTALPRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>成本</div>,
                    dataIndex: "SELL_COSTPRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期调拨",
            dataIndex: "TRANSFER",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "TRANSFER_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "TRANSFER_PRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期领用",
            dataIndex: "RECEIVE",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "RECEIVE_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "RECEIVE_PRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        },
        {
            title: "本期退货",
            dataIndex: "BACK",
            align: 'center',
            hideInSearch: true,
            children: [
                {
                    title: <div style={{ textAlign: 'center' }}>数量</div>,
                    dataIndex: "BACK_COUNT",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
                {
                    title: <div style={{ textAlign: 'center' }}>金额</div>,
                    dataIndex: "BACK_PRICE",
                    align: 'right',
                    valueType: 'digit',
                    width: 90,
                    ellipsis: true,
                    hideInSearch: true,
                },
            ]
        }
    ]

    return (
        <div>
            <Modal
                title={
                    <div
                        className="COMMODITYINFOTitle"
                        style={{
                            width: '100%',
                            cursor: 'move',
                        }}
                        onMouseOver={() => {
                            if (disabled) {
                                setDraggleDisabled(false)
                            }
                        }}
                        onMouseOut={() => {
                            setDraggleDisabled(true)
                        }}
                        onFocus={() => { }}
                        onBlur={() => { }}
                    >进销存信息</div>
                }
                destroyOnClose={true}
                width={'80%'}
                bodyStyle={{
                    height: '700px', // 你可以根据需要调整高度
                    overflowY: 'auto',
                }}
                visible={onShow}
                onCancel={() => {
                    if (onCancel) {
                        onCancel()
                    }
                }}
                footer={false}
                modalRender={(modal) => {
                    return <Draggable
                        disabled={disabled}
                        bounds={bounds}
                        onStart={(event, uiData) => onDraggaleStart(event, uiData)}
                        handle=".COMMODITYINFOTitle"
                    >
                        <div ref={draggleRef}>{modal}</div>
                    </Draggable>
                }}
            >
                <div style={{ textAlign: 'center', fontSize: '24px', }}>{`${parentRow?.SHOPNAME}${parentRow?.COMMODITY_NAME}进销存信息`}</div>
                <ProTable
                    actionRef={actionRef}
                    formRef={formRef}
                    columns={currentDataType === '1' ? [...columns, ...columnsType1] : currentDataType === '2' ? [...columns, ...columnsType2] : []}
                    bordered
                    options={false}
                    scroll={{ x: '100%', y: 400 }}
                    request={async (params) => {
                        console.log('parentRow', parentRow);
                        // 拿个商品详情
                        const commodityDetail = await handleGetGetCOMMODITYDetail({ COMMODITYId: parentRow?.COMMODITY_ID })
                        setCommodityInfo(commodityDetail)

                        const req: any = {
                            SearchParameter: {
                                SERVERPART_ID: parentRow?.SERVERPART_ID || "",
                                SERVERPARTSHOP_ID: parentRow?.SERVERPARTSHOP_ID || "",
                                // CHECKDATE: params.InventoryTime ? params.InventoryTime : "",
                                COMMODITY_IDS: parentRow?.COMMODITY_ID || "",
                                COMMODITY_BARCODE: parentRow?.COMMODITY_BARCODE || ""
                            },
                            PageIndex: 1,
                            PageSize: 999999
                        }
                        setCurrentDataType(params.dataType)
                        const data = await handleGetINSALES_STATISTICList(req)
                        if (data && data.length > 0) {
                            return { data: data, success: true }
                        }
                        return { data: [], success: true }
                    }}
                    tableExtraRender={(_, data) => {
                        return <div>
                            <Descriptions
                                size="small" column={4}
                                className="commity-sale-description"
                                contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }}
                            >
                                <Descriptions.Item label="商品编码">{commodityInfo?.COMMODITY_CODE || ""}</Descriptions.Item>
                                <Descriptions.Item label="商品条码">{commodityInfo?.COMMODITY_BARCODE || ""}</Descriptions.Item>
                                <Descriptions.Item label="商品单位">{commodityInfo?.COMMODITY_UNIT || ""}</Descriptions.Item>
                                <Descriptions.Item label="商品规格">{commodityInfo?.COMMODITY_RULE || ""}</Descriptions.Item>
                            </Descriptions>
                        </div>
                    }}
                />
            </Modal>
        </div>
    )
}

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