import { ProForm, ProFormDigit, ProFormRadio, ProFormText, ProFormTextArea, ProFormTreeSelect } from "@ant-design/pro-components";
import { Col, FormInstance, message, Modal, Row } from "antd";
import { useRef, useState } from "react";
import { connect } from "umi";
import { ConnectState } from "@/models/global";
import { handleAddMenus, handleGetMenuList } from "../service";

type DetailProps = {
    currentUser?: any // 用户详情的公参
    showDrawer: boolean // 显示悬浮框的判断
    parentRow?: any // 点击的行 编辑的时候有用
    setShowDrawer: any // 改变悬浮框现实状态
    parentTableRef?: any // 父级表格实例
}
const AddMenu = ({ currentUser, showDrawer, parentRow, setShowDrawer, parentTableRef }: DetailProps) => {
    console.log('showDrawer', showDrawer);
    // 表单实例
    const formRef = useRef<FormInstance>();
    // 当前的菜单类型
    const [currentMenuType, setCurrentMenuType] = useState<number>(1)


    return (
        <Modal
            title={parentRow?.id ? '更新菜单' : '新建菜单'}
            width={600}
            open={showDrawer}
            destroyOnClose
            onOk={() => {
                formRef.current?.validateFields().then(async (res: any) => {
                    console.log('res', res);
                    const req: any = {
                        parentId: res.parentId || 1,
                        menuCode: res.menuCode,
                        menuName: res.menuName,
                        menuIcon: res.menuIcon || "",
                        menuPath: res.menuPath || "",
                        component: "",
                        permission: "",
                        menuType: res.menuType,
                        sortOrder: res.sortOrder,
                        hidden: res.hidden === 1 ? false : res.hidden === 2 ? true : '',
                        operator: currentUser.adminName
                    }
                    const data = await handleAddMenus(req)
                    console.log('datadsa', data);
                    if (data.code === 200) {
                        message.success(data.message)
                        if (parentTableRef) {
                            parentTableRef.current.reload()
                        }

                        formRef.current?.resetFields()
                        setShowDrawer(false)
                    }
                })
            }}
            onCancel={() => {
                setShowDrawer(false)
            }}
        >
            <ProForm
                formRef={formRef}
                submitter={false}
                layout="horizontal"
                labelCol={{ span: 6 }}
            >
                <Row>
                    <Col span={24}>
                        <ProFormText
                            label={currentMenuType === 1 ? "菜单名称" : "模块名称"}
                            name={"menuName"}
                            rules={[
                                { required: true, message: `请输入${currentMenuType === 1 ? '菜单' : '模块'}名称` }
                            ]}
                        />
                    </Col>

                    <Col span={24}>
                        <ProFormText
                            label={currentMenuType === 1 ? "菜单编码" : "模块编码"}
                            name={"menuCode"}
                            rules={[
                                { required: true, message: `请输入${currentMenuType === 1 ? '菜单' : '模块'}编码` }
                            ]}
                        />
                    </Col>

                    <Col span={24}>
                        <ProFormTreeSelect
                            label={"上级菜单"}
                            name={"parentId"}
                            request={async () => {
                                const req: any = {

                                }
                                const data = await handleGetMenuList()
                                let res: any = []
                                if (data && data.length > 0) {
                                    res = data
                                }
                                return res
                            }}
                            fieldProps={{
                                fieldNames: {
                                    label: "menuName",
                                    value: "id"
                                }
                            }}
                        />
                    </Col>

                    {
                        currentMenuType === 1 ?
                            <Col span={24}>
                                <ProFormText
                                    name="menuIcon"
                                    label="菜单图标"
                                    placeholder="请输入菜单图标字段"
                                    initialValue={"<ProfileOutlined />"}
                                    fieldProps={
                                        {
                                            addonAfter: <a href='https://ant.design/components/icon-cn/' target='_blank'>去复制</a>
                                        }
                                    }

                                />
                            </Col> : ""
                    }

                    {
                        currentMenuType === 2 ?
                            <Col span={24}>
                                <ProFormText
                                    name="menuPath"
                                    label="模块地址"
                                    placeholder="请输入模块地址"
                                />
                            </Col> : ''
                    }

                    <Col span={24}>
                        <ProFormDigit
                            name="sortOrder"
                            label="索引"
                            placeholder="请输入索引"

                            min={0}
                            max={9999}
                            fieldProps={{ precision: 0 }}
                        />
                    </Col>

                    <Col span={24}>
                        <ProFormRadio.Group
                            name="hidden"
                            label="状态"
                            initialValue={1}

                            options={[
                                {
                                    label: '有效',
                                    value: 1,
                                },
                                {
                                    label: '隐藏',
                                    value: 2,
                                }]}
                        />
                    </Col>

                    <Col span={24}>
                        <ProFormRadio.Group
                            name="menuType"
                            label="菜单类型"
                            initialValue={1}
                            rules={[
                                { required: true, message: "请选择菜单类型" }
                            ]}
                            options={[
                                {
                                    label: '菜单',
                                    value: 1,
                                },
                                {
                                    label: '模块',
                                    value: 2,
                                }
                            ]}
                            fieldProps={{
                                onChange: (e: any) => {
                                    console.log('e', e);
                                    setCurrentMenuType(Number(e.target.value))
                                }
                            }}
                        />
                    </Col>

                    {/* <Col span={24}>
                        <ProFormTextArea
                            name="DESC"
                            label="备注说明"
                            placeholder="请输入说明"
                        />
                    </Col> */}
                </Row>
            </ProForm>
        </Modal>
    );
}
export default connect(({ user }: ConnectState) => ({
    currentUser: user.data
}))(AddMenu);