import React, { useEffect } from 'react';
import {
  ModalForm,
  ProForm,
  ProFormDigit,
  ProFormRadio,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { Form } from 'antd';
import { DictValueEnumObj } from '@/components/DictTag';
import { FormattedMessage } from '@@/exports';
import { getCmsIndustryTree } from '@/services/classify/industry';

export type ListFormProps = {
  onCancel: (flag?: boolean, formVars?: unknown) => void;
  onSubmit: (values: API.ClassifyIndustry.IndustryRow) => Promise<void>;
  open: boolean;
  values?: Partial<API.ClassifyIndustry.IndustryRow>;
  // industryStatusEnum: DictOptionType[];
  industryStatusEnum: DictValueEnumObj;
};

const listEdit: React.FC<ListFormProps> = (props) => {
  const [form] = Form.useForm();
  const { industryStatusEnum } = props;
  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>) => {
    props.onSubmit(values as API.ClassifyIndustry.IndustryRow);
  };

  return (
    <ModalForm<{
      name: string;
      company: string;
    }>
      title={`${props.values ? '编辑' : '新增'}行业`}
      form={form}
      autoFocusFirstInput
      open={props.open}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => handleCancel(),
      }}
      submitTimeout={2000}
      onFinish={handleFinish}
      // readonly
    >
      <ProFormDigit label="InputNumber" name="industryId" disabled hidden={true} />
      <ProForm.Group>
        <ProFormText width="md" name="industryName" label="行业名称" placeholder="请输入行业名称" />
        <ProFormDigit
          label="显示顺序"
          name="orderNum"
          width="md"
          min={0}
          placeholder="请输入显示顺序"
        />
      </ProForm.Group>
      <ProForm.Group>
        {/* 多级 */}
        {/*<ProFormTreeSelect*/}
        {/*  name="parentId"*/}
        {/*  label="父行业"*/}
        {/*  placeholder="请选择父行业"*/}
        {/*  allowClear*/}
        {/*  width="md"*/}
        {/*  request={async () => {*/}
        {/*    return getCmsIndustryTree().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',*/}
        {/*    },*/}
        {/*  }}*/}
        {/*/>*/}
        {/* 2级 */}
        <ProFormSelect
          name="parentId"
          label="父行业"
          allowClear
          width="md"
          placeholder="请选择父行业"
          request={async () => {
            return getCmsIndustryTree().then((res) => {
              return res.data;
            });
          }}
          colProps={{ md: 12, xl: 12 }}
          rules={[{ required: true, message: '请选择父行业!' }]}
          fieldProps={{
            suffixIcon: null,
            showSearch: true,
            popupMatchSelectWidth: false,
            labelInValue: false,
            autoClearSearchValue: true,
            fieldNames: {
              label: 'label',
              value: 'id',
            },
          }}
        />
        <ProFormRadio.Group
          valueEnum={industryStatusEnum}
          name="status"
          label="行业状态"
          width="md"
          placeholder="请输入状态"
          rules={[
            {
              required: false,
              message: <FormattedMessage id="请输入状态！" defaultMessage="请选择行业状态！" />,
            },
          ]}
        />
      </ProForm.Group>
    </ModalForm>
  );
};

export default listEdit;