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

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

interface PickerProps {
  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;
}

const PopupPicker = ({
  visible,
  setvisible,
  value = [],
  img,
  onConfirm,
  onChange,
  options = [],
  type = null,
}: PickerProps) => {
  const [defaultValue, setDefaultValue] = useState<(string | number)[]>([]);
  const [defaultOptions, setDefaultOptions] = useState<PickerOption[][]>([]);
  const changePicker = (options: any[], values: any, columnIndex: number) => {
    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);
      }
    }
  };

  const handleConfirm = () => {
    console.log(defaultValue, "defaultValue");
    onChange(defaultValue);
    setvisible(false);
  };

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

  //   useEffect(() => {
  //     if (value.length > 0 && defaultOptions.length > 0) {
  //         setDefaultValue([...value])
  //     }
  //   }, [value, defaultOptions])
  return (
    <>
      <CommonPopup
        visible={visible}
        onClose={dialogClose}
        showHeader={false}
        title={null}
        hideFooter={false}
        cancelText="取消"
        confirmText="完成"
        onConfirm={handleConfirm}
        position="bottom"
        round
        zIndex={1000}
      >
        {type === "ntrp" && (
          <View className={`${styles["examination-btn"]}}`}>
            <View className={`${styles["text-container"]}}`}>
              <View className={`${styles["text-title"]}}`}>
                不知道自己的<Text>（NTRP）</Text>水平
              </View>
              <View className={`${styles["text-btn"]}}`}>
                <Text>快速测试</Text>
                <Image src={imgs.ICON_ARROW_GREEN} className={`${styles["icon-arrow"]}`}></Image>
              </View>
            </View>
            <View className={`${styles["img-container"]}}`}>
              <View className={`${styles["img-box"]}`}>
                <Image src={img!}></Image>
              </View>
              <View className={`${styles["img-box"]}`}>
                <Image src={imgs.ICON_EXAMINATION}></Image>
              </View>
            </View>
          </View>
        )}
        <Picker
          visible={visible}
          options={defaultOptions}
          defaultValue={value}
          onChange={changePicker}
        />
      </CommonPopup>
    </>
  );
};

export default PopupPicker;