import React, { FunctionComponent } from "react";
import Icon from "@/lib/CustomIcon";
import { LockOutlined, UnlockOutlined, QuestionCircleOutlined } from "@ant-design/icons";
import styles from "@/pages/atdTable/components/index.less";

interface OwnProps {
  i18n: any;
}

type Props = OwnProps;

const CalcExplainFooter: FunctionComponent<Props> = (props) => {
  const { i18n } = props;
  return (
    <div className={styles["explain-icon-area"]}>
      <div className={styles["icon-item"]}>
        <Icon type="icon-piliangsuoding" />
        <span>{i18n["批量锁定"]}</span>
      </div>
      <div className={styles["icon-item"]}>
        <Icon type="icon-piliangjiesuo" />
        <span>{i18n["批量解锁"]}</span>
      </div>
      <div className={styles["icon-item"]}>
        <LockOutlined />
        <span>{i18n["当前状态锁定，右击解锁"]}</span>
      </div>
      <div className={styles["icon-item"]}>
        <UnlockOutlined />
        <span>{i18n["当前状态未锁定，右击锁定"]}</span>
      </div>
      {(i18n["反馈信息，右击删除反馈信息"] || i18n["反馈信息，右击设置反馈信息"]) && (
        <div className={styles["icon-item"]}>
          <QuestionCircleOutlined />
          <span>{i18n["反馈信息，右击删除反馈信息"] || i18n["反馈信息，右击设置反馈信息"]}</span>
        </div>
      )}
      <div className={styles["icon-item"]}>
        <Icon type="icon-pilianggengxin" />
        <span>{i18n["批量更新"]}</span>
      </div>
    </div>
  );
};

export default CalcExplainFooter;
