FEV2 / fw-cms

import React, { useState, useEffect } from "react";
import {
  Table,
  Form,
  Button,
  Modal,
  Input,
  InputNumber,
  Space,
  message,
  Card,
  Popconfirm,
} from "antd";
import UpsertCoupon from "@/pages/coupon/CouponConfig";

const { Column } = Table;
interface Props {
  //按概率/固定奖项人数
  awardWay?: number;
  mulLottery?: boolean; //是否多轮抽奖
  onChange?: Function;
  value?: any[];
  remove?: Function;
  name?: number;
  disabled?: boolean;
}
interface Coupon {
  visible: boolean;
  index?: number;
  itemIndex?: number;
  confNo?: string;
  giftItemId?: number;
}

export default function Coupons({
  awardWay,
  mulLottery,
  value,
  onChange,
  remove,
  name,
  disabled
}: Props) {
  const [form] = Form.useForm();
  // 保存表格中的数据
  const [savaList, setSaveList] = useState<any[]>([]);
  /** 是否点击过无奖占位 */
  const [noReward, setNoRewad] = useState(false);
  /** 无奖占位按钮能否点击 */
  const [noRewardDisable, setNoRewadDisable] = useState(false);
  //保存索引
  const [itemIndex, setItemIndex] = useState<number>();
  //奖项名称Modal显示
  const [visible, setVisible] = useState(false);
  //优惠券Modal
  const [coupon, setCoupon] = useState<Coupon>({
    visible: false,
    index: undefined,
    confNo: undefined,
  });
  // 保存当前选中的奖项
  const [currentItem, SetCurrentItem] = useState({
    awardName: undefined,
    winningNum: undefined,
  });
  const pattern1 = /^([1-9]\d?|100)$/; //(0,100]之间百分数
  const pattern2 = /^\+?[1-9]\d*$/; // 大于0的整数

  useEffect(() => {
    if (visible && currentItem.awardName) {
      //编辑
      form.setFieldsValue({
        ...currentItem,
      });
    }
  }, [visible, currentItem]);

  useEffect(() => {
    if (value && value.length) {
      setSaveList([...value]);
    }
  }, [value]);

  return (
    <>
      <Card
        style={{ display: "block" }}
      >
        <Table
          dataSource={value}
          rowKey={(record) => record.awardName}
          bordered
        >
          <Column
            title="奖项名称"
            dataIndex="awardName"
            key="awardName"
            width="4%"
            render={(text, record: any, index) => {
              if (text === "谢谢惠顾") {
                return <span>{text}</span>;
              } else {
                return (
                  <Button
                    type="link"
                  // onClick={changeEnable ? () => {
                  //   // setVisible(true);
                  //   setNoRewad(false);
                  //   SetCurrentItem(record);
                  //   setItemIndex(index);
                  //   setVisible(true);
                  // } : undefined}
                  >
                    {text || "--"}
                  </Button>
                );
              }
            }}
          />
          <Column
            title={awardWay === 1 ? "中奖概率" : "中奖名额"}
            dataIndex="winningNum"
            width="4%"
            render={(text) => (awardWay === 1 ? `${text}%` : text)}
          />

          <Column
            title="奖品"
            dataIndex="giftItems"
            key="prize"
            width="10%"
            render={(
              text: ExternalPromotion.giftItems[],
              record,
              index: number
            ) => text &&
            text.length > 0 &&
              text.map((item, itemIndex: number) => (
                <div key={item.couponCode}>
                  <Space key={item.couponCode}>
                    <Button
                      type="link"
                      style={{ padding: 0 }}
                      onClick={() => {
                        setCoupon({
                          ...coupon,
                          visible: true,
                          confNo: item.couponCode,
                          index,
                          itemIndex,
                        });
                      }}
                    >
                      <span style={{ whiteSpace: 'pre-wrap' }}>{itemIndex + 1}.{item.aliasName}</span>
                    </Button>
                  </Space>
                </div>
              ))}
          />
        </Table>
      </Card>

      <Modal
        title={`${currentItem.awardName ? "编辑" : "新增"}奖品`}
        visible={visible}
        afterClose={() => {
          form.resetFields();
          SetCurrentItem({});
        }}
        // onOk={_onOk}
        onCancel={() => {
          setVisible(false);
          form.resetFields();
          SetCurrentItem({});
        }}
      >
        <Form
          form={form}
          name="basic"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 16 }}
          // onFinish={_onOk}
          autoComplete="off"
        // initialValues={{
        //   awardName: (awardWay === 2 && noReward) ? "谢谢惠顾" : "",
        // }}
        >
          <Form.Item
            label="奖项名称："
            name="awardName"
            rules={[{ required: true, message: "请输入奖项名称" }]}
          // initialValue={(awardWay === 2 && noReward) ? "谢谢惠顾" : ""}
          >
            <Input
              // disabled={(awardWay === 2 && noReward) || !!currentItem.awardName}
              disabled={currentItem.awardName === "谢谢惠顾"}
              style={{ marginLeft: 40 }}
            />
          </Form.Item>
          <Form.Item
            label={
              // !mulLottery
              //   ? "中奖概率(%)":
              awardWay === 1
                ? "中奖概率(%)"
                : "中奖名额"
            }
            name="winningNum"
          >
            <InputNumber disabled={!!currentItem.awardName && disabled} style={{ width: "100%", marginLeft: 40 }} />
          </Form.Item>
        </Form>
      </Modal>

      {/* 优惠券配置 */}
      <UpsertCoupon
        visible={coupon.visible}
        disabled
        onCancel={() => setCoupon({ ...coupon, visible: false, confNo: undefined })}
        // onSave={_onSava}
        remark="市场活动"
        confNo={coupon.confNo}
      // carSelectApi={bizType == 1 ? getACarList : undefined}
      // changeEditKeys={couponStatus ? ["aliasName", "schemeList"] : undefined}
      // getCouponDetailsApi={couponStatus ? (v: string) => getCouponChangeDetails({ activityNo, confNo: v }) : undefined}
      // saveChangeCouponApi={couponStatus ? (values: any) => saveChangeCoupon({ ...values, activityNo }) : undefined}
      />
    </>
  );
}