TTMusic/entry/src/main/ets/pages/SettingPage.ets

import TitleBar from '../view/TitleBar'
import { promptAction, router } from '@kit.ArkUI'
import { CommonConstants } from '../common/constants/CommonConstants'
import { AppUtil, PreferencesUtil } from '@pura/harmony-utils'
import { CustomContentDialog } from '@kit.ArkUI'
import ConfigurationConstant from '@ohos.app.ability.ConfigurationConstant';
import common from '@ohos.app.ability.common';

@Preview
@Entry
@Component
export struct SettingPage {
  @State showApiDialog: boolean = false
  @State tempApiUrl: string = ''
  @State lyricApiUrl: string = PreferencesUtil.getStringSync('LRC_API', '')
  @State isBgPlayOpen: boolean = true //是否启用后台播放
  @State isAutoRatate: boolean = true //是否启用自动横竖屏
  @State isMemoryPlay: boolean = true //是否启用记忆播放
  @State isMediacodec: boolean = false //是否启用硬件解码
  @State isMusicMemoryPlay: boolean = false //是否启用记忆播放
  @State isMusicBGCover: boolean = true //播放背景随封面
  @State sortType: number = 4 //默认排序方式
  @State showCoverApiDialog: boolean = false
  @State tempCoverApiUrl: string = ''
  @State coverApiUrl: string = PreferencesUtil.getStringSync('COVER_API', '')
  @State apiDialogType: 'lyric' | 'cover' = 'lyric'
  static readonly SORT_TYPE: string = 'musicSortType';
  @StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number = ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
  @StorageLink('isDarkMode') isDarkMode: boolean = false // 是否启用深色模式
  static readonly IS_BGPLAY_OPEN: string = 'isBgPlayOpen';
  static readonly IS_AUTO_RATATE: string = 'isAutoRatate';
  static readonly iS_MEMORY_PLAY: string = 'isMemoryPlay';
  static readonly IS_MIDIACODEC_OPEN: string = 'isMediacodec';
  static readonly iS_MUSIC_MEMORY_PLAY: string = 'isMusicMemoryPlay';
  static readonly iS_MUSIC_BG_COVER: string = 'isMusicBGCover';
  static readonly iS_SAVE_PLAY_MODE: string = 'isSavePlayMode';
  static readonly IS_COVER_RECTANGLE: string = 'isCoverRectangle'; //封面圆形或者方形
  static readonly IS_DARK_MODE: string = 'isDarkMode'; // 深色模式设置
  @State titleBarModel: TitleBar.Model = new TitleBar.Model()
    .setTitleTextStyle(FontStyle.Normal)
    .setTitleBarStyle(TitleBar.BarStyle.TRANSPARENT)
    .setLeftIcon($r('app.media.left_back_white'))
    .setTitleName('通用设置')
    .setTitleFontColor(Color.White)
    .setTitleBarBackground($r('app.color.title_bar_bg'))
    .setLeftTitleBackground($r('app.color.title_bar_bg'))
    .setTitleBarBottomLineColor($r('app.color.title_bar_bg'))
    .setOnLeftClickListener(() => {
      router.back()
    })
  @State verName: string = ''

  apiDialogController: CustomDialogController = new CustomDialogController({
    builder: CustomContentDialog({
      primaryTitle: this.apiDialogType === 'lyric' ? '修改歌词API地址' : '修改封面API地址',
      contentBuilder: () => {
        this.buildApiDialogContent();
      },
      buttons: [
        {
          value: '取消',
          action: () => {
            this.apiDialogController.close();
          }
        },
        {
          value: '保存',
          action: () => {
            if (this.apiDialogType === 'lyric') {
              this.lyricApiUrl = this.tempApiUrl
              PreferencesUtil.put('LRC_API', this.lyricApiUrl)
              this.getUIContext().getPromptAction().showToast({
                message: '保存成功，当前LRC_API:' + this.lyricApiUrl,
                duration: 2000,
                showMode: promptAction.ToastShowMode.TOP_MOST,
                bottom: 85
              })
            } else {
              this.coverApiUrl = this.tempApiUrl
              PreferencesUtil.put('COVER_API', this.coverApiUrl)
              this.getUIContext().getPromptAction().showToast({
                message: '保存成功，当前COVER_API:' + this.coverApiUrl,
                duration: 2000,
                showMode: promptAction.ToastShowMode.TOP_MOST,
                bottom: 85
              })
            }
            this.apiDialogController.close();
          }
        }
      ]
    }),
    autoCancel: true,
    alignment: DialogAlignment.Center
  })

