import { useEffect } from 'react';
import {
  ModalForm,
  ProForm,
  ProFormDigit,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormTreeSelect,
} from '@ant-design/pro-components';
import { Form, Button, message, Modal, Descriptions } from 'antd';
import DictTag, { DictValueEnumObj } from '@/components/DictTag';
import { getCmsIndustryTreeList } from '@/services/classify/industry';
export type ListFormProps = {
  onCancel: (flag?: boolean, formVals?: unknown) => void;
  onSubmit: (values: API.CompanyList.Company) => Promise<void>;
  open: boolean;
  values?: Partial<API.CompanyList.Company>;
  scaleEnum?: DictValueEnumObj;
};

const ListEdit: React.FC<ListFormProps> = (props) => {
  const [form] = Form.useForm();

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

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

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

  return (
    <ModalForm<{
      name: string;
      company: string;
    }>
      title={`${props.values ? '编辑' : '新增'}企业`}
      form={form}
      autoFocusFirstInput
      open={props.open}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => handleCancel(),
      }}
      submitTimeout={2000}
      onFinish={handleFinish}
    >
      <ProFormDigit label="InputNumber" name="companyId" disabled hidden={true} />
      <ProForm.Group>
        <ProFormText width="md" name="name" label="单位名称" placeholder="请输入单位名称" />
        <ProFormSelect
          width="md"
          name="scale"
          label={'单位规模'}
          valueEnum={props.scaleEnum}
          placeholder="请选择单位规模"
          rules={[{ required: true, message: '请选择单位规模!' }]}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText width="md" name="code" label="信用代码" placeholder="请输入信用代码" />
        <ProFormTreeSelect
          name="industry"
          label="主要行业"
          placeholder="请输入主要行业"
          allowClear
          width="md"
          request={async () => {
            return getCmsIndustryTreeList().then((res) => {
              return res.data;
            });
          }}
          fieldProps={{
            suffixIcon: null,
            filterTreeNode: true,
            showSearch: true,
            popupMatchSelectWidth: false,
            labelInValue: false,
            autoClearSearchValue: true,
            multiple: false,
            treeNodeFilterProp: 'title',
            fieldNames: {
              label: 'label',
              value: 'id',
              children: 'children',
            },
          }}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText width="xl" name="location" label="单位地点" placeholder="请输入单位地点" />
        <ProFormTextArea
          width="xl"
          name="description"
          label="单位介绍"
          placeholder="请输入单位介绍"
        />
      </ProForm.Group>
    </ModalForm>
  );
};

// 独立的详情查看组件
export const CompanyDetailView = ({ 
  open, 
  onCancel, 
  record,
  scaleEnum 
}: { 
  open: boolean; 
  onCancel: () => void; 
  record?: API.CompanyList.Company;
  scaleEnum?: DictValueEnumObj;
}) => {
  return (
    <Modal
      title="公司详情"
      open={open}
      width={600}
      onCancel={onCancel}
      footer={[
        <Button key="back" onClick={onCancel}>
          关闭
        </Button>,
      ]}
    >
      <div style={{ padding: '20px' }}>
        <Descriptions column={1} bordered>
          <Descriptions.Item label="单位名称">{record?.name}</Descriptions.Item>
          <Descriptions.Item label="主要行业">{record?.industry}</Descriptions.Item>
          <Descriptions.Item label="单位规模">
            <DictTag enums={scaleEnum} value={record?.scale} />
          </Descriptions.Item>
          <Descriptions.Item label="公司位置">{record?.location}</Descriptions.Item>
          <Descriptions.Item label="信用代码">{record?.code}</Descriptions.Item>
          <Descriptions.Item label="单位介绍">{record?.description}</Descriptions.Item>
        </Descriptions>
      </div>
    </Modal>
  );
};

export default ListEdit;