global_funding-pc-merchant/src/pages/authentication/components/ConpanyDirectorAuthPersonBe...

import { UploadImage } from "@/components/Upload";
import { Button, Form, Input,  InputNumber,  Radio, Select } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
export default (props) => {
  const { title, identity, key } = props;
  console.log(props);
  const { t } = useTranslation();
  const directorRule = {
    [`${identity}-directorCountry`]: [{ require: true, message: "请选择国家" }],
    [`${identity}-directorIdType`]: [
      { require: true, message: "请选择证件类型" },
    ],
    [`${identity}-directorIdFront`]: [
      { require: true, message: "请上传证件正面" },
    ],
    [`${identity}-directorIdBack`]: [
      { require: true, message: "请上传证件反面" },
    ],
    [`${identity}-directorNameCn`]: [
      { require: true, message: "请输入中文名" },
    ],
    [`${identity}-directorIdNo`]: [
      { require: true, message: "请输入证件证件号码" },
    ],
  };

  return (
    <>
      <div
        style={{
          fontSize: "16px",
          fontWeight: "600",
          marginBottom: "36px",
        }}
      >
        {title}
      </div>
      <Form.Item name={`${identity}-companyLegalId`} />
      <Form.Item name={`${identity}-companyBeneficiaryItemId`} />
      <Form.Item
        // label={t("authentication.directorInfoLabel1")}
        label="受益所有人国籍"
        wrapperCol={{ span: 17 }}
        name={`${identity}-directorCountry`}
        rules={directorRule[`${identity}-directorCountry`]}
      >
        <Select placeholder={t("authentication.directorInfoPlaceholder1")}>
          <Select.Option value={t("authentication.directorInfoSelectValue1")}>
            {t("authentication.directorInfoSelectValue1")}
          </Select.Option>
        </Select>
      </Form.Item>
      <Form.Item
        label={t("authentication.directorInfoLabel2")}
        name={`${identity}-directorIdType`}
        rules={directorRule[`${identity}-directorIdType`]}
        initialValue="1"
      >
        <Radio.Group>
          <Radio style={{ fontSize: "16px" }} value="1">
            {t("authentication.directorInfoRadioValue")}
          </Radio>
        </Radio.Group>
      </Form.Item>
      {/* 请用手机扫描二维码拍摄上传 */}
      <div
        style={{
          fontSize: "16px",
          fontWeight: "600",
          marginBottom: "12px",
        }}
      >
        {t("authentication.directorInfoTitle")}
      </div>
      <Form.Item>
        <div style={{ color: "#bfbfbf" }}>
          {t("authentication.directorInfoContent1")}
        </div>
        <div style={{ color: "#bfbfbf" }}>
          {t("authentication.directorInfoContent2")}
        </div>
        <div style={{ color: "#bfbfbf" }}>
          {t("authentication.directorInfoContent3")}
        </div>
        <div style={{ color: "red" }}>
          {t("authentication.directorInfoContent4")}
        </div>
        <Button type="link" style={{ padding: "4px 0" }}>
          {t("authentication.uploadBtnText")}
        </Button>
      </Form.Item>
      <Form.Item
        name={`${identity}-directorIdFront`}
        label={t("authentication.directorInfoSubTitle1")}
        rules={directorRule[`${identity}-directorIdFront`]}
      >
        <UploadImage />
        {/* 
            <div className="image_box">
              <div className="directorInfo-img-right-text">
                {t("authentication.directorInfoIDCardRightText")}
              </div>
            </div> */}
      </Form.Item>
      <Form.Item
        name={`${identity}-directorIdBack`}
        label={t("authentication.directorInfoSubTitle2")}
        rules={directorRule[`${identity}-directorIdBack`]}
      >
        <UploadImage />
        {/* <div style={{ marginTop: "24px", fontSize: "16px" }}>
              {t("authentication.directorInfoSubTitle2")}
            </div> */}
        {/* <div className="image_box"> */}
        {/* <div className="directorInfo-img-right-text">
                {t("authentication.directorInfoIDCardRightText")}
              </div> */}
        {/* </div> */}
      </Form.Item>

      <Form.Item
        label={t("authentication.directorInfoLabel3")}
        wrapperCol={{ span: 17 }}
        name={`${identity}-directorNameCn`}
        rules={directorRule[`${identity}-directorNameCn`]}
      >
        <Input
          placeholder={t("authentication.directorInfoInputPlaceholder2")}
        />
      </Form.Item>
      <Form.Item
        label={t("authentication.directorInfoLabel4")}
        wrapperCol={{ span: 17 }}
        name={`${identity}-directorIdNo`}
        rules={directorRule[`${identity}-directorIdNo`]}
      >
        <Input
          placeholder={t("authentication.directorInfoInputPlaceholder3")}
          size="large"
        />
      </Form.Item>
      <Form.Item
        label="持股比例"
        name={`${identity}-shareholdingRatio`}
        wrapperCol={{ span: 18 }}
      >
        <InputNumber
          placeholder=">=25"
          style={{ width: '100%' }}
          formatter={(value) => `${value}%`}
          min={25}
        />
      </Form.Item>
    </>
  );
};