FEV2 / fw-cms

  import React, { useState, useEffect } from 'react';

  import { Button, Spin, Input, message, Divider, Radio, Form, Select, DatePicker, Upload } from 'antd';

  import { formItemLayout, base, formRules, setFormData, stateTransforToStore } from './entity';

  import BraftEditor, { EditorState } from 'braft-editor';

  import * as IF from './interface';

  import { UploadOutlined } from '@ant-design/icons';
  import COS from "@/utils/COS";

  import ImageUploaderInfo from './components/ImageUploader';
  import AsksCard from './components/AsksCard';

  // @ts-ignore
  import { ContentUtils } from 'braft-utils';

  import PositionSelector from "@/components/PositionSelector";

  import moment from 'moment';

  import useInitail from '@/hooks/useInitail';

  import { useStore } from '@/pages/mkt/ActivityCreate/index';

  import * as api from './api';

  interface Props {

    onNext: Function;

  }

  
  const { RangePicker } = DatePicker;
  const FormItem = Form.Item;
  const TextArea = Input.TextArea;
  const RadioGroup = Radio.Group;

  
  interface InfoParams {
    errMsg?: string;
    loading?: boolean;
  }

  function Index({ onNext }: Props) {

    const { baseInfo, setBaseInfo } = useStore();

    const [form] = Form.useForm();
    const [readOnly, setReadOnly] = useState<boolean>(false);

    const [Infos, setnfos] = useState<InfoParams>({ loading: false });

    const [saveLoading, setSaveLoading] = useState<boolean>(false);

    const [editor, setEditor] = useState(BraftEditor.createEditorState(''));
    const [fileList, setFileList] = useState([]);

    const [activityType, setActivityType] = useState<number>(0);

    const { data: ActivityTypeList, errMsg: TypeErr } = useInitail(api.getActivityType, [], {});

    const { changeEnable, activityNo, bizType } = baseInfo;

    useEffect(() => {

      activityNo && fetchDetail(activityNo);
    }, [activityNo]);

    function fetchDetail(no: string) {
      setnfos({ loading: true });

      // const detailApi = changeEnable?
      api.getBasicInfoApi({ activityNo: no, change: changeEnable }).then(res => {

        const { data } = res;
        let _data = { ...data };

        setBaseInfo({ ...baseInfo, bizType: _data.bizType, addressType: _data.addressType, activityType: _data.activityType });

        if (![1, 3].includes(_data.status || 0)) {
          setReadOnly(true);
        }

        setEditor(BraftEditor.createEditorState(_data.remark));

        form.setFieldsValue(setFormData(_data));
        setnfos({ loading: false });
      }).catch(e => {
        setnfos({ loading: false, errMsg: e.message });
        message.error(e.message);
      });
    }

  
    function submitHandle() {
      form.validateFields().then(values => {

        // setSaveLoading(true);

        const content = editor.toHTML();

        const _va = stateTransforToStore(values);
        const params = {

          activityNo: baseInfo.activityNo,

          remark: content === '<p></p>' ? '' : content,

          ..._va,
        };

        const changePramas = {
          activityNo: baseInfo.activityNo,
        };
  
        if (changeEnable) {

          // for (let key in params) {
          //   if (key === 'asks' && (params[key] || []).length != (data.asks || []).length) {
          //     changePramas[key] = params[key];
          //   } else if (params[key] != data[key]) {
          //     changePramas[key] = params[key];
          //   }
          // }
            params.bizType = undefined;

            params.activityType = undefined;
            params.address = undefined;
            params.addressType = undefined;
            params.startTime = undefined;
            params.couponValidTime = undefined;

        }

        const currentApi = changeEnable ? api.changeBasicInfoApi : api.saveBasicInfoApi;

        currentApi(params).then((res) => {

          message.success('保存成功');

          if (changeEnable) {
            setSaveLoading(false);
            return;
          }

          setBaseInfo({
            ...baseInfo,
            bizType: params.bizType,
            activityNo: res.data,
            addressType: values.addressType,
            activityType: values.activityType
          });

          onNext && onNext();

          setSaveLoading(false);
        }).catch(e => {
          setSaveLoading(false);
          message.error(e.message);
        });
      });
    }

  
    /** 编辑器 */
    function uplodaChange(info: any) {
      let _editor = editor;
      let _fileList = [];
      if (Array.isArray(info)) {
        _fileList = info;
      } else {
        _fileList = info.fileList;
      }
      if (_fileList.length > 0) {
        _fileList = _fileList.slice(-1);
      }
      if (_fileList[0].status === 'done') {
        _editor = ContentUtils.insertMedias(_editor, [
          {
            type: 'IMAGE',
            url: _fileList[0].response.data
          }
        ]);
      }
      setEditor(_editor);
      setFileList(_fileList);
    }

    return (
      <div>

        <Spin spinning={Infos.loading}>
          {Infos.errMsg ? (
            <div style={{ textAlign: "center", color: "red" }}>{Infos.errMsg || "加载错误!"}</div>
          ) : (
            <Form form={form} scrollToFirstError onFinish={submitHandle} {...formItemLayout}>
              <Form.Item label="业态类型" name="bizType" {...formRules.bizType}>

                <Radio.Group disabled={readOnly} onChange={(e) => setBaseInfo({ ...baseInfo, bizType: e.target.value })}>

                  <Radio value={1}>售前活动 </Radio>
                  <Radio value={2}>售后活动</Radio>
                </Radio.Group>
              </Form.Item>
              <FormItem name="activityType" label="活动类型" {...formRules.activityType}>
                <Select
                  showSearch
                  disabled={readOnly}
                  notFoundContent={TypeErr || ''}
                  optionFilterProp="children"
                  placeholder="请选择活动类型"
                  onChange={(v) => {
                    setActivityType(v);
                    [5, 6, 9].includes(v) && form.setFieldsValue({ addressType: 2 });
                  }}
                >
                  {ActivityTypeList.map(v => (
                    <Select.Option value={v.code} key={v.code}>{v.name}</Select.Option>
                  ))}
                </Select>
              </FormItem>
              <FormItem name="activityName" label="活动名称" {...formRules.activityName}>

                <Input placeholder="输入活动名称" disabled={readOnly && !changeEnable} />

              </FormItem>
              <FormItem label="活动描述">
                <BraftEditor
                  placeholder="请输入内容"
                  value={editor}
                  onChange={(editorState: EditorState) => setEditor(editorState)}
                  readOnly={readOnly && !changeEnable}
                  extendControls={[
                    {
                      key: 'antd-uploader',
                      type: 'component',
                      component: (
                        <Upload
                          accept="image/*"
                          showUploadList={false}
                          // action="api/activity/util/file/uploadStatic"
                          customRequest={(data) => COS.cosUpload({ ...data, uploadPath: "/api/file/upload" })}
                          onChange={uplodaChange}
                          fileList={fileList}
                        >
                          <button type="button" className="control-item button upload-button" data-title="插入图片">
                            <UploadOutlined />
                          </button>
                        </Upload>
                      )
                    }
                  ]}
                />
              </FormItem>
              <FormItem label="活动时间" name="startTime" {...formRules.startTime}>
                <RangePicker

                  disabled={[readOnly, readOnly && !changeEnable]}

                  allowClear
                  style={{ width: '100%' }}
                  showTime={{
                    hideDisabledOptions: true,
                    defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
                  }}
                  disabledDate={(current) => current && current < moment().subtract(1, "days")}
                  format="YYYY-MM-DD HH:mm:ss"
                />
              </FormItem>
              <FormItem label="优惠券有效时间" name="couponValidTime" {...formRules.couponValidTime}>
                <RangePicker

                  disabled={[readOnly, readOnly && !changeEnable]}

                  allowClear
                  style={{ width: '100%' }}
                  showTime={{
                    hideDisabledOptions: true,
                    defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
                  }}
                  format="YYYY-MM-DD HH:mm:ss"
                />
              </FormItem>
              <FormItem label="活动地点类型" name="addressType" {...formRules.addressType}>
                <RadioGroup disabled={readOnly}>
                  {![5, 6, 9].includes(activityType) && <Radio value={1}>按门店地址</Radio>}
                  <Radio value={2}>统一地址</Radio>
                </RadioGroup>
              </FormItem>
              <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.addressType != currentValues.addressType}>
                {({ getFieldValue }): any => {
                  return getFieldValue("addressType") === 2 ? (
                    <Form.Item label="地址" name="address" rules={[{ required: true, message: '请选择地址' }]}>
                      <PositionSelector disabled={readOnly} />
                    </Form.Item>
                  ) : null;

                }}

              </Form.Item>
              <Divider orientation="left">上传图片</Divider>
              <FormItem wrapperCol={{ span: 24 }} labelCol={{ span: 0 }}>

                <ImageUploaderInfo form={form} readOnly={readOnly && !changeEnable} bizType={bizType} />

              </FormItem>
              <FormItem name="asks" wrapperCol={{ span: 24 }} labelCol={{ span: 0 }}>
                <AsksCard readOnly={readOnly && !changeEnable} />
              </FormItem>
              <div style={{ width: "100%", textAlign: 'center' }}>
                {readOnly && !changeEnable ? (<Button type="primary" style={{ marginBottom: 10 }} onClick={() => history.back()}>返回列表</Button>)
                  : (
                    <Button type="primary" style={{ marginBottom: 10 }} onClick={() => form.submit()} loading={saveLoading}>保存基本信息 (下一步)</Button>
                  )}
              </div>
            </Form>
          )}
        </Spin>

      </div>
    );
  }

  export default Index;