FEV2 / fw-cms

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

  import { getCouponLog, setCouponDelay } from "../api";

  import useInitial from "@/hooks/useInitail";

  import {
    Modal,

    Table,

    Form,
    DatePicker,
    Button,
    message,
  } from "antd";

  import moment from 'moment';

  
  interface Props {

    couponLog: { visible: boolean; id: number; no: string, delay?: boolean };

    setCouponLog: Function;

    onChange: () => void;

  }

  // 日志类型
  enum LogTypeEnum {
    "创建",
    "待生效",
    "待使用",
    "已锁定",
    "已使用 ",
    "已过期",
    "已作废 ",
    "激活 ",
    "延期",
  }
  const { Column } = Table;

  function CouponLog({ couponLog, setCouponLog, onChange }: Props) {
    const [form] = Form.useForm();

    const { data, setParams, params, loading } = useInitial(
      getCouponLog,
      [],
      couponLog.id,
      !couponLog.id
    );

    useEffect(() => {
      if (couponLog.visible) {
        setParams(params, true);
      }
    }, [couponLog]);

  
    const [confirmLoading, setConfirmLoading] = useState(false);
  
    const onFinish = () => {
      console.log("提交延迟");
      form
        .validateFields()
        .then((field) => {
          setConfirmLoading(true);
          setCouponDelay({ ...field, id: couponLog.id })
            .then((res) => {
              message.success("优惠券延期成功", 2);
              setCouponLog({ ...couponLog, visible: false });

              onChange && onChange();

            })
            .catch((err) => message.error(err.message))
            .finally(() => setConfirmLoading(false));
        })
        .catch((error) => message.error(error.message, 2));
    };

    return (
      <Modal

        title={couponLog.delay ? "优惠券延期" : "优惠券记录"}

        visible={couponLog.visible}
        onCancel={() => setCouponLog({ visible: false })}

        afterClose={() => form.resetFields()}
        footer={
          !couponLog.delay
            ? null
            : [

              <Button
                key="submit"
                type="primary"
                loading={confirmLoading}
                onClick={() => form.submit()}
              >
                确定
              </Button>,
              <Button
                key="back"
                onClick={() => setCouponLog({ visible: false })}
              >
                取消
              </Button>,
            ]

        }

      >

        {couponLog.delay ? (
          <>
            <Form onFinish={onFinish} form={form}>

              <Form.Item label="优惠券编码">
                <div>{couponLog.no}</div>
              </Form.Item>

              <Form.Item
                label="延期时间"

                style={{ width: "100%" }}

                name="delayTime"
                rules={[{ required: true, message: "请选择延期时间!" }]}
              >

                <DatePicker showTime style={{ width: "100%" }} />

              </Form.Item>
            </Form>
          </>
        ) : (
          <Table
            dataSource={data}
            loading={loading}

            rowKey="id"

          >
            <Column
              title="日志类型"
              dataIndex="type"
              key="type"
              render={(text) => (
                <span>{text !== undefined ? LogTypeEnum[text] : "--"}</span>
              )}
            />
            <Column
              title="调用系统"
              dataIndex="gateName"
              key="gateName"
              render={(text) => <span>{text || "--"}</span>}
            />
            <Column

              title="创建时间"

              dataIndex="createTime"
              key="createTime"

              render={(text) => <span>{text ? moment(text).format("YYYY-MM-DD HH:mm") : "--"}</span>}

            />
            <Column
              title="备注"
              dataIndex="remark"
              key="type"
              render={(text) => <span>{text || "--"}</span>}
            />
          </Table>
        )}

      </Modal>
    );
  }
  
  export default CouponLog;