import { useAjax } from "@/Hook/useAjax"
import { CatalogScaleType, CatalogType, IndustryType } from "@/services/launchAdq/enum"
import { addSysProductCatalogApi, editSysProductCatalogApi } from "@/services/launchAdq/goods"
import { Form, Input, message, Modal, Select } from "antd"
import React from "react"


interface Props {
    visible?: boolean,
    title?: string,
    onClose?: () => void,
    onChange?: () => void,
    initialValues?: any
}
/**
 * 新增 修改 商品库
 * @returns 
 */
const AddorEdit: React.FC<Props> = (props) => {
    /****************************/
    const { visible, title = '新增', onClose, onChange, initialValues = {} } = props
    const [form] = Form.useForm()

    const addSysProductCatalog = useAjax((params) => addSysProductCatalogApi(params))
    const editSysProductCatalog = useAjax((params) => editSysProductCatalogApi(params))
    /****************************/

    const handleOk = async () => {
        form.submit()
        let data = await form.validateFields()
        if (title === '新增') {
            addSysProductCatalog.run({ ...data }).then(res => {
                if (res) {
                    message.success('新增成功')
                    onChange && onChange()
                }
            })
        } else {
            editSysProductCatalog.run({ ...data, productCatalogId: initialValues?.id }).then(res => {
                if (res) {
                    message.success('修改成功')
                    onChange && onChange()
                }
            })
        }
    }

    return <Modal title={`${title}商品库`} open={visible} onOk={handleOk} onCancel={() => { onClose && onClose() }}>
        <Form
            name="basic"
            form={form}
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
            autoComplete="off"
            initialValues={{ ...initialValues }}
        >
            <Form.Item label="商品库名称" name="catalogName" rules={[{ type: 'string', required: true, message: '请输入商品库名称!' }]}>
                <Input placeholder="输入商品库名称" />
            </Form.Item>
            <Form.Item label="商品库规模" name="catalogScaleType" rules={[{ type: 'string', required: true, message: '请输入商品库规模!' }]}>
                <Select placeholder='商品库规模' style={{ minWidth: 200 }} showSearch allowClear
                    filterOption={(input: any, option: any) =>
                        (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                    }
                >
                    {Object.keys(CatalogScaleType).map(key => {
                        return <Select.Option value={key} key={key}>{CatalogScaleType[key]}</Select.Option>
                    })}
                </Select>
            </Form.Item>
            <Form.Item label="商品库类型" name="catalogType" rules={[{ type: 'string', required: true, message: '请输入商品库类型!' }]}>
                <Select placeholder='商品库类型' style={{ minWidth: 200 }} showSearch allowClear
                    filterOption={(input: any, option: any) =>
                        (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                    }
                >
                    {Object.keys(CatalogType).map(key => {
                        return <Select.Option value={key} key={key}>{CatalogType[key]}</Select.Option>
                    })}
                </Select>
            </Form.Item>
            <Form.Item label="商品库行业类型" name="industryType" rules={[{ type: 'string', required: true, message: '请输入商品库行业类型!' }]}>
                <Select placeholder='商品库行业类型' style={{ minWidth: 200 }} showSearch allowClear
                    filterOption={(input: any, option: any) =>
                        (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                    }
                >
                    {Object.keys(IndustryType).map(key => {
                        return <Select.Option value={key} key={key}>{IndustryType[key]}</Select.Option>
                    })}
                </Select>
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(AddorEdit)