import { connect } from "umi";
import type { ConnectState } from "@/models/connect";
import { Button, Col, FormInstance, Modal, Popconfirm, Row } from "antd";
import { useEffect, useRef, useState } from "react";
import Draggable from "react-draggable";
import React from "react";
import ProForm, { ProFormSelect, ProFormText } from "@ant-design/pro-form";
import { handleGetCOMMODITYList } from "../service";
import session from "@/utils/session";

type DetailProps = {
    showDetailDrawer: boolean
    handleCloseModal: any
    parentRow?: any
    handleDelete?: any
}
const ShopDetailModal = ({ showDetailDrawer, handleCloseModal, parentRow, handleDelete }: DetailProps) => {

    const modalRef = useRef<FormInstance>();
    const draggleRef = React.createRef<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),
        });
    };


    useEffect(() => {

    }, [showDetailDrawer])

    return (
        <Modal
            title={parentRow?.COMMODITY_NAME || ""}
            destroyOnClose={true}
            width={1200}
            visible={showDetailDrawer}
            footer={<div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', boxSizing: 'border-box', padding: '0 32px' }}>
                <div>
                    <Popconfirm
                        title="确认删除该商品？"
                        onConfirm={async () => {
                            if (handleDelete) {
                                handleDelete(parentRow?.COMMODITY_ID)
                            }
                        }}
                        onCancel={() => {
                        }}
                        okText="确认"
                        cancelText="取消"
                    >
                        <Button danger>删除</Button>
                    </Popconfirm>
                </div>
                <div></div>
            </div>}
            afterClose={() => {
                modalRef.current?.resetFields();
                // setCurrentRow(undefined);
            }}
            maskClosable={true}
            bodyStyle={{
                maxHeight: '850px', // 你可以根据需要调整高度
                overflowY: 'auto',
            }}
            onCancel={() => {
                handleCloseModal()
            }}
            modalRender={(modal) => {
                return <Draggable
                    disabled={disabled}
                    bounds={bounds}
                    onStart={(event, uiData) => onDraggaleStart(event, uiData)}
                    handle=".modalTop"
                >
                    <div ref={draggleRef}>{modal}</div>
                </Draggable>
            }}
        >

            <ProForm
                layout={'horizontal'}
                formRef={modalRef}
                submitter={false}
                request={async () => {
                    if (parentRow?.COMMODITY_ID) {
                        let req: any = {
                            SearchParameter: {
                                COMMODITY_IDS: parentRow?.COMMODITY_ID
                            }
                        }
                        const data = await handleGetCOMMODITYList(req)
                        console.log('datadatadatadata', data);
                        let list: any = data.Result_Data.List
                        if (list && list.length > 0) {
                            return list[0]
                        } else {
                            return []
                        }
                    }
                }}
            >

                <Row gutter={8}>
                    <Col span={8}>
                        <ProFormText
                            label={"商品名称"}
                            name={"COMMODITY_NAME"}
                            readonly
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormText
                            label={"商品条码"}
                            name={"COMMODITY_BARCODE"}
                            readonly
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormText
                            label={"商家自编码"}
                            name={"COMMODITY_BRAND"}
                            readonly
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormText
                            label={"商品类型"}
                            name={"COMMODITY_TYPE"}
                            readonly
                        />
                    </Col>

                    <Col span={8}>
                        <ProFormSelect
                            label={"商品状态"}
                            name={"COMMODITY_STATE"}
                            options={[{ label: "有效", value: 1 }, { label: "无效", value: 0 }]}
                            readonly
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormSelect
                            label={"商品业态"}
                            name={"BUSINESSTYPE"}
                            readonly
                            request={() => {
                                let list = session.get('SHOPTRADEList')
                                return list
                            }}
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormText
                            label={"商品单位"}
                            name={"COMMODITY_UNIT"}
                            readonly
                        />
                    </Col>

                    <Col span={8}>
                        <ProFormText
                            label={"商品规格"}
                            name={"COMMODITY_RULE"}
                            readonly
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormText
                            label={"商品产地"}
                            name={"COMMODITY_ORI"}
                            readonly
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormSelect
                            label={"商品质量"}
                            name={"COMMODITY_GRADE"}
                            request={() => {
                                let list = session.get('COMMODITYGRADEList')
                                return list
                            }}
                            readonly
                        />
                    </Col>

                    <Col span={8}>
                        <ProFormText
                            label={"零售价"}
                            name={"COMMODITY_RETAILPRICE"}
                            readonly
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormText
                            label={"会员价"}
                            name={"COMMODITY_MEMBERPRICE"}
                            readonly
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormText
                            label={"进货价"}
                            name={"COMMODITY_PURCHASEPRICE"}
                            readonly
                        />
                    </Col>

                    <Col span={8}>
                        <ProFormText
                            label={"进货税率"}
                            name={"DUTY_PARAGRAPH"}
                            readonly
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormText
                            label={"零售税率"}
                            name={"RETAIL_DUTY"}
                            readonly
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormSelect
                            label={"是否可售"}
                            name={"CANSALE"}
                            options={[{ label: "是", value: 1 }, { label: "否", value: 0 }]}
                            readonly
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormSelect
                            label={"是否散装"}
                            name={"ISBULK"}
                            options={[{ label: "是", value: 1 }, { label: "否", value: 0 }]}
                            readonly
                        />
                    </Col>
                    <Col span={8}>
                        <ProFormSelect
                            label={"称重方式"}
                            name={"METERINGMETHOD"}
                            options={[{ label: '计价', value: 1 }, { label: '散装称重', value: 0 }]}
                            readonly
                        />
                    </Col>
                </Row>
            </ProForm>
        </Modal >
    )
}

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