import React, { useState } from 'react';
import { Col, Form, Input, InputNumber, message, Modal, Row, Select } from 'antd';
import UploadImage from '@/components/UploadImage';
import { createBanner, updateBanner } from '@/services/banner';

interface editProps {
  visible: boolean;
  editCallback: () => void;
  params: any;
}

const Edit: React.FC<editProps> = (props) => {
  const { params, visible, editCallback } = props;
  const [form] = Form.useForm();
  const [filesList, setFilesList] = useState([]);

  const onOk = () => {
    form.validateFields().then((values) => {
      const data = { ...values };
      data.banner_items = filesList;
      if (params) {
        updateBanner(data, params.record_id)
          .then((res) => {
            if (res.code === 0) {
              message.success('编辑成功');
              editCallback();
            } else {
              message.error(res?.message);
              editCallback();
            }
          })
          .catch((e) => {
            message.error(e?.message);
            editCallback();
          });
      } else {
        createBanner(data)
          .then((res) => {
            if (res.code === 0) {
              message.success('新增成功');
              editCallback();
            } else {
              message.error(res?.message);
              editCallback();
            }
          })
          .catch((e) => {
            message.error(e?.message);
            editCallback();
          });
      }
    });
  };

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

  // 上传图片回调
  const onUploadChange = (files: any) => {
    if (files && files.length) {
      const arr: any = [];
      files.forEach((el: any) => {
        arr.push({ url: el?.response?.data?.url });
      });
      setFilesList(arr);
    }
  };

  const formItemLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 18,
    },
  };

  return (
    <Modal
      title={`${params ? '编辑' : '新增'}`}
      open={visible}
      onOk={onOk}
      onCancel={onCancel}
      width={800}
    >
      <Form form={form}>
        <Row>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="title"
              label="标题"
              rules={[{ required: true, message: '请输入标题' }]}
              initialValue={params?.title}
            >
              <Input placeholder="请输入标题" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="type"
              label="类型"
              rules={[{ required: true, message: '请选择类型' }]}
              initialValue={params?.type}
            >
              <Input placeholder="请输入类型" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="status"
              label="状态"
              rules={[{ required: true, message: '请选择状态' }]}
              initialValue={params?.status}
            >
              <Select placeholder="请选择状态">
                <Select.Option key={0} value={0}>
                  停用
                </Select.Option>
                <Select.Option key={1} value={1}>
                  启用
                </Select.Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="sequence"
              label="排序值"
              rules={[{ required: true, message: '请输入排序值' }]}
              initialValue={params?.sequence}
            >
              <InputNumber min={1} placeholder="请输入排序值" style={{ width: '100%' }} />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              {...formItemLayout}
              name="banner_items"
              label="上传图片"
              rules={[{ required: true, message: '请选择图片' }]}
              initialValue={params?.banner_items ? [{ url: params?.banner_items[0].url }] : []}
            >
              <UploadImage
                maxCount={1}
                onChange={onUploadChange}
                value={[{ url: params?.banner_items ? params?.banner_items[0].url : '' }]}
              />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
export default Edit;
