mini-programs/src/components/NTRPEvaluatePopup/index.tsx

import React, {
  useState,
  useImperativeHandle,
  useEffect,
  forwardRef,
  memo,
} from "react";
import { Button, Input, View, Text, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import classnames from "classnames";
import CommonPopup from "../CommonPopup";
import { getCurrentFullPath } from "@/utils";
import evaluateService from "@/services/evaluateService";
import { useUserActions } from "@/store/userStore";
import { EvaluateCallback, EvaluateScene } from "@/store/evaluateStore";
import NTRPTestEntryCard from "../NTRPTestEntryCard";
import NtrpPopupGuide from "../NTRPPopupGuide";
import Picker from "../Picker/Picker";
import CloseIcon from "@/static/ntrp/ntrp_popup_close.svg";
import styles from "./index.module.scss";

const ntrpLevels = ["1.5", "2.0", "2.5", "3.0", "3.5", "4.0", "4.5"];
const options = [
  ntrpLevels.map((item) => ({
    text: item,
    value: item,
  })),
];

export enum EvaluateType {
  EDIT = "edit",
  EVALUATE = "evaluate",
}

export enum DisplayConditionType {
  AUTO = "auto",
  ALWAYS = "always",
}

export enum SceneType {
  LIST = "list",
  PUBLISH = "publish",
  PERSONAL = "personal",
  DETAIL = "detail",
}

interface NTRPEvaluatePopupProps {
  // types: EvaluateType[];
  // displayCondition: DisplayConditionType;
  // scene: SceneType;
  showGuide: boolean;
  type: EvaluateScene;
  // children: React.ReactNode;
}

// function showCondition(scene, ntrp) {
//   if (scene === "list") {
//     // TODO: 显示频率
//     return Math.random() < 0.1 && [0, undefined].includes(ntrp);
//   }
//   return true;
//   return !ntrpLevels.includes(ntrp);
// }

const NTRPEvaluatePopup = (props: NTRPEvaluatePopupProps, ref) => {
  const {
    // types = ["edit", "evaluate"],
    // displayCondition = "auto",
    // scene = "list",
    type,
    showGuide = false,
  } = props;
  const [visible, setVisible] = useState(false);
  const [ntrp, setNtrp] = useState<string>("");
  const [guideShow, setGuideShow] = useState(() => showGuide);
  const { updateUserInfo } = useUserActions();
  const [evaCallback, setEvaCallback] = useState<EvaluateCallback>({
    type: "",
    next: () => {},
    onCancel: () => {},
  });

  useImperativeHandle(ref, () => ({
    show: (evaluateCallback) => {
      setVisible(true);
      setEvaCallback(evaluateCallback);
    },
  }));

  // function handleEvaluate() {
  //   setVisible(false);
  //   // TODO: 实现NTRP评估逻辑
  //   Taro.navigateTo({
  //     url: `/other_pages/ntrp-evaluate/index?redirect=${encodeURIComponent(
  //       getCurrentFullPath()
  //     )}`,
  //   });
  // }

  useEffect(() => {
    getNtrp();
  }, []);

  async function getNtrp() {
    const res = await evaluateService.getLastResult();
    if (res.code === 0 && res.data.has_ntrp_level) {
      setNtrp(res.data.user_ntrp_level);
    } else {
      setNtrp("");
    }
  }

  // const showEntry =
  //   displayCondition === "auto"
  //     ? showCondition(scene, ntrp)
  //     : displayCondition === "always";

  function handleClose() {
    console.log("hide  ....");
    setVisible(false);
    setGuideShow(showGuide);
  }

  async function handleChangeNtrp() {
    Taro.showLoading({ title: "修改中" });
    await updateUserInfo({ ntrp_level: ntrp });
    Taro.showToast({
      title: "NTRP水平修改成功",
      icon: "none",
    });
    evaCallback.next(true);
    handleClose();
  }

  return (
    <>
      <CommonPopup
        title="NTRP评估"
        visible={visible}
        onClose={handleClose}
        showHeader={false}
        hideFooter
        enableDragToClose={false}
      >
        {guideShow ? (
          <NtrpPopupGuide
            close={() => handleClose()}
            skipGuide={() => {
              setGuideShow(false);
            }}
            evaluateCallback={evaCallback}
          />
        ) : (
          <View className={styles.container}>
            <View className={styles.header}>
              <Text>选择 NTRP 自评水平</Text>
              <View className={styles.closeBtn} onClick={handleClose}>
                <Image className={styles.closeIcon} src={CloseIcon} />
              </View>
            </View>
            <View className={styles.entryCard}>
              <NTRPTestEntryCard type={type} evaluateCallback={evaCallback} />
            </View>
            <View className={styles.picker}>
              {/* FIXME: 有异常渲染问题 */}
              {visible && (
                <Picker
                  visible
                  options={options}
                  defaultValue={[ntrp]}
                  onChange={(val) => {
                    console.log(val[0]);
                    if (val[0]?.value) {
                      setNtrp(val[0]?.value as string);
                    }
                  }}
                />
              )}
            </View>
            <View className={styles.actions}>
              <View className={styles.buttonWrap}>
                <Button className={styles.button} onClick={handleClose}>
                  取消
                </Button>
              </View>
              <View className={styles.buttonWrap}>
                <Button
                  className={classnames(styles.button, styles.primary)}
                  onClick={handleChangeNtrp}
                >
                  保存
                </Button>
              </View>
            </View>
          </View>
        )}
      </CommonPopup>
    </>
  );
};

export default memo(forwardRef(NTRPEvaluatePopup));