import { postDeviceGetDeviceFkSelect } from '@/services/device/Device';
import { putDeviceRelationUpdateDeviceRelation } from '@/services/device/DeviceRelation';
import {
  ModalForm,
  ProForm,
  ProFormDateTimePicker,
  ProFormSelect,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, message } from 'antd';
import React from 'react';
export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.DeviceRelation>;

export type UpdateFormProps = {
  updateModalOpen: boolean;
  handleModal: () => void;
  values: Partial<API.DeviceRelation>;
  reload: any;
};
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const intl = useIntl();
  const [form] = Form.useForm<API.DeviceRelation>();

  return (
    <ModalForm<API.DeviceRelation>
      title={intl.formatMessage({
        id: 'common.modal.table.update.title',
        defaultMessage: '$$$',
      })}
      open={props.updateModalOpen}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => props.handleModal(),
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        putDeviceRelationUpdateDeviceRelation(values)
          .then(() => {
            message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
            props.reload();
          })
          .catch(() => {
            message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
          });

        props.handleModal();
        return true;
      }}
    >
      <ProForm.Group>
        <ProFormText
          width="md"
          name="id"
          label="id"
          disabled={true}
          initialValue={props.values.id}
        />
        <ProFormSelect
          width="md"
          name="deviceParentFkId"
          label={
            <FormattedMessage
              id="device.device_relation.table.list.deviceParentFkId"
              defaultMessage="$$$"
            />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_select',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'device.device_relation.table.list.deviceParentFkId',
            defaultMessage: '$$$',
          })}`}
          required={true}
          initialValue={props.values.deviceParentFkId}
          showSearch
          debounceTime={1000}
          request={async (keyWord) => {
            const resp = await postDeviceGetDeviceFkSelect({ keyword: keyWord?.keyWords || '' });
            return resp.data.list.map((v: any) => {
              return {
                label: v.name,
                value: v.id,
              };
            });
          }}
        />
        <ProFormSelect
          width="md"
          name="deviceSonFkId"
          label={
            <FormattedMessage
              id="device.device_relation.table.list.deviceSonFkId"
              defaultMessage="$$$"
            />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_select',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'device.device_relation.table.list.deviceSonFkId',
            defaultMessage: '$$$',
          })}`}
          required={true}
          initialValue={props.values.deviceSonFkId}
          showSearch
          debounceTime={1000}
          request={async (keyWord) => {
            const resp = await postDeviceGetDeviceFkSelect({ keyword: keyWord?.keyWords || '' });
            return resp.data.list.map((v: any) => {
              return {
                label: v.name,
                value: v.id,
              };
            });
          }}
        />
        <ProFormDateTimePicker
          width="md"
          name="createTime"
          label={
            <FormattedMessage
              id="device.device_relation.table.list.createTime"
              defaultMessage="$$$"
            />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'device.device_relation.table.list.createTime',
            defaultMessage: '$$$',
          })}`}
          required={false}
          initialValue={props.values.createTime}
          disabled={true}
        />
        <ProFormDateTimePicker
          width="md"
          name="updateTime"
          label={
            <FormattedMessage
              id="device.device_relation.table.list.updateTime"
              defaultMessage="$$$"
            />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'device.device_relation.table.list.updateTime',
            defaultMessage: '$$$',
          })}`}
          required={false}
          initialValue={props.values.updateTime}
          disabled={true}
        />
      </ProForm.Group>
    </ModalForm>
  );
};
export default UpdateForm;
