FEV2 / fw-cms

import React from 'react';
import { Button, Card, message, Upload } from 'antd';
import CardDetailPreview from '../CardDetailPreview';
import { UploadOutlined } from '@ant-design/icons';
import { UploadProps, UploadFile, UploadChangeParam } from 'antd/lib/upload/interface';
import detailS from './index.less';
import COS from "@/utils/COS";
import { setFormData, stateTransforToStore, beforeUpload } from '@/pages/mkt/ActivityCreate/BasicInformation/entity';
import ImgCropItem from '@/components/ImgCrop';
import { getFidFile } from "@/utils";
// import { useStore } from '../../index';
import Form, { FormInstance } from 'antd/lib/form';

interface Props {
  form: FormInstance,
  readOnly: boolean,
  bizType?: number
}

const FormItem = Form.Item;

export default function Detail({ form, readOnly, bizType }: Props) {
  const uploadProps: UploadProps = {
    accept: "image/*",
    action: "/file/upload",
    // action: "/activity/util/file/uploadStatic",
    listType: "picture-card",
    showUploadList: { showPreviewIcon: true, showRemoveIcon: !readOnly },
    disabled: readOnly,
    // beforeUpload
  };
  const ImageUploadProps: UploadProps = {
    accept: "image/*",
    // action: "/file/upload",
    // action: "/activity/util/file/uploadStatic",
    listType: "picture-card",
    showUploadList: { showPreviewIcon: true, showRemoveIcon: !readOnly },
    customRequest: (data) => COS.cosUpload({ ...data, uploadPath: "/api/file/upload" }),
    disabled: readOnly,
    onPreview: (file) => onPreView(file, false),
    beforeUpload
  };

  const onPreView = (file: UploadFile, isFid?: boolean) => {
    getFidFile(file.response.data, isFid);
  };

  const videoProps: UploadProps = {
    accept: "video/mp4",
    listType: "text",
    disabled: readOnly,
    customRequest: (data) => COS.cosUpload({ ...data, uploadPath: "/api/file/upload" }),
    onPreview: (file) => onPreView(file, false),
    beforeUpload(file: any, fileList: any): boolean {
      if (file.type !== "video/mp4") {
        message.error("仅限传入 MP4 文件！");
        return false;
      }
      if (file.size / 1024 / 1024 > 50) {
        message.error("视频上传大小不能超过50MB！");
        return false;
      }
      return true;
    },
  };

  function valueFromEvent(e: any) {
    if (Array.isArray(e)) {
      return e;
    }
    const { status, response } = e.file;
    if (!e.file.status) {
      return [];
    }
    if (e.file.status == "error") {
      message.error("图片上传出错，请重新上传");
      return [];
    }
    if (status == "removed" && response) {
      COS.cosDelete({ filePath: response.data });
    }
    return e?.fileList;
  }

  const uploadButton = (
    <div>
      <Button icon={<UploadOutlined />}>上传</Button>
    </div>
  );
  return (
    <Card
      type="inner"
      title="活动图片"
      className={detailS.detailBox}
    >
      <div className={detailS.left}>
        <ImgCropItem
          // multiple
          required
          fidFile
          label="活动轮播图"
          name="bannerId"
          labelCol={{ span: 4 }}
          form={form}
          extra={
            <div style={{ fontSize: 10 }}>
              <p style={{ margin: 0 }}>(售前)建议宽高尺寸: 750*750;</p>
              <p style={{ margin: 0 }}>(售后)建议宽高尺寸: 670*240</p>
            </div>
          }
          aspectXY={bizType == 2 ? { width: 670, height: 240 } : { width: 750, height: 750 }}
          // setFormStorage={setFormStorage}
          {...uploadProps}
        >
          {!readOnly ? uploadButton : null}
        </ImgCropItem>

        <FormItem
          name="bgId"
          required
          label="活动主图"
          labelCol={{ span: 4 }}
          extra={
            <div style={{ fontSize: 10 }}>
              <div>活动概括，用于活动列表展示，(建议尺寸 750*520)</div>
              <div>图片格式要求png、jpg、gif、jpeg，大小限制 5 MB 以内</div>
            </div>
          }
          valuePropName="fileList"
          getValueFromEvent={valueFromEvent}
        >
          <Upload
            maxCount={1}
            {...ImageUploadProps}
          >
            {!readOnly ? uploadButton : null}
          </Upload>
        </FormItem>

        <FormItem
          labelCol={{ span: 4 }}
          name="videoId"
          label="活动视频"
          extra="视频格式要求 MP4，大小限制 50 MB 以内"
          valuePropName="fileList"
          getValueFromEvent={(e) => {
            if (Array.isArray(e)) {
              return e;
            }
            const { status, response } = e.file;
            if (!status) {
              return [];
            }
            if (status == "error") {
              message.error("视频上传出错，请重新上传");
              return [];
            }
            if (status == "removed" && response) {
              COS.cosDelete({ filePath: response.data });
            }
            return e && e.fileList;
          }}
        >
          <Upload maxCount={1} multiple {...videoProps}>
            {uploadButton}
          </Upload>
        </FormItem>

        <FormItem
          name="content"
          label="图文详情"
          required
          labelCol={{ span: 4 }}
          extra={
            <div style={{ fontSize: 10 }}>
              <div>图文详情一般上传活动规则，时间，流程等内容，可以多张(建议尺寸 750*任意高)</div>
              <div>图片格式要求png、jpg、gif、jpeg，大小限制 5 MB 以内</div>
            </div>
          }
          valuePropName="fileList"
          getValueFromEvent={valueFromEvent}
        >
          <Upload
            multiple
            maxCount={10}
            {...ImageUploadProps}
          >
            {!readOnly ? uploadButton : null}
          </Upload>
        </FormItem>

        <FormItem
          name="shareId"
          label="分享图"
          required
          labelCol={{ span: 4 }}
          extra={
            <>
              <span style={{ fontSize: 10 }}>建议尺寸 750*1206</span>
            </>
          }
          valuePropName="fileList"
          getValueFromEvent={valueFromEvent}
        >
          <Upload
            // accept="image/*"
            // listType="picture"
            // action="/api/file/upload"
            // beforeUpload={beforeUpload}
            // onPreview={(file: UploadFile) => onPreView(file, true)}
            maxCount={1}
            {...ImageUploadProps}
          >
            {!readOnly ? uploadButton : null}
          </Upload>
        </FormItem>
      </div>
      <div className={detailS.right}>
        <CardDetailPreview form={form} />
      </div>
    </Card>
  );
}