import { message, Modal, Form, Input, Select, Col, Row, Checkbox } from 'antd';
import { useEffect } from 'react';
import { AddPrinter, UpdatePrinter } from '../../service';

const PrinterFormModal = (props) => {
    const [formRef] = Form.useForm();


    /**
     * 创建/更新打印机
     */
    const handleOk = async () => {
        const formData = await formRef.validateFields();
        if (formData.id) {
            const response = await UpdatePrinter(formData);
            if (response.statusCode === 200) {
                message.success('打印机更新成功！');
                props.onOk();
            } else {
                message.error(response.errors || '打印机更新失败！');
            }
        } else {
            formData.storeId = props.currentStore
            const response = await AddPrinter(formData);
            if (response.statusCode === 200) {
                message.success('打印机创建成功！');
                props.onOk();
            } else {
                message.error(response.errors || '打印机创建失败！');
            }
        }
    }

    useEffect(() => {
        formRef.setFieldsValue(props.printer);
    }, []);

    return <Modal title={`【${props.printer?.name || '新建'}】打印机`} destroyOnClose width={900} visible={props.isModalOpen} onOk={handleOk} onCancel={props.onCancel}>
        <Form
            name="basic"
            labelCol={{ span: 8 }}
            autoComplete="off"
            form={formRef}
        >
            <Form.Item
                name="id"
                hidden
            >
                <Input />
            </Form.Item>

            <Row>
                <Col span={12}>
                    <Form.Item
                        name="name" label="打印机名称" placeholder="请输入打印机名称"
                        rules={[{ required: true, message: '请输入打印机名称！' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        name="applicationId" label="应用ID" placeholder="请输入应用ID"
                        rules={[{ required: true, message: '请输入应用ID！' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        name="applicationkey" label="应用秘钥" placeholder="请输入应用秘钥"
                        rules={[{ required: true, message: '请输入应用秘钥！' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        name="terminalId" label="终端ID" placeholder="终端ID"
                        rules={[{ required: true, message: '请输入终端ID！' }]}
                    >
                        <Input />
                    </Form.Item>

                </Col>
                <Col span={12}>
                    <Form.Item
                        name="terminalKey" label="终端秘钥" placeholder="终端秘钥"
                        rules={[{ required: true, message: '请输入终端秘钥！' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        name="templaterId"
                        label="打印机模板"
                        rules={[
                            {
                                required: true,
                                message: '请选择打印机模板！'
                            }
                        ]}
                    >
                        <Select
                            placeholder="请选择打印机模板！"
                            allowClear
                        >
                            {
                                props.printerTemplaterList.map(item => {
                                    return <Select.Option value={item.value} key={item.value}>{item.label}</Select.Option>
                                })
                            }
                        </Select>
                    </Form.Item>
                </Col>
            </Row>
            <Form.Item name="goodsIdList" label="商品" labelCol={{ span: 3 }}>
                <Checkbox.Group>
                    <Row>
                        {
                            props.storeFoodMenuAll.map(item => {
                                return <Col  key={item.foodId}>
                                    <Checkbox
                                        value={item.foodId}
                                        style={{
                                            lineHeight: '32px',
                                        }}
                                    >
                                        {item.foodName}
                                    </Checkbox>
                                </Col>
                            })
                        }
                    </Row>
                </Checkbox.Group>
            </Form.Item>
        </Form>
    </Modal>
};

export default PrinterFormModal;