YT_BabyFoodDiary/commons/basic/src/main/ets/datepicker/WheelPicker.ets

/*
 * 滚轮式日期选择器组件
 */

import { YTDateUtil } from '../utils/YTDateUtil';
import { UnitType } from './DatePickerEnums';

@Component
export struct WheelPicker {
  @Prop @Require date: Date;
  @State dateLocal: Date = new Date();
  upDate: (date: Date) => void = (date: Date) => {};
  @Prop @Require minDate: Date;
  @Prop @Require maxDate: Date;
  @Prop @Require unitType: UnitType;
  @State years: number[] = [];
  @State yearsString: string[] = [];
  @State months: number[] = [];
  @State monthsString: string[] = [];
  @State days: number[] = [];
  @State daysString: string[] = [];
  @State selectedYear: number = 0;
  @State selectedYearString: string = '';
  @State selectedMonth: number = 0;
  @State selectedMonthString: string = '';
  @State selectedDay: number = 0;
  @State selectedDayString: string = '';
  @State debounceYear: number = -1;
  @State debounceMonth: number = -1;

  @Prop highlightBackgroundColor:ResourceColor
  @Prop highlightBorderColor:ResourceColor
  @Prop selectedTextStyle:PickerTextStyle
  @Prop textStyle:PickerTextStyle




  aboutToAppear() {
    // 设置初始选中值
    this.selectedYear = this.date.getFullYear();
    this.selectedMonth = this.date.getMonth() + 1; // 月份从1开始
    this.selectedDay = this.date.getDate();

    this.selectedYearString = this.selectedYear.toString() + '年';
    this.selectedMonthString = YTDateUtil.padNumber(this.selectedMonth) + '月';
    this.selectedDayString = this.selectedDay.toString() + '日';

    // 初始化年份数据
    this.initYears();

    // 初始化月份数据
    this.initMonths();

    // 初始化日期数据
    this.initDays();

  }

  // 初始化年份数据
  initYears() {
    const minYear = this.minDate.getFullYear();
    const maxYear = this.maxDate.getFullYear();
    this.years = [];
    this.yearsString = [];

    for (let year = minYear; year <= maxYear; year++) {
      this.years.push(year);
      this.yearsString.push(year.toString() + '年');
    }
  }

  // 初始化月份数据
  initMonths() {
    this.months = [];
    this.monthsString = [];
    let minMonth = 1;
    let maxMonth = 12;
    if (!this.selectedYear) {
      this.selectedYear = this.date.getFullYear()
      this.selectedYearString = this.selectedYear.toString() + '年';
      console.log(this.date.getFullYear() + ',.,' + this.selectedYear)
    }

    // 如果是最小年份，则从最小月份开始
    if (this.selectedYear === this.minDate.getFullYear()) {
      minMonth = this.minDate.getMonth() + 1;
    }

    // 如果是最大年份，则到最大月份结束
    if (this.selectedYear === this.maxDate.getFullYear()) {
      maxMonth = this.maxDate.getMonth() + 1;
    }

    for (let month = minMonth; month <= maxMonth; month++) {
      //补零
      this.monthsString.push(YTDateUtil.padNumber(month)+'月')
      this.months.push(month);
    }

    // 确保选中的月份在可选范围内
    console.log('选择的月份是',this.selectedMonth)
    if (this.selectedMonth < minMonth) {
      this.selectedMonth = minMonth;
      this.selectedMonthString = YTDateUtil.padNumber(minMonth)+'月';
    } else if (this.selectedMonth > maxMonth) {
      this.selectedMonth = maxMonth;
      this.selectedMonthString = YTDateUtil.padNumber(minMonth)+'月';
    }
  }

  // 初始化日期数据
  initDays() {
    this.days = [];
    this.daysString = [];
    let minDay = 1;
    let maxDay = new Date(this.selectedYear, this.selectedMonth, 0).getDate(); // 获取当月天数

    // 如果是最小年份和最小月份，则从最小日期开始
    if (this.selectedYear === this.minDate.getFullYear() && this.selectedMonth === this.minDate.getMonth() + 1) {
      minDay = this.minDate.getDate();
    }

    // 如果是最大年份和最大月份，则到最大日期结束
    if (this.selectedYear === this.maxDate.getFullYear() && this.selectedMonth === this.maxDate.getMonth() + 1) {
      maxDay = this.maxDate.getDate();
    }

    for (let day = minDay; day <= maxDay; day++) {
      this.days.push(day);
      this.daysString.push(day.toString()+'日');
    }

    // 确保选中的日期在可选范围内
    if (this.selectedDay < minDay) {
      this.selectedDay = minDay;
      this.selectedDayString = this.selectedDay+'日';
    } else if (this.selectedDay > maxDay) {
      this.selectedDay = maxDay;
      this.selectedDayString = this.selectedDay+'日';
    }
  }