  @Builder
  buildApiDialogContent() {
    Column() {
      TextInput({ text: this.tempApiUrl, placeholder: this.apiDialogType === 'lyric' ? '请输入歌词API地址' : '请输入封面API地址' })
        .onChange((val: string) => {
          this.tempApiUrl = val
        })
        .width('90%')
        .height(60)
    }
    .width('100%')
  }

  // 组件生命周期
  aboutToAppear() {
    this.isBgPlayOpen = PreferencesUtil.getBooleanSync(SettingPage.IS_BGPLAY_OPEN, true)
    this.isAutoRatate = PreferencesUtil.getBooleanSync(SettingPage.IS_AUTO_RATATE, true)
    this.isMemoryPlay = PreferencesUtil.getBooleanSync(SettingPage.iS_MEMORY_PLAY, true)
    this.isMediacodec = PreferencesUtil.getBooleanSync(SettingPage.IS_MIDIACODEC_OPEN, false)
    this.isMusicMemoryPlay = PreferencesUtil.getBooleanSync(SettingPage.iS_MUSIC_MEMORY_PLAY, false)
    this.isMusicBGCover = PreferencesUtil.getBooleanSync(SettingPage.iS_MUSIC_BG_COVER, true)

    // 从持久化存储中读取深色模式设置
    const savedDarkMode = PreferencesUtil.getBooleanSync(SettingPage.IS_DARK_MODE, false);
    this.isDarkMode = savedDarkMode;
    this.currentMode = savedDarkMode ? ConfigurationConstant.ColorMode.COLOR_MODE_DARK : ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
    AppStorage.setOrCreate('currentColorMode', this.currentMode);
    AppStorage.setOrCreate('isDarkMode', this.isDarkMode);
  }

  // 监听颜色模式变化
  onColorModeChange(): void {
    this.isDarkMode = this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK;
    AppStorage.setOrCreate('isDarkMode', this.isDarkMode);
    // 保存深色模式设置到持久化存储
    PreferencesUtil.putSync(SettingPage.IS_DARK_MODE, this.isDarkMode);
  }

  // 切换深色模式
  async toggleDarkMode(checked: boolean) {
    try {
      const newMode = checked ? ConfigurationConstant.ColorMode.COLOR_MODE_DARK : ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;

      // 更新 AppStorage 中的颜色模式
      AppStorage.setOrCreate('currentColorMode', newMode);
      AppStorage.setOrCreate('isDarkMode', checked);

      // 保存深色模式设置到持久化存储
      PreferencesUtil.putSync(SettingPage.IS_DARK_MODE, checked);

      // 通知系统更新颜色模式
      const context = getContext(this) as common.UIAbilityContext;
      context.getApplicationContext().setColorMode(newMode);

      // 显示提示
      this.getUIContext().getPromptAction().showToast({
        message: checked ? '已切换到深色模式' : '已切换到浅色模式',
        duration: 2000,
        showMode: promptAction.ToastShowMode.TOP_MOST,
        bottom: 85
      });
    } catch (err) {
      console.error('Failed to update color mode:', err);
    }
  }

  // 组件生命周期
  aboutToDisappear() {
    // 无需处理apiDialogController
  }

  build() {

    Column() {
      TitleBar({ model: $titleBarModel })
      Scroll() {
        Column() {
        // 主题设置
          Row() {
          Text('主题设置')
              .margin({ left: 38, right: 20 })
              .fontSize(16)
              .fontColor(Color.Gray)
              .fontWeight(480)
            Blank()
          }
          .width('100%')
          .height(55)
          Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))

        // 深色模式开关
          Row() {
            Image($r('app.media.kp_music_nor'))
              .width(22)
              .height(22)
              .alignSelf(ItemAlign.Center)
              .margin({ left: 28 })
          Text('深色模式')
              .margin({ left: 10, right: 20 })
              .fontSize(15)
              .fontColor(Color.Gray)
              .fontWeight(480)
            Blank()
          Toggle({ type: ToggleType.Switch, isOn: this.isDarkMode })
            .selectedColor($r('app.color.title_bar_bg'))
            .switchPointColor(Color.White)
              .margin({ right: 28 })
            .onChange((checked: boolean) => {
              this.toggleDarkMode(checked);
              })
              .width(50)
              .height(30);
          }
          .width('100%')
          .height(55)

        Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))

        //音频设置
        Row() {
          Text('音频设置')
            .margin({ left: 38, right: 20 })
            .fontSize(16)
            .fontColor(Color.Gray)
            .fontWeight(480)
          Blank()
        }
        .width('100%')
        .height(55)

          Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
          Row() {
            Image($r('app.media.kp_music_nor'))
              .width(22)
              .height(22)
              .alignSelf(ItemAlign.Center)
              .margin({ left: 28 })
          Text('记忆播放')
              .margin({ left: 10, right: 20 })
              .fontSize(15)
              .fontColor(Color.Gray)
              .fontWeight(480)
            Blank()
          Toggle({ type: ToggleType.Switch, isOn: this.isMusicMemoryPlay })
            .selectedColor($r('app.color.title_bar_bg'))// 设置开关打开时的背景颜色为蓝色
            .switchPointColor(Color.White)// 设置开关关闭时的滑块颜色为白色
            .margin({ right: 28 })
            .onChange((checked: boolean) => { // 选择开关状态变化时触发事件
              this.isMusicMemoryPlay = checked;
              PreferencesUtil.put(SettingPage.iS_MUSIC_MEMORY_PLAY, this.isMusicMemoryPlay)
              })
            .width(50)
            .height(30);
          }
          .width('100%')
          .height(55)

          Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
          Row() {
            Image($r('app.media.kp_music_nor'))
              .width(22)
              .height(22)
              .alignSelf(ItemAlign.Center)
              .margin({ left: 28 })
            Text('播放背景随音乐封面')
              .margin({ left: 10, right: 20 })
              .fontSize(15)
              .fontColor(Color.Gray)
              .fontWeight(480)
            Blank()
            Toggle({ type: ToggleType.Switch, isOn: this.isMusicBGCover })
              .selectedColor($r('app.color.title_bar_bg'))// 设置开关打开时的背景颜色为蓝色
              .switchPointColor(Color.White)// 设置开关关闭时的滑块颜色为白色
              .margin({ right: 28 })
              .onChange((checked: boolean) => { // 选择开关状态变化时触发事件
                this.isMusicBGCover = checked;
                PreferencesUtil.put(SettingPage.iS_MUSIC_BG_COVER, this.isMusicBGCover)

              })
              .width(50)
              .height(30);
          }
          .width('100%')
          .height(55)

          Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))

          // API设置（合并标题）
          Row() {
            Text('API设置')
              .margin({ left: 38, right: 20 })
              .fontSize(16)
              .fontColor(Color.Gray)
              .fontWeight(480)
          }
          .width('100%')
          .height(55)

          Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
          // 歌词API地址展示
          Row() {
            Text('歌词:')
              .margin({ left: 38, right: 6 })
              .fontSize(15)
              .fontColor(Color.Gray)
            Text(this.lyricApiUrl)
              .margin({ right: 10 })
              .fontSize(15)
              .fontColor(Color.Gray)
              .layoutWeight(1)
            // 编辑图标按钮
            Image($r('app.media.edit'))
              .width(28)
              .height(28)
              .margin({ right: 18 })
              .onClick(() => {
                this.apiDialogType = 'lyric'
                this.tempApiUrl = this.lyricApiUrl
                this.apiDialogController.open()
              })
            Blank()
          }
          .width('100%')
          .margin({ top: 8, bottom: 12 })

          // 封面API地址展示
          Row() {
            Text('封面:')
              .margin({ left: 38, right: 6 })
              .fontSize(15)
              .fontColor(Color.Gray)
            Text(this.coverApiUrl)
              .margin({ right: 10 })
              .fontSize(15)
              .fontColor(Color.Gray)
              .layoutWeight(1)
            // 编辑图标按钮
            Image($r('app.media.edit'))
              .width(28)
              .height(28)
              .margin({ right: 18 })
              .onClick(() => {
                this.apiDialogType = 'cover'
                this.tempApiUrl = this.coverApiUrl
                this.apiDialogController.open()
              })
            Blank()
          }
          .width('100%')
          .margin({ top: 8, bottom: 12 })

        }
      .backgroundColor(this.isDarkMode ? '#1E1E1E' : Color.White)
        .margin({
          left: 25,
          right: 25,
          top: 20,
          bottom: 50
        })
        .layoutWeight(1)
        .justifyContent(FlexAlign.Start) // Align items to the start
        .borderRadius(30)


      }
      .scrollBar(BarState.Auto)
      .height('100%')
      .width('100%')
      .margin({bottom:18})

    }
    .backgroundColor(this.isDarkMode ? '#121212' : $r('app.color.index_background'))
    .height('100%')
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
  }

}