// index.tsx
import { Button, Form, Input, message, Modal } from 'antd';
import React, { useEffect } from 'react';
import SelectedTable from '../selectedTable';
import styles from './index.less';

interface UserEditModalProps {
  //   visible: boolean;
  orgTreeData?: User.OrganizationNode[];
  onCancel: () => void;
  onOk: (values: any) => void;
  confirmLoading?: boolean;
  dataDetial?: Termial.ModalBaseNode;
  selectedOrg?: number;
}

const BindUserModal: React.FC<UserEditModalProps> = ({
  orgTreeData,
  onCancel,
  onOk,
  confirmLoading = false,
  dataDetial,
}) => {
  const { recordData, visible, selectedOrg } = dataDetial || {};
  const [form] = Form.useForm();

  useEffect(() => {
    // const initialValues = { user_group_id: [selectedOrg], status: 1 };
    // form.setFieldsValue(initialValues);
  }, [visible, form, recordData, selectedOrg]);

  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      console.log("values=====",values)
      onOk(values);
    } catch (error) {
      message.error('请检查表单字段');
    }
  };

  return (
    <Modal
      title={'绑定用户'}
      open={visible}
      onCancel={onCancel}
      onOk={handleOk}
      confirmLoading={confirmLoading}
      width={1200}
      maskClosable={false}
      centered={true}
      destroyOnHidden={true}
      cancelText="取消"
      okText="确定"
      footer={
        <div style={{ display: 'flex', justifyContent: 'right' }}>
          <Button
            type="primary"
            onClick={handleOk}
            style={{ marginRight: '20px' }}
          >
            确定
          </Button>
          <Button onClick={onCancel} style={{ marginRight: '20px' }}>
            取消
          </Button>
        </div>
      }
    >
      <div className={styles.model_content}>
        <Form
          form={form}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 19 }}
          layout="horizontal"
          style={{ paddingTop: '20px', paddingBottom: '20px' }}
        >
          <Form.Item
            name="user_list"
            label="选择用户"
            rules={[{ required: true, message: '请输入终端型号' }]}
          >
            <SelectedTable orgTreeData={orgTreeData} />
          </Form.Item>
          <Form.Item
            name="description"
            label="描述内容"
            rules={[{ required: false, message: '请输入描述内容' }]}
          >
            <Input.TextArea rows={4} />
          </Form.Item>
        </Form>
      </div>
    </Modal>
  );
};

export default BindUserModal;