  // 更新日期
  updateDate() {
    this.dateLocal = new Date(this.selectedYear, this.selectedMonth - 1, this.selectedDay);
    this.upDate(this.dateLocal)
  }

  build() {
    Stack() {
      // 中间高亮横条
      Row() {
      }
      // .width(343)
      // .height(44)
      .width('100%')
      .height(44)
      .backgroundColor(this.highlightBackgroundColor)
      .borderRadius(44)
      .border({width: 1, color: this.highlightBorderColor})
      Row() {
        // 根据单位类型显示不同的选择器
        if (this.unitType === UnitType.YEAR || this.unitType === UnitType.YEAR_MONTH ||
          this.unitType === UnitType.YEAR_MONTH_DAY) {
          // 年份选择器
          TextPicker({
            range: this.yearsString,
            selected: this.yearsString.indexOf(this.selectedYearString)
          })
            .divider(null)
            .selectedTextStyle(this.selectedTextStyle)
            .textStyle(this.textStyle)
            .canLoop(true)
            .width(70)
            .onChange((val) => {
              if (this.debounceYear !== -1) {
                clearTimeout(this.debounceYear);
              }

              this.debounceYear = setTimeout(() => {

                this.selectedYear = Number((val as string).replace('年',''));
                this.selectedYearString = val as string;
                this.initMonths();
                this.initDays();
                this.updateDate();
                this.debounceYear = -1;
              }, 300); // 300ms 的防抖延迟
            })
 /*         Text('年')
            .fontSize(16)
            .fontColor(Color.Black)
            .margin({ left: 10, right: 16 })*/
        }

        if (this.unitType === UnitType.MONTH || this.unitType === UnitType.YEAR_MONTH ||
          this.unitType === UnitType.MONTH_DAY || this.unitType === UnitType.YEAR_MONTH_DAY) {
          // 月份选择器
          TextPicker({
            range: this.monthsString,
            selected: this.monthsString.indexOf(this.selectedMonthString)
          })
            .divider(null)
            .selectedTextStyle(this.selectedTextStyle)
            .textStyle(this.textStyle)
            .canLoop(true)
            .width(70)
            .onChange((val) => {
              if (this.debounceMonth !== -1) {
                clearTimeout(this.debounceMonth);
              }
              this.debounceMonth = setTimeout(() => {
                //去0和月字
                this.selectedMonth = Number((val as string).replace(/^0+/, '').replace('月', ''));
                // this.selectedMonth = Number(val);
                this.selectedMonthString = val as string;
                this.initDays();
                this.updateDate();
                this.debounceMonth = -1;
              }, 100); // 100ms 的防抖延迟

            })

   /*       Text('月')
            .fontSize(16)
            .margin({ left: 3, right: 16 })
            .fontColor(Color.Black)*/
        }

        if (this.unitType === UnitType.DAY || this.unitType === UnitType.MONTH_DAY ||
          this.unitType === UnitType.YEAR_MONTH_DAY) {
          // 日期选择器

          TextPicker({
            range: this.daysString,
            selected: this.daysString.indexOf(this.selectedDayString)
          })
            .divider(null)
            .selectedTextStyle(this.selectedTextStyle)
            .textStyle(this.textStyle)
            .canLoop(true)
            .width(70)
            .onChange((val) => {
              //去0和日字
              this.selectedDay = Number((val as string).replace(/^0+/, '').replace('日', ''));
              // this.selectedDay = Number(val);
              this.selectedDayString = val as string;
              this.updateDate();
            })

/*          Text('日')
            .fontSize(16)
            .fontColor(Color.Black)*/
        }
      }
      .justifyContent((this.unitType==UnitType.YEAR||this.unitType==UnitType.MONTH||this.unitType==UnitType.DAY)?FlexAlign.Center:FlexAlign.SpaceBetween)
      .width('100%')
      .padding({ left: 25, right: 25 })


      // .position({ x: 0, y: 90 }) // y = (224-40)/2，居中
      // // 上边界白色线
      // // Row()
      // //   .width(320)
      // //   .height(1)
      // //   .backgroundColor('#fff')
      // //   .align(Alignment.Center)
      // //   .margin({ top: -24 }) // 48/2=24，正好到高亮条上边缘
    }
    .width('100%')
    .backgroundColor('#FFF')
  }
}