redact.tsx

import React, { useEffect, useState } from 'react';
import { useParams, useRequest } from 'umi';
import _ from 'lodash';
import { Button, Card, Col, Form, Input, message, Row, Spin } from 'antd';
import { UnderLine } from '@/components/Customized/AutoTitle';
import { UploadForm } from '@/components/Customized/Description';
import AssociatedInfo from '@/pages/Ops/Device/AssociatedInfo';
import BasicInfo from './components/BasicInfo';
import Verification from './components/Verification';
import {
  fetDeviceDetail,
  fetchDeviceSave,
  fetchSpecialSave,
  fetSpecialDetail,
  fetchCameraInfo,
  fetchCameraSave,
} from '@/services/device';
import type { DevicePatchProps } from '@/services/device';
import style from './index.less';

type RedactParams = {
  accountType: string;
  id?: string;
};

const { TextArea } = Input;

const Redact: React.FC = () => {
  const [form] = Form.useForm();
  const { accountType, id }: RedactParams = useParams();

  const type = _.isUndefined(id) ? 'add' : 'edit';

  const [showNext, setShowNext] = useState<boolean>(false);

  const setForm = (res: any) => {
    res.imgUrls =
      res?.imgUrls?.map((item: any, index: number) => ({
        uid: index,
        url: item || '',
      })) || [];
    res.annexList =
      res?.annexList?.map((item: any, index: number) => ({
        uid: index,
        name: item.name,
        status: 'done',
        url: item.annexUrl,
        fileId: item?.fileId,
      })) || [];
    res.addressLocation = {
      latitude: res.latitude,
      longitude: res.longitude,
    };
    res.cycleGroup = {
      cycleType: res.cycleType,
      executiveDate: res.executiveDate,
    };
    setShowNext(res.enableExecutive);
    form.setFieldsValue(res);
  };

  const deviceDetailData = useRequest(fetDeviceDetail, {
    manual: true,
    onSuccess: (res: any) => {
      setForm(res);
    },
  });
  const specialDetailData = useRequest(fetSpecialDetail, {
    manual: true,
    onSuccess: (res: any) => {
      res.outPrincipalId = res.principalId;
      setForm({ ...res, ...res.device });
    },
  });
  const cameraDetailData = useRequest(fetchCameraInfo, {
    manual: true,
    onSuccess: (res: any) => {
      res.outPrincipalId = res.principalId;
      setForm({ ...res, ...res.device });
    },
  });

  const addCallback = () => {
    message.success(id ? '编辑成功' : '添加成功', 1, () => {
      closeCurrentPage('/ops/book/account');
    });
  };

  const deviceSave = useRequest(fetchDeviceSave, {
    manual: true,
    onSuccess: () => {
      addCallback();
    },
  });

  const specialSave = useRequest(fetchSpecialSave, {
    manual: true,
    onSuccess: () => {
      addCallback();
    },
  });

  const cameraSave = useRequest(fetchCameraSave, {
    manual: true,
    onSuccess: () => {
      addCallback();
    },
  });

  const goBack = () => {
    closeCurrentPage('/ops/book/account');
  };
  const handleSubmit = (values: DevicePatchProps) => {
    const payload: any = { ...values, id, type: accountType };
    payload.longitude = values?.addressLocation?.longitude || null;
    payload.latitude = values?.addressLocation?.latitude || null;
    payload.address = values?.addressLocation?.address;
    payload.imgUrls =
      payload?.imgUrls?.length > 0
        ? payload.imgUrls.map((item: any) => item?.response?.data?.url || item?.url)
        : [];
    payload.annexList =
      payload?.annexList?.length > 0
        ? payload.annexList.map((item: any) => ({
            annexUrl: item?.response?.data?.url || item?.url,
            name: item.name,
            fileId: item?.fileId,
          }))
        : [];
    const extra = {
      cycleType: values?.cycleGroup?.cycleType,
      executiveDate: values?.cycleGroup?.executiveDate,
      enableExecutive: values?.enableExecutive,
      principalId: values?.outPrincipalId,
      remindInDay: values?.remindInDay,
      channelNumber: values?.channelNumber,
      deviceSerial: values?.deviceSerial,
      deviceNumber: accountType === 'camera' ? values?.code : undefined,
      id: accountType === 'camera' ? id : undefined,
    };
    const preValues = _.omitBy(extra, _.isNil);
    const result = _.omit(payload, [
      'cycleGroup',
      'enableExecutive',
      'remindInDay',
      'outPrincipalId',
      'uniqueCode',
      'addressLocation',
      'channelNumber',
      'deviceSerial',
    ]);
    if (accountType === 'device') deviceSave.run(result);
    if (accountType === 'special') specialSave.run({ device: result, ...extra });
    if (accountType === 'camera') cameraSave.run({ device: result, ...preValues });
  };

  useEffect(() => {
    if (type === 'edit' && id) {
      if (accountType === 'device') deviceDetailData.run(id);
      if (accountType === 'special') specialDetailData.run(id);
      if (accountType === 'camera') cameraDetailData.run(id);
    }
  }, []);

  const loading =
    specialDetailData.loading ||
    deviceDetailData.loading ||
    deviceSave.loading ||
    specialSave.loading ||
    cameraSave.loading;

  return (
    <Card size="small">
      <Spin size="large" spinning={loading || false}>
        <Form form={form} onFinish={handleSubmit}>
          <BasicInfo accountType={accountType} />

          <Row style={{ padding: 0, marginTop: 25 }}>
            <Col span={8}>
              <UnderLine title="设备图片" />
              <UploadForm name="imgUrls" title="上传设备图" />
            </Col>
            <Col span={8} className={style.upload_card}>
              <UnderLine title="设备文件" />
              <UploadForm fileType="document" name="annexList" listType="text" title="上传文件" />
            </Col>
            <Col span={8}>
              <UnderLine title="描述" />
              <Form.Item name="description">
                <TextArea rows={4} showCount maxLength={200} />
              </Form.Item>
            </Col>
            {accountType === 'special' && (
              <Col span={24}>
                <Verification type="special" showNext={showNext} setShowNext={setShowNext} />
              </Col>
            )}
          </Row>
          <div style={{ margin: '32px 0', textAlign: 'right' }}>
            <Button style={{ width: 100, height: 30, marginRight: 20 }} onClick={goBack}>
              取消
            </Button>
            <Button style={{ width: 100, height: 30 }} type="primary" htmlType="submit">
              保存
            </Button>
          </div>
        </Form>
        {type === 'edit' && <AssociatedInfo deviceId={id} type="edit" />}
      </Spin>
    </Card>
  );
};

export default Redact;