import React, { Fragment, useState, useEffect, useRef, useMemo } from 'react';
import { Table, Icon, message, Spin, Button, Form, DatePicker, Row, Col, Modal, Input, Upload } from 'antd';
import dayjs from 'dayjs';
import { getToken, GetTokenFromUrl } from '@/utils/utils';
const { RangePicker } = DatePicker;
const { TextArea } = Input;
function FirmModal(props) {
  const {
    onCancel,
    onOk,
    visible,
    item = null,
    disabled = true,
    form
  } = props;
  const [formRef] = Form.useForm();
  const handleOnOk = async () => {
    formRef
      .validateFields()
      .then((values) => {
        console.log(values);
        formRef.resetFields();
        onOk?.({ ...values });
      })
      .catch((info) => {
        console.log('Validate Failed:', info);
      });

    // ((err, fieldsValue) => {
    //   if (err)
    //     return;
    //   const values = {
    //     ...fieldsValue,
    //   };
    //   onOk?.(values);
    // });
  }
  const handleOnCancel = () => {
    formRef.resetFields();
    onCancel?.()
  }
  const token = getToken() || GetTokenFromUrl();
  const uploadProps = {
    name: 'files',
    // action: `/api/v1/device-color/upload/${ID}`,
    headers: {
      'JWT-TOKEN': token,
    },
    showUploadList: false,
    onChange: info => {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 文件上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 文件上传失败`);
      }
    },
  };
  useEffect(() => {
    formRef.resetFields();
  }, [item]);
  return <Modal
    maskClosable={false}
    open={visible}
    destroyOnClose
    onCancel={handleOnCancel}
    onOk={handleOnOk}
    forceRender
    width='60%'
    title={item == null ? '新增' : disabled ? '详情' : '编辑'}
    footer={disabled ? null : undefined}
  >
    <div style={{ padding: 30 }}>
      <Form
        form={formRef}
        // layout="inline"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
        initialValues={{
          name: item?.name || '',
          tax_code: item?.tax_code || '',
          contact: item?.contact || '',
          phone_number: item?.phone_number || '',
          bank_account: item?.bank_account || '',
          bank_number: item?.bank_number || '',
          address: item?.address || ''
        }}
      >
        <Row gutter={[48, 24]}>
          <Col span={12}>
            <Form.Item style={{ width: '100%' }} label="供应商名称:" name='name' rules={
              [
                {
                  required: true,
                  message: '请输入供应商名称',
                }]}>
              <Input disabled={disabled} placeholder="请输入供应商名称" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item style={{ width: '100%' }} label="税号:" name="tax_code" rules={[
              {
                required: true,
                message: '请输入税号',
              },
            ]}>
              <Input disabled={disabled} placeholder="请输入税号" />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={[48, 24]}>
          <Col span={12}>
            <Form.Item style={{ width: '100%' }} label="联系人:" name="contact" rules={
              [
                {
                  required: true,
                  message: '请输入联系人',
                },
              ]
            }>
              <Input disabled={disabled} placeholder="请输入联系人" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item style={{ width: '100%' }} label="联系电话:" name="phone_number" rules={[
              {
                required: true,
                message: '请输入联系电话',
              },
            ]}>
              <Input disabled={disabled} placeholder="请输入联系电话" />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={[48, 24]}>
          <Col span={12}>
            <Form.Item style={{ width: '100%' }} label="开户银行:" name='bank_account' rules={[
              {
                required: true,
                message: '请输入开户银行',
              },
            ]}>
              <Input disabled={disabled} placeholder="请输入开户银行" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item style={{ width: '100%' }} label="银行账号:" name='bank_number' rules={[
              {
                required: true,
                message: '请输入银行账号',
              },
            ]}>
              <Input disabled={disabled} placeholder="请输入银行账号" />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item labelCol={{ span: 2 }}
              wrapperCol={{ span: 22 }} style={{ width: '100%' }} label="地址:" name='address' rules={[
                {
                  required: true,
                  message: '请输入地址',
                },
              ]}>
              <Input disabled={disabled} placeholder="请输入地址" />
            </Form.Item>
          </Col>
        </Row>
        {/* <Row gutter={[48, 24]}>
          <Col span={12}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div style={{
                fontSize: 14,
                fontWeight: 400,
                color: '#000',
                lineHeight: '46px',
                letterSpacing: 2,
                whiteSpace: 'nowrap',
                paddingLeft: 35,
                width: 150
              }}>
                资质上传:
              </div>
              {
                !disabled ? <div>
                  <Upload {...uploadProps}>
                    <Button type="primary">上传文件</Button>
                  </Upload>
                </div> : <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
                  <div style={{ flexGrow: 1 }}>

                  </div>
                  <a style={{ color: "#7BFFFB" }}>下载</a>
                </div>
              }
            </div>
          </Col>
        </Row>
        <Row gutter={[48, 24]}>
          <Col span={12}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div style={{
                fontSize: 14,
                fontWeight: 400,
                color: '#000',
                lineHeight: '46px',
                letterSpacing: 2,
                whiteSpace: 'nowrap',
                paddingLeft: 35,
                width: 150
              }}>
                营业执照上传:
              </div>
              {
                !disabled ? <div>
                  <Upload {...uploadProps}>
                    <Button type="primary">上传文件</Button>
                  </Upload>
                </div> : <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
                  <div style={{ flexGrow: 1 }}>

                  </div>
                  <a style={{ color: "#7BFFFB" }}>下载</a>
                </div>
              }
            </div>
          </Col>
        </Row> */}
      </Form>
    </div>
  </Modal>
}

export default FirmModal;