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;