import { Button, FormInstance, Space } from "antd";
import { inject, observer } from "mobx-react";
import { useEffect } from "react";
import { Store } from "antd/lib/form/interface";
import SimpleForm from "@/components/form/simple_form";
import React from "react";
import { useParams } from "react-router";
const PayConfig = (props: Store) => {
  const { appStore } = props;
  const { id } = useParams();
  const wxformRef = React.useRef<FormInstance>(null);
  const aliformRef = React.useRef<FormInstance>(null);
  useEffect(() => {
    wxformRef.current?.setFieldsValue(appStore.item?.wechat)
    aliformRef.current?.setFieldsValue(appStore.item?.ali)
  }, [appStore.item,id]);
  const onFinishFailed = () => {};
  const onwxFinish = (values: any) => {
    appStore.setWechatConfig(id,values)
  };
  const onAliFinish = (values: any) => {
    appStore.setAlConfig(id,values)
  };
  return (
    <div className="contentBox">
      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
        <div style={{ backgroundColor: "#fff", padding: "10px" }}>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
          <p>微信支付</p>
            <Button
              type="primary"
              onClick={() => {
                wxformRef.current?.submit();
              }}
            >
              保存
            </Button>
          </div>
          <SimpleForm
            formName={""}
            colProps={0}
            formRef={wxformRef}
            onFinish={onwxFinish}
            onFinishFailed={onFinishFailed}
            formDatas={[
              {
                type: "input",
                label: "wechatAppid",
                name: "wechatAppid",
                value: "",
                rules: [{ required: true, message: "请输入卡片名称!" }],
              },
              {
                type: "input",
                label: "mchid",
                name: "mchid",
                value: "",
                rules: [{ required: true, message: "请输入卡片名称!" }],
              },
              {
                type: "input",
                label: "body",
                name: "body",
                value: "",
                rules: [{ required: true, message: "请输入卡片名称!" }],
              },
              {
                type: "input",
                label: "notifyURL",
                name: "notifyURL",
                value: "",
                rules: [{ required: true, message: "请输入卡片名称!" }],
              },
              {
                type: "input",
                label: "key",
                name: "key",
                value: "",
                rules: [{ required: true, message: "请输入卡片名称!" }],
              },
            ]}
          />
        </div>
        <div style={{ backgroundColor: "#fff", padding: "10px" }}>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <p>支付宝支付</p>
            <Button
              type="primary"
              onClick={() => {
                aliformRef.current?.submit();
              }}
            >
              保存
            </Button>
          </div>
          <SimpleForm
            formRef={aliformRef}
            formName={""}
            colProps={0}
            onFinish={onAliFinish}
            onFinishFailed={onFinishFailed}
            formDatas={[
              {
                type: "input",
                label: "AliAppId",
                name: "appid",
                value: "",
                rules: [{ required: true, message: "请输入卡片名称!" }],
              },
              {
                type: "input",
                label: "AliKey",
                name: "aliKey",
                value: "",
                rules: [{ required: true, message: "请输入卡片名称!" }],
              },
              {
                type: "input",
                label: "returnUrl",
                name: "returnUrl",
                value: "",
                rules: [{ required: true, message: "请输入卡片名称!" }],
              },
              {
                type: "input",
                label: "notifyURL",
                name: "notifyURL",
                value: "",
                rules: [{ required: true, message: "请输入卡片名称!" }],
              },
            ]}
          />
        </div>
      </Space>
    </div>
  );
};

export default inject("appStore")(observer(PayConfig));