import React, { useEffect, useState } from 'react';
import { Col, Form, Input, InputNumber, message, Modal, Row, Select } from 'antd';
import { queryInfraredCategory } from '@/services/Infrared/category';
import { createInfraredBrands, updateInfraredBrands } from '@/services/Infrared/brand';

interface userEditPros {
  visible: boolean;
  editCallback: () => void;
  detailData: any;
}

const Edit: React.FC<userEditPros> = (props) => {
  const { visible, editCallback, detailData } = props;
  const [form] = Form.useForm();
  const [categoryList, setCategoryList] = useState([]);

  useEffect(() => {
    queryInfraredCategory({ q: 'list' }).then((res) => {
      if (res && res.code === 0) {
        setCategoryList(res.data.list || []);
      }
    });
  }, []);

  const onOk = () => {
    form.validateFields().then((values) => {
      if (values) {
        const data = { ...values };
        if (detailData) {
          data.record_id = detailData.record_id;
          updateInfraredBrands(data)
            .then((res) => {
              if (res && res.code === 0) {
                message.success('新增成功');
                editCallback();
              } else {
                message.error(res?.message);
                editCallback();
              }
            })
            .catch((e) => {
              message.error(e?.message);
              editCallback();
            });
        } else {
          createInfraredBrands(data)
            .then((res) => {
              if (res && res.code === 0) {
                message.success('编辑成功');
                editCallback();
              } else {
                message.error(res?.message);
                editCallback();
              }
            })
            .catch((e) => {
              message.error(e?.message);
              editCallback();
            });
        }
      }
    });
  };

  const onCancel = () => {
    editCallback();
  };

  const formItemLayout = {
    labelCol: {
      span: 4,
    },
    wrapperCol: {
      span: 19,
    },
  };

  return (
    <Modal
      title={`${detailData ? '编辑' : '新增'}`}
      open={visible}
      onOk={onOk}
      onCancel={onCancel}
      width={800}
    >
      <Form form={form}>
        <Row>
          <Col span={24}>
            <Form.Item
              {...formItemLayout}
              name="name"
              label="品牌名称"
              rules={[{ required: true, message: '请输入品牌名称' }]}
              initialValue={detailData?.name || ''}
            >
              <Input placeholder="请输入品牌名称" />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              {...formItemLayout}
              name="category_id"
              label="所属类型"
              rules={[{ required: true, message: '请选择所属类型' }]}
              initialValue={detailData?.category_id || undefined}
            >
              <Select placeholder="请选择所属类型">
                {categoryList && categoryList.length
                  ? categoryList.map((res: any) => {
                      return (
                        <Select.Option value={res.record_id} key={res.record_id}>
                          {res.name}
                        </Select.Option>
                      );
                    })
                  : null}
              </Select>
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              {...formItemLayout}
              name="code"
              label="品牌序号"
              rules={[{ required: true, message: '请输入品牌序号' }]}
              initialValue={detailData?.code || ''}
            >
              <InputNumber placeholder="请输入品牌序号" min={0} style={{ width: '100%' }} />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
export default Edit;
