FEV2 / fw-cms

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

  import { Form, Input, InputNumber, Select, Divider, Radio, Row, Image, Modal, Button } from "antd";

  import { formItemLayout } from "../entity";
  import { FormInstance } from "antd/lib/form";
  import * as api from "../api";
  import WareLimitType from "./WareLimitType";
  import ShopLimit from "./ShopLimit";
  import useInitail from "@/hooks/useInitail";

  import { PaymentTypeEnum } from '@/pages/coupon/CashChange/api';

  import { RightOutlined } from '@ant-design/icons';

  import RenderSelectGoos from '@/pages/capital/ReceiveRules/subPages/GoodsDimension/components/RenderSelectGoos';

  const Option = Select.Option;

  interface Props {

    // brandId: number,
    info: MktConponSpace.ConListParams;
    form: FormInstance;
    readonly: boolean;

    getCouponType?: Function;

    confNo?: string;

    limitCoupon?: string[]; // 优惠券类型限制
    carSelectApi?: Function

    expires?: boolean;

    changeEditKeys?: string[];

  }
  

  export default function FullReduce({
    info,
    readonly,
    form,
    getCouponType,
    confNo,

    limitCoupon,

    carSelectApi,

    expires,
    changeEditKeys,

  }: Props) {
    const [classifyInfo, setClassifyInfo] = useState({ code: "" });

    const { data: ClassifyList } = useInitail(api.fetchClassifyList, [], {});

    const { data: cashChangeTypes } = useInitail(api.fetchExchangeList, [], {});

    const [visible, setVisible] = useState(false);

    useEffect(() => {
      setClassifyInfo({ code: info.classifyCode });

      const currentItem = ClassifyList.filter(
        (i) => i.code === info.classifyCode
      );
      if (currentItem.length) {
        getCouponType && getCouponType(currentItem[0].type);
      }

    }, [info.classifyCode]);
  

    function changeScene(v: any) {

      const currentItems = ClassifyList.filter((i) => i.code === v.value)[0];
      form.setFieldsValue({
        aliasName: currentItems.type == 1 ? currentItems.name : undefined,

        settlementType: 1,

        settlementCalType: v.value === "xjdhq" ? 1 : undefined,

      });

      getCouponType && getCouponType(currentItems.type);
      setClassifyInfo({ code: v.value });

      let limitItem = currentItems.schemes

        .split(",")

        .map((i: string) => {
          if (i === "1") {
            return ({
              externalRely: true,
              limitScheme: true,
              schemeType: i
            });

          } else { return ({ schemeType: i, limitScheme: false }); }

        });

      if (currentItems.schemes.split(",").includes('7')) {
        const item = limitItem[1];
        limitItem[1] = limitItem[2];
        limitItem[2] = item;
      }

      // form.setFieldsValue({ schemeList: currentItems.schemes !== "0" ? limitItem : [] });
      form.setFieldsValue({ schemeList: limitItem });

    }
  

    // 优惠券类型限制
    function screenCouponType() {
      const list = limitCoupon && limitCoupon.length ? ClassifyList.filter(v => limitCoupon.includes(v.code)) : ClassifyList;
      return list || [];
    }
  

    return (
      <div>

        <Form form={form} {...formItemLayout}>

          <Form.Item
            label="优惠券类型"
            name="classifyCode"
            rules={[{ required: true, message: "请选择优惠券类型" }]}
          >
            <Select
              optionFilterProp="children"
              showSearch

              disabled={readonly || !!confNo}

              labelInValue
              placeholder="请选择优惠券类型"
              style={{ width: "100%" }}
              onChange={(value, option) => changeScene(option)}
            >

              {screenCouponType().map((item) => (

                <Option key={item.code} value={item.code}>

                  {item.name}
                </Option>
              ))}

            </Select>
          </Form.Item>

          {classifyInfo.code === "xjdhq" && (
            <Form.Item
              label="现金兑换券类型"
              name="exchangeTypeId"
              rules={[{ required: true, message: "请选择优惠券类型" }]}
            >
              <Select
                optionFilterProp="children"
                showSearch
                disabled={readonly || !!confNo}
                labelInValue
                placeholder="请选择兑换券类型"
                style={{ width: "100%" }}
              >
                {cashChangeTypes.map((item) => (
                  <Option key={item.id} value={item.id}>

                    {`${item.name} [${PaymentTypeEnum[item.paymentType]}]`}

                  </Option>
                ))}
              </Select>
            </Form.Item>
          )}

          <Form.Item
            label="优惠券别名"
            name="aliasName"
            rules={[{ required: true, message: "请输入优惠券名称" }]}

            extra={
              <Row style={{ marginTop: 10 }}>
                <span style={{ color: 'red', fontSize: 12 }}>示例：至高6500元鲸喜基金；</span>

                <div

                  style={{ color: '#4189FD', fontSize: 12 }}
                  onClick={() => setVisible(true)}
                >
                  预览<RightOutlined />
                </div>
              </Row>
            }

          >
            <Input

              disabled={changeEditKeys ? !changeEditKeys.includes("aliasName") : (readonly || !!confNo)}

              placeholder="请输入优惠券名称"

              maxLength={20}

            />

          </Form.Item>

          {!!expires && (
            <Form.Item
              label="优惠券有效期"
              name="expires"
              extra={<span style={{ fontSize: 12, color: '#999' }}>固定天数为0的时候，即有效期为当天23：59：59</span>}
              rules={[{ required: true, message: "请输入优惠券固定天数有效期时间" }]}
            >
              <InputNumber
                disabled={readonly || !!confNo}
                style={{ width: "100%" }}
                placeholder="请输入"
                addonAfter="天"
                precision={0}
                min={0}
              />
            </Form.Item>
          )}

          {/* 实物兑换券选择兑换物品 */}
          {classifyInfo.code === "dhyhq" && (
            <Form.Item label="兑换物品" name="amsCode" extra={<span style={{ fontSize: 12 }}>*兑换物品仅限一个</span>} rules={[{ required: true, message: '请选择' }]}>
              <RenderSelectGoos multiple={false} disabled={readonly} />
            </Form.Item>
          )}

          <Form.Item
            label="优惠券券面金额"
            name="amount"
            rules={[{ required: true, message: "请输入优惠券销售价格" }]}
          >
            <InputNumber

              disabled={readonly || !!confNo}

              style={{ width: "100%" }}
              placeholder="请输入"
            />

          </Form.Item>

          <Form.Item
            label="结算方式"
            name="settlementType"
            rules={[{ required: true, message: "请选择结算方式" }]}
          >

            <Radio.Group disabled={readonly}>

              <Radio key={1} value={1}>
                商家结算给三方
              </Radio>

              {!["dhyhq"].includes(classifyInfo.code) && (

                <Radio key={2} value={2}>
                  厂家结算给商家
                </Radio>
              )}

            </Radio.Group>
          </Form.Item>
  

          <Form.Item
            label="结算金额计算方式"
            name="settlementCalType"
            rules={[{ required: true, message: "请输入金额" }]}
          >

            <Radio.Group disabled={readonly}>

              <Radio key={1} value={1}>
                系数
              </Radio>

              {!["xjdhq"].includes(classifyInfo.code) && (
                <Radio key={2} value={2}>
                  金额
                </Radio>
              )}

            </Radio.Group>
          </Form.Item>

          <Form.Item
            noStyle

            shouldUpdate={(prevValues, currentValues) => prevValues.settlementCalType != currentValues.settlementCalType}

          >

            {({ getFieldValue }): any => {
              const calType = getFieldValue("settlementCalType");

              const max = calType == 1 ? 1 : undefined;

              return (

                <Form.Item
                  label={calType == 1 ? "结算系数" : "结算金额(元)"}
                  name="settlementCalValue"
                  rules={[

                    { required: true, message: "请输入" },

                    ({ getFieldValue }) => ({
                      validator(_, value) {

                        if (calType === 2 && value > getFieldValue("amount")) {

                          return Promise.reject(
                            new Error("结算金额不能大于优惠券券面金额")
                          );

                        }
                        return Promise.resolve();
                      },
                    }),
                  ]}
                >

                  <InputNumber
                    style={{ width: "100%" }}
                    disabled={readonly}
                    placeholder="请输入"
                    min={0}
                    max={max}
                    precision={2}
                  />

                </Form.Item>
              );
            }}
          </Form.Item>

          <ShopLimit
            form={form}
            readonly={readonly}
            formItemLayout={formItemLayout}
          />

          <Divider orientation="center">场景限制条件</Divider>

          <WareLimitType
            readonly={readonly}
            info={info}
            form={form}
            formItemLayout={formItemLayout}
            schemes={classifyInfo}

            carSelectApi={carSelectApi}

            changeEditKeys={changeEditKeys}

          />

        </Form>

        <Modal
          visible={visible}
          centered
          onCancel={() => setVisible(false)}
          footer={false}
        >
          <Image
            width={300}
            src="https://feewee-1255997270.cos.ap-chengdu.myqcloud.com/static/mkt/coupon/aliasName/example?"
          />
        </Modal>

      </div>
    );
  }