mini-programs/src/components/Picker/PopupPicker.tsx

import React, { useState, useEffect } from "react";
import CommonPopup from "@/components/CommonPopup";
import { View } from "@tarojs/components";
import Picker from "./Picker";
import {
  renderYearMonth,
  renderYearMonthDay,
  renderHourMinute,
} from "./PickerData";
import NTRPTestEntryCard from "../NTRPTestEntryCard";
import { EvaluateScene } from "@/store/evaluateStore";
// import imgs from "@/config/images";
import styles from "./index.module.scss";
interface PickerOption {
  text: string | number;
  value: string | number;
}

interface PickerProps {
  minYear?: number;
  maxYear?: number;
  title?: string;
  showHeader?: boolean;
  confirmText?: string;
  visible: boolean;
  setvisible: (visible: boolean) => void;
  options?: PickerOption[][] | PickerOption[];
  value?: (string | number)[];
  type?: "month" | "day" | "hour" | "ntrp" | null;
  // img?: string;
  onConfirm?: (options: PickerOption[], values: (string | number)[]) => void;
  onChange?: (value: (string | number)[]) => void;
  style?: React.CSSProperties;
  ntrpTested?: boolean;
}

const PopupPicker = ({
  minYear,
  maxYear,
  confirmText,
  title,
  showHeader,
  visible,
  setvisible,
  value = [],
  // img,
  onConfirm,
  onChange,
  options = [],
  type = null,
  style,
  ntrpTested,
}: PickerProps) => {
  const [defaultValue, setDefaultValue] = useState<(string | number)[]>([]);
  const [defaultOptions, setDefaultOptions] = useState<PickerOption[][]>([...options]);
  const [pickerCurrentValue, setPickerCurrentValue] =
    useState<(string | number)[]>(value);

  const changePicker = (options: any[], values: any, columnIndex: number) => {
    // 更新 Picker 的当前值
    setPickerCurrentValue(values);

    if (onChange) {
      console.log("picker onChange", columnIndex, values, options);
      if (
        type === "day" &&
        JSON.stringify(defaultValue) !== JSON.stringify(values)
      ) {
        const [year, month] = values;
        const daysInMonth = new Date(Number(year), Number(month), 0).getDate();
        const dayOptions = Array.from({ length: daysInMonth }, (_, i) => ({
          text: i + 1 + "日",
          value: i + 1,
        }));
        const newOptions = [...defaultOptions];
        if (JSON.stringify(newOptions[2]) !== JSON.stringify(dayOptions)) {
          newOptions[2] = dayOptions;
          setDefaultOptions(newOptions);
        }
      }

      if (JSON.stringify(defaultValue) !== JSON.stringify(values)) {
        setDefaultValue(values);
      }
    }
  };

  // 处理 Picker 的确认事件，获取当前选中的值
  const handlePickerConfirm = (
    options: PickerOption[],
    values: (string | number)[]
  ) => {
    setPickerCurrentValue(values);
    setDefaultValue(values);
  };

  const handleConfirm = () => {
    // 如果用户滚动过（defaultValue 不为空），使用 defaultValue
    // 如果用户没有滚动（defaultValue 为空），使用传入的默认值（即当前显示的默认选项）
    const valueToSave = defaultValue.length > 0 ? defaultValue : value;
    if (onChange && valueToSave.length > 0) {
      onChange(valueToSave);
    }
    setvisible(false);
  };

  const dialogClose = () => {
    setvisible(false);
  };
  useEffect(() => {
    if (type === "month") {
      setDefaultOptions(renderYearMonth());
    } else if (type === "day") {
      setDefaultOptions(renderYearMonthDay(minYear, maxYear));
    } else if (type === "hour") {
      setDefaultOptions(renderHourMinute());
    } else {
      setDefaultOptions(options);
    }
  }, [type]);

  // 当选择器打开时，初始化 defaultValue 和 pickerCurrentValue
  useEffect(() => {
    if (visible) {
      if (value.length > 0) {
        setDefaultValue([...value]);
        setPickerCurrentValue([...value]);
      } else {
        // 如果 value 为空，重置为初始状态
        setDefaultValue([]);
        setPickerCurrentValue([]);
      }
    }
  }, [visible, value]);
  return (
    <>
      <CommonPopup
        visible={visible}
        onClose={dialogClose}
        showHeader={showHeader || false}
        title={title || null}
        hideFooter={false}
        cancelText="取消"
        confirmText={confirmText || "完成"}
        onConfirm={handleConfirm}
        position="bottom"
        round
        zIndex={1000}
        style={style}
      >
        {type === "ntrp" && !ntrpTested && (
          <View className={styles.evaluateCardWrap}>
            <NTRPTestEntryCard type={EvaluateScene.userEdit} />
          </View>
        )}
        <Picker
          visible={visible}
          options={defaultOptions}
          defaultValue={value}
          onChange={changePicker}
          onConfirm={handlePickerConfirm}
        />
      </CommonPopup>
    </>
  );
};

export default PopupPicker;