import {
  ModalForm,
  ProForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProDescriptions,
} from '@ant-design/pro-components';
import { Form } from 'antd';
import React, { useEffect } from 'react';
import DictTag from '@/components/DictTag';

export type JobIndexFormProps = {
  onCancel: (flag?: boolean, formVals?: unknown) => void;
  onSubmit: (values: API.JobIndex.JobIndexItem) => Promise<void>;
  open: boolean;
  values?: Partial<API.JobIndex.JobIndexItem>;
  mode?: 'view' | 'edit' | 'create';
  isActiveEnum: any;
};

const JobIndexEdit: React.FC<JobIndexFormProps> = (props) => {
  const [form] = Form.useForm<API.JobIndex.JobIndexItem>();
  const { mode = props.values ? 'edit' : 'create', isActiveEnum } = props;

  useEffect(() => {
    if (props.open) {
      form.resetFields();
      if (props.values) {
        form.setFieldsValue(props.values);
      }
    }
  }, [form, props.values?.indexId, props.open]);

  const handleCancel = () => {
    props.onCancel();
    form.resetFields();
  };

  const handleFinish = async (values: Record<string, any>) => {
    await props.onSubmit(values as API.JobIndex.JobIndexItem);
  };

  if (mode === 'view') {
    return (
      <ModalForm
        title="指标信息详情"
        open={props.open}
        width={800}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => handleCancel(),
          footer: null,
        }}
        submitter={false}
      >
        <ProDescriptions<API.JobIndex.JobIndexItem> column={2} bordered dataSource={props.values || {}}>
          {/* <ProDescriptions.Item dataIndex="indexId" label="指标ID" /> */}
          <ProDescriptions.Item dataIndex="indexName" label="指标名称" />
          <ProDescriptions.Item dataIndex="indexDesc" label="指标描述" span={2} />
          <ProDescriptions.Item
            dataIndex="isActive"
            label="是否启用"
            render={(text) => <DictTag enums={isActiveEnum} value={text as string} />}
          />
        </ProDescriptions>
      </ModalForm>
    );
  }

  return (
    <ModalForm<API.JobIndex.JobIndexItem>
      title={mode === 'edit' ? '编辑指标信息' : '新建指标信息'}
      form={form}
      autoFocusFirstInput
      open={props.open}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => handleCancel(),
      }}
      submitTimeout={2000}
      onFinish={handleFinish}
    >
      <ProForm.Group>
        <ProFormText width="md" hidden name="indexId" />
        <ProFormText
          width="md"
          name="indexName"
          label="指标名称"
          placeholder="请输入指标名称"
          rules={[{ required: true, message: '请输入指标名称!' }]}
        />
        <ProFormSelect
          width="md"
          name="isActive"
          label="是否启用"
          valueEnum={isActiveEnum}
          placeholder="请选择状态"
          rules={[{ required: true, message: '请选择是否启用!' }]}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormTextArea
          width="lg"
          name="indexDesc"
          label="指标描述"
          placeholder="请输入指标描述"
          rules={[{ required: true, message: '请输入指标描述!' }]}
          fieldProps={{
            rows: 4,
          }}
        />
      </ProForm.Group>
    </ModalForm>
  );
};

export default JobIndexEdit;
