FEV2 / fw-cms

import React, { useState, useEffect } from "react";
import {
  Table,
  Form,
  Button,
  Modal,
  Input,
  InputNumber,
  Space,
  message,
  Card,
  Popconfirm,
} from "antd";
import { PlusOutlined, DeleteOutlined, SwapOutlined } from "@ant-design/icons";
import UpsertCoupon from "@/pages/coupon/CouponConfig";
import {
  deleteConfigList,
  batchDeleteCoupon,
} from "@/pages/coupon/CouponConfig/api"; //删除优惠券配置
import { getCouponChangeDetails, saveChangeCoupon, saveChangeAwardName } from '../../api';
import { useStore } from "@/pages/mkt/ActivityCreate/index";

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 { readOnly, baseInfo, getACarList } = useStore();
  const { changeEnable, activityNo, bizType } = baseInfo;
  // 保存表格中的数据
  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 couponStatus = changeEnable && !coupon.giftItemId && coupon.confNo;
  // 保存当前选中的奖项
  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]);

  /**
   * 保存奖项
   */
  const _onOk = () => {
    form
      .validateFields()
      .then(async (fields) => {
        /**
         * 新增时，判断奖项名称是否重复；
         * 编辑时，直接将中奖名额/中奖概率进行替换
         */
        const pa = {
          ...fields,
          parcelType: 2,
          giftItems: [],
        };

        if (!currentItem.awardName) {
          //新增
          let res = savaList.some(
            (item) => item.awardName === fields.awardName
          );
          if (res) {
            //新增时，奖项名称重复
            message.error("奖项名称不能重复");
            return;
          } else {
            if (noReward) {
              pa.parcelType = 99;
            }
            savaList.push(pa);
          }
        } else if (itemIndex !== undefined) {
          /**变更奖项名称 */
          if (changeEnable) {
            const changePa = {
              giftId: savaList[itemIndex].giftId,
              awardName: fields.awardName,
              activityNo
            };
            try {
              await saveChangeAwardName(changePa);
              message.success("变更成功");
            } catch (err: any) {
              message.error(err.message);
            }
          }
          savaList[itemIndex].awardName = fields.awardName;
          savaList[itemIndex].winningNum = fields.winningNum;
        }
        onChange && onChange([...savaList]);
        if (noReward) {
          //点击的无奖占位按钮保存数据
          setNoRewadDisable(true);
          setNoRewad(false);
        }

        setVisible(false);
        form.resetFields();
        SetCurrentItem({ awardName: undefined, winningNum: undefined });
      })
      .catch((error) => console.log(error.message));
  };

  /**优惠券保存  ==>确定编辑还是新增 */
  const _onSava = (params?: any) => {
    const pa: ExternalPromotion.giftItems = {
      ...params,
      relySchemeType: params.data && params.data.relySchemeList.length
        ? params.data.relySchemeList[0]
        : 0,
      couponCode: params.confNo,
      giftType: params.classifyCode,
      giftName: params.classifyName,
      discountsAmount: params.amount,
    };
    const _savaList = savaList;
    if (coupon.confNo) {
      //编辑
      if (!(coupon.index === undefined || coupon.itemIndex === undefined)) {
        _savaList[coupon.index].giftItems[coupon.itemIndex] = pa;
      }
    } else {
      if (coupon.index !== undefined) {
        _savaList[coupon.index].giftItems.push(pa);
        setSaveList([..._savaList]);
      }
      onChange && onChange([..._savaList]);
    }

    setCoupon({
      ...coupon,
      visible: false,
      confNo: undefined,
      index: undefined,
      itemIndex: undefined,
    });
  };

  // 删除优惠券
  async function _onDelete(index: number, itemIndex: number) {
    try {
      savaList[index].giftItems.splice(itemIndex, 1);
      onChange && onChange(savaList);
      message.success("删除成功");
    } catch (err) {
      message.error(err.message);
    }
  }

  async function _onDeleteTableRow(
    record: ExternalPromotion.Gifts,
    index: number
  ) {
    //添加了优惠券
    if (record.giftItems && record.giftItems.length > 0) {
      // 本地删除优惠券
      try {
        const _savaList = savaList.filter(
          (item) => item.awardName !== record.awardName
        );
        onChange && onChange(_savaList);
        setSaveList(_savaList);
        return message.success("删除优惠券成功");
      } catch (e) {
        return message.error(e.message);
      }
    }
    // 没有添加优惠券，不要掉删除接口
    const _savaList = savaList.filter(
      (item) => item.awardName !== record.awardName
    );
    // 删除谢谢惠顾，无奖占位按钮可以点击
    if (record.awardName === "谢谢惠顾") {
      setNoRewadDisable(false);
      setNoRewad(false);
    }
    onChange && onChange(_savaList);
    setSaveList(_savaList);
  }
  return (
    <>
      {(!mulLottery || (mulLottery && awardWay)) && (
        <Card
          style={{ display: "block" }}
          title=""
          extra={
            !disabled && (
              <div
                style={{
                  flex: 1,
                  display: "flex",
                  justifyContent: "space-between",
                  flexDirection: "row",
                }}
              >
                {mulLottery && (
                  <Button
                    type="link"
                    danger
                    icon={<DeleteOutlined />}
                    onClick={() => {
                      remove && remove(name);
                    }}
                  // disabled={readOnly}
                  />
                )}

                {awardWay === 2 && (
                  <Button
                    type="link"
                    icon={<PlusOutlined />}
                    onClick={() => {
                      setNoRewad(true);
                      setVisible(true);
                      form.setFieldsValue({
                        awardName: "谢谢惠顾",
                      });
                    }}
                    disabled={disabled || noRewardDisable}
                  >
                    无奖占位
                  </Button>
                )}

                <Button
                  type="link"
                  icon={<PlusOutlined />}
                  onClick={() => {
                    setVisible(true);
                    setNoRewad(false);
                  }}
                // disabled={readOnly}
                >
                  新增
                </Button>
              </div>
            )
          }
        >
          <Table
            dataSource={value}
            rowKey={(record) => record.awardName}
            bordered
          >
            <Column
              title="奖项名称"
              dataIndex="awardName"
              key="awardName"
              width="4%"
              render={(text, record: any, index) => {
                if (text === "谢谢惠顾" || !changeEnable) {
                  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>
                      {((item.aliasName && !readOnly) || changeEnable) && (
                        <Popconfirm
                          title="删除将丢失优惠券信息，确定删除？"
                          okText="确定"
                          cancelText="取消"
                          onConfirm={() => _onDelete(index, itemIndex)}
                        >
                          <Button type="link" danger disabled={readOnly && !changeEnable}>
                            删除
                          </Button>
                        </Popconfirm>
                      )}
                      {/* {item.aliasName && changeEnable && item.giftItemId && (
                        <Popconfirm
                          title="是否确定替换该优惠券，已发放优惠券不受影响"
                          okText="确定"
                          cancelText="取消"
                          onConfirm={() => {
                            setCoupon({
                              ...coupon,
                              giftItemId: item.giftItemId,
                              visible: true,
                              confNo: undefined,
                              index,
                              itemIndex,
                            });
                          }}
                        >
                          <Button style={{ margin: 0, fontSize: 12 }} type="link" danger>
                            替换后续发放优惠券
                          </Button>
                        </Popconfirm>
                      )} */}
                    </Space>
                  </div>
                ))}
            />
            <Column
              title="操作"
              width="4%"
              render={(_, record: any, index: number) => (
                <Space>
                  {!record.awardName.includes("谢谢惠顾") && (
                    <Button
                      disabled={disabled && !changeEnable}
                      hidden={disabled && !changeEnable}
                      style={{ padding: 0 }}
                      type="link"
                      onClick={() => setCoupon({
                        ...coupon,
                        visible: true,
                        confNo: undefined,
                        index,
                      })}
                    >
                      添加奖品
                    </Button>
                  )}
                  <Button
                    type="link"
                    disabled={disabled}
                    hidden={disabled}
                    style={{ padding: 0 }}
                    onClick={() => {
                      SetCurrentItem(record);
                      setItemIndex(index);
                      setVisible(true);
                    }}
                  >
                    编辑
                  </Button>
                  <Popconfirm
                    title="确定删除？"
                    okText="确定"
                    cancelText="取消"
                    onConfirm={() => _onDeleteTableRow(record, index)}
                  >
                    <Button style={{ padding: 0 }} hidden={disabled} danger type="link" disabled={disabled}>
                      删除
                    </Button>
                  </Popconfirm>
                </Space>
              )}
            />
          </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"
            rules={[
              {
                required: true,
                message: `请输入${!mulLottery
                  ? "中奖概率"
                  : awardWay === 1
                    ? "中奖概率"
                    : "中奖名额"
                  }`,
              },
              {
                pattern:
                  !mulLottery || (mulLottery && awardWay === 1)
                    ? pattern1
                    : pattern2,
                message:
                  !mulLottery || (mulLottery && awardWay === 1)
                    ? "输入大于0小于等于100的整数"
                    : "请输入大于0的整数",
              },
            ]}
          >
            <InputNumber disabled={!!currentItem.awardName && disabled} style={{ width: "100%", marginLeft: 40 }} />
          </Form.Item>
        </Form>
      </Modal>

      {/* 优惠券配置 */}
      <UpsertCoupon
        visible={coupon.visible}
        disabled={coupon.giftItemId ? false : disabled && !changeEnable}
        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}
      />
    </>
  );
}