import { postInterfaces, postTestDevice } from '@/services/alarm/Interfaces';
import { ModalForm, ProForm, ProFormFieldSet, ProFormSelect, ProFormSwitch, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Image, Form, message } from 'antd';
import React, { useState } from 'react';
import {
  proFormSmallItemStyleProps,
  proFormSmallModelWidth,
} from '../../../../../config/defaultForm';
import moment from 'moment';
import styles from './CaptureForm.less'
export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.UpdateInterfacesParams>;

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

  return (
    <ModalForm<any>
      width={proFormSmallModelWidth}
      title={intl.formatMessage({
        id: 'device.interface_manage.table.list.capture',
        defaultMessage: `最近拍摄`,
      })}
      open={props.captureModalOpen}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => {
          props.handleModal()
        },
        // okText: intl.formatMessage({ id: 'common.okText', defaultMessage: '确认' }),
        // cancelText: intl.formatMessage({ id: 'common.cancelText', defaultMessage: '取消' }),
      }}
      submitTimeout={2000}
      submitter={false}
      onFinish={async (values) => {
        console.log(values);
        values.id = props.values.id
        postInterfaces(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;
      }}
    >
      <div className={styles.captureImgBox}>
            <div className={styles.captureImgDescribe}>来源: <span>{props.values.device_name}</span></div>
            <div className={styles.captureImgDescribe}>触发时间: <span>{moment(props.values.appear_time).format('YYYY-MM-DD hh:mm:ss')}</span></div>
            <div className={styles.captureImgContent}>
                <Image
                  width={100}
                  preview={false}
                  src={props.values.picture_path}
                />
            </div>
      </div>
    </ModalForm>
  );
};
export default CaptureForm;
