import { Modal, message, Form, Input, Select, InputNumber, Button, Popconfirm } from 'antd';
import React, { useEffect, useState } from 'react';
import { AddStoreBatchingStocAsync, UpdateStoreBatchingStocAsync, getloc, GetBatchingAsync } from '../services';
const key = 'message';

/**
 * 更新
 * @param {*} props 
 * @returns 
 */
const StockMaterialForm = (props) => {

    const [form] = Form.useForm();
    // 位置信息
    const [loc, setloc] = useState([]);
    const [batchingList, setBatchingList] = useState([]);

    const handleOk = async () => {
        const formData = await form.validateFields();
        formData.DeviceId = props.device.id;
        if (formData.id) {
            await UpdateStoreBatchingStocAsync(formData).then((r) => {
                message.destroy(key);
                if (r.data) {
                    message.success('修改成功');
                    props.onOk();
                } else {
                    message.error('修改失败' + r.errors);
                }
            });
        } else {
            await AddStoreBatchingStocAsync(formData).then((r) => {
                message.destroy(key);
                if (r.data) {
                    message.success('添加成功');
                    props.onOk();
                } else {
                    message.error('添加失败' + r.errors);
                }
            });
        }
    }

    /**
     * 获取设备位置信息
     */
    const onFetchLoc = async () => {
        getloc(props.device.deviceTypeKey).then((data) => {
            setloc(data.data);
        });
    }

    /**
     * 获取原料列表
     */
    const getBatchingAsync = async () => {
        GetBatchingAsync({ DeviceId: props.device.id }).then((data) => {
            setBatchingList(data.data);
        });
    }

    useEffect(() => {
        if (props.stockMaterial?.id) {
            form.setFieldsValue(props.stockMaterial);
        }
        onFetchLoc();
        getBatchingAsync();
    }, []);


    return (
        <Modal
            width={700}
            destroyOnClose
            title={`${props.stockMaterial?.id ? '编辑' + props.stockMaterial.batching_Name : '新增'}`}
            visible={props.open}
            onCancel={props.onCancel}
            onOk={handleOk}
            footer={[
                <Button key="back" onClick={props.onCancel}>
                    取消
                </Button>,
                <Popconfirm
                    title="点击同步库存或重启设备后生效！！！"
                    onConfirm={handleOk}
                    okText="确定"
                    cancelText="取消"
                >
                    <Button key="submit" type="primary">
                        确定
                    </Button>
                </Popconfirm>
            ]}
        >
            <Form
                layout="vertical"
                preserve={false}
                form={form}
            >
                <Form.Item name="id" hidden={true}>
                    <Input />
                </Form.Item>
                <Form.Item
                    name="batching_Id"
                    label="原料名称"
                    rules={[{ required: true, message: '请选择原料名称' }]}
                >
                    <Select placeholder="请选择原料名称" showSearch
                        optionFilterProp="children"
                        filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }>
                        {batchingList?.map((item, index) => {
                            return (
                                <Select.Option index={index} value={item.id} key={item.id}>
                                    {item.name}
                                </Select.Option>
                            );
                        })}
                    </Select>
                </Form.Item>
                <Form.Item
                    name="batching_Loc"
                    label="库存位置"
                    rules={[{ required: true }]}
                    defaultValue="0"
                >
                    <Select placeholder="请选择库存位置" >
                        {loc?.map((item, index) => {
                            return (
                                <Select.Option index={index} value={item.loc} key={item.loc}>
                                    {item.loc}
                                </Select.Option>
                            );
                        })}
                    </Select>
                </Form.Item>
                <Form.Item
                    name="batching_Count"
                    label="原料数量"
                    rules={[{ required: true }]}
                    defaultValue="0"
                >
                    <InputNumber style={{ width: '100%' }} min={0} placeholder="请输入原料数量" />
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default StockMaterialForm;
