<template>
  <view class="bottom-drawer-container" v-if="modelValue">
    <view class="drawer-overlay" @tap="close"></view>
    <view class="bottom-drawer" :class="{ 'drawer-open': modelValue }" @click.stop>
      <view class="drawer-header">
        <text class="drawer-title">音效设置</text>
        <text class="drawer-done" @tap="close">完成</text>
      </view>

      <!-- 耳返开关 -->
      <view class="setting-item">
        <text class="setting-label">耳返</text>
        <switch :checked="earMonitor" @change="handleEarMonitorChange" class="setting-switch" color="#2B65FB"
          style="transform:scale(0.7)" />
      </view>

      <!-- 背景音乐 -->
      <!--      <view class="setting-item">
        <text class="setting-label">背景音乐</text>
        <view class="setting-value" @tap="handleSelectMusic">
          <text class="setting-text">选择音乐</text>
          <image class="setting-arrow" src="/static/images/right-arrow.png" mode="aspectFit" />
        </view>
      </view> -->

      <!-- 音频设置 -->
      <view class="volume-settings">
        <text class="section-title">音频设置</text>

        <view class="slider-item">
          <text class="slider-label">耳返音量</text>
          <view class="custom-slider">
            <!-- 减号按钮 -->
            <view class="control-btn minus-btn" @tap="decreaseMusicVolume">
              <text class="btn-text">-</text>
            </view>

            <!-- 进度条区域 -->
            <view class="progress-section">
              <!-- 进度条背景 -->
              <view class="progress-bar">
                <view class="progress-fill" :style="{ width: (musicVolume / 100 * 400) + 'rpx' }"></view>
              </view>
              <!-- 当前数值显示 -->
              <text class="current-value">{{ musicVolume }}</text>
            </view>

            <!-- 加号按钮 -->
            <view class="control-btn plus-btn" @tap="increaseMusicVolume">
              <text class="btn-text">+</text>
            </view>
          </view>
        </view>



        <!--        <view class="slider-item">
          <text class="slider-label">音乐升降调</text>
          <text class="slider-value">{{ pitchValue }}</text>
          <slider
            :value="pitchValue"
            @change="handlePitchChange"
            min="-12"
            max="12"
            show-value
            activeColor="#2B65FB"
            backgroundColor="rgba(255, 255, 255, 0.1)"
            block-color="#FFFFFF"
            block-size="24"
          />
        </view> -->
      </view>

      <!-- 变声效果 -->
      <view class="voice-effects">
        <text class="section-title">变声</text>
        <view class="effects-grid">
          <view v-for="(effect, index) in voiceEffects" :key="index" class="effect-item"
            @tap="handleEffectChange(effect.key)">
            <view class="effect-icon-container" :class="{ 'effect-active': currentEffect === effect.key }">
              <image class="effect-icon" :src="effect.icon" mode="aspectFit" />
            </view>
            <text class="effect-name">{{ effect.name }}</text>
          </view>
        </view>
      </view>

      <!-- 混响效果 -->
      <view class="reverb-effects" style="margin-bottom: 40rpx;">
        <text class="section-title">混响</text>
        <view class="effects-grid">
          <view v-for="(effect, index) in reverbEffects" :key="index" class="effect-item"
            @tap="handleReverbChange(effect.key)">
            <view class="effect-icon-container" :class="{ 'effect-active': currentReverb === effect.key }">
              <image class="effect-icon" :src="effect.icon" mode="aspectFit" />
            </view>
            <text class="effect-name">{{ effect.name }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref,
    onMounted,
    watch
  } from 'vue';
  import {
    useAudioEffectState
  } from '@/uni_modules/tuikit-atomic-x/state/AudioEffectState'

  const {
    setVoiceEarMonitorEnable,
    setVoiceEarMonitorVolume,
    setAudioChangerType,
    setAudioReverbType,
    isEarMonitorOpened,
    earMonitorVolume,
    audioChangerType,
    audioReverbType
  } = useAudioEffectState(uni.$liveID)

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false
    }
  });

  const emit = defineEmits(['update:modelValue']);

  const earMonitor = ref(false);
  const musicVolume = ref(0);
  const voiceVolume = ref(0);
  const pitchValue = ref(0);
  const safeArea = ref({
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    width: 375,
    height: 750,
  });
  const currentEffect = ref('NONE');
  const currentReverb = ref('NONE');

  const voiceEffects = [{
      key: 'NONE',
      name: '原声',
      icon: '/static/images/no-effect.png'
    },
    {
      key: 'CHILD',
      name: '熊孩子',
      icon: '/static/images/voice-wild.png'
    },
    {
      key: 'LITTLE_GIRL',
      name: '萝莉',
      icon: '/static/images/voice-loli.png'
    },
    {
      key: 'MAN',
      name: '大叔',
      icon: '/static/images/voice-uncle.png'
    },
    {
      key: 'ETHEREAL',
      name: '空灵',
      icon: '/static/images/voice-ghost.png'
    }
  ];

  const reverbEffects = [{
      key: 'NONE',
      name: '无效果',
      icon: '/static/images/no-effect.png'
    },
    {
      key: 'KTV',
      name: 'Karaoke',
      icon: '/static/images/reverb-ktv.png'
    },
    {
      key: 'METALLIC',
      name: '金属声',
      icon: '/static/images/reverb-metal.png'
    },
    {
      key: 'DEEP',
      name: '低沉',
      icon: '/static/images/reverb-bass.png'
    },
    {
      key: 'LOUD',
      name: '洪亮',
      icon: '/static/images/reverb-bright.png'
    }
  ];

  const close = () => {
    emit('update:modelValue', false);
  };

  // 同步状态数据到UI
  const syncStateToUI = () => {
    try {
      console.log('开始同步状态数据...');
      console.log('状态管理器中的值:', {
        isEarMonitorOpened: isEarMonitorOpened.value,
        earMonitorVolume: earMonitorVolume.value,
        audioChangerType: audioChangerType.value,
        audioReverbType: audioReverbType.value
      });

      // 同步耳返状态
      earMonitor.value = isEarMonitorOpened.value;

      // 同步耳返音量
      musicVolume.value = earMonitorVolume.value;


      // 同步变声类型 - 确保值有效
      if (audioChangerType.value && typeof audioChangerType.value === 'string') {
        currentEffect.value = audioChangerType.value;
        console.log('变声类型同步:', audioChangerType.value);
      } else {
        console.warn('变声类型无效:', audioChangerType.value);
        currentEffect.value = 'NONE';
      }

      // 同步混响类型 - 确保值有效
      if (audioReverbType.value && typeof audioReverbType.value === 'string') {
        currentReverb.value = audioReverbType.value;
        console.log('混响类型同步:', audioReverbType.value);
      } else {
        console.warn('混响类型无效:', audioReverbType.value);
        currentReverb.value = 'NONE';
      }

      console.log('同步后的本地状态:', {
        earMonitor: earMonitor.value,
        musicVolume: musicVolume.value,
        voiceVolume: voiceVolume.value,
        currentEffect: currentEffect.value,
        currentReverb: currentReverb.value
      });
    } catch (error) {
      console.error('同步状态数据失败:', error);
    }
  };

  onMounted(() => {
    console.log('AudioEffectPanel mounted');

    uni.getSystemInfo({
      success: (res) => {
        safeArea.value = res.safeArea;
      }
    });

    // 延迟同步状态数据，确保状态管理器已初始化
    setTimeout(() => {
      syncStateToUI();
    }, 100);
  });

  // 监听抽屉打开状态，每次打开时同步数据
  watch(() => props.modelValue, (newVal) => {
    if (newVal) {
      console.log('抽屉打开，同步状态数据');
      // 抽屉打开时同步状态数据
      setTimeout(() => {
        syncStateToUI();
      }, 50);
    }
  });

  const handleEarMonitorChange = (e) => {
    earMonitor.value = e.detail.value;
    setVoiceEarMonitorEnable({
      enable: earMonitor.value
    })
  };

  const handleSelectMusic = () => {
    // TODO: 实现选择音乐逻辑
    console.log('选择音乐');
  };

  const handleMusicVolumeChange = (e) => {
    musicVolume.value = e.detail.value;
    setVoiceEarMonitorVolume({
      volume: musicVolume.value
    })
  };


  const handlePitchChange = (e) => {
    pitchValue.value = e.detail.value;
  };

  const handleEffectChange = (effect) => {
    console.log('选择效果:', effect, '当前效果:', currentEffect.value);
    currentEffect.value = effect;
    setAudioChangerType({
      changerType: currentEffect.value
    })
  };

  const handleReverbChange = (reverb) => {
    console.log('选择混响:', reverb, '当前混响:', currentReverb.value);
    currentReverb.value = reverb;
    setAudioReverbType({
      reverbType: currentReverb.value
    })
  };

  // 音量控制方法
  const decreaseMusicVolume = () => {
    const newValue = Math.max(0, musicVolume.value - 10)
    handleMusicVolumeChange({
      detail: {
        value: newValue
      }
    })
  }

  const increaseMusicVolume = () => {
    const newValue = Math.min(100, musicVolume.value + 10)
    handleMusicVolumeChange({
      detail: {
        value: newValue
      }
    })
  }
</script>

<style>
  .bottom-drawer-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000;
  }

  .drawer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .bottom-drawer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(34, 38, 46, 1);
    border-top-left-radius: 32rpx;
    border-top-right-radius: 32rpx;
    transform: translateY(100%);
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    padding: 32rpx;
  }

  .drawer-open {
    transform: translateY(0);
  }

  .drawer-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx;
  }

  .drawer-title {
    font-size: 32rpx;
    color: #FFFFFF;
    font-weight: 500;
  }

  .drawer-done {
    font-size: 32rpx;
    color: #2B65FB;
  }

  .setting-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 88rpx;
    border-bottom-width: 1px;
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .setting-label {
    font-size: 28rpx;
    color: #FFFFFF;
  }

  .setting-value {
    flex-direction: row;
    align-items: center;
  }

  .setting-text {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 8rpx;
  }

  .setting-arrow {
    width: 24rpx;
    height: 24rpx;
  }

  .volume-settings {
    margin-top: 32rpx;
  }

  .section-title {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 24rpx;
  }

  .slider-item {
    margin-bottom: 24rpx;
    display: flex;
    flex-direction: column;
  }

  .slider-label {
    font-size: 28rpx;
    color: #FFFFFF;
    margin-bottom: 16rpx;
  }

  /* 自定义控制区域样式 */
  .custom-slider {
    flex: 1;
    flex-direction: row;
    align-items: center;
    margin: 0 20rpx;
  }

  .control-btn {
    width: 60rpx;
    height: 60rpx;
    border-radius: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2rpx solid #2b6ad6;
  }

  .minus-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(43, 106, 214, 0.1);
  }

  .plus-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2b6ad6;
  }

  .btn-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #ffffff;
  }

  .plus-btn .btn-text {
    color: #ffffff;
  }

  .progress-section {
    flex: 1;
    margin: 0 20rpx;
    align-items: center;
    flex-direction: row;
    justify-content: center;
  }

  .progress-bar {
    width: 400rpx;
    height: 8rpx;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4rpx;
    position: relative;
    overflow: hidden;
    margin-right: 16rpx;
  }

  .progress-fill {
    height: 8rpx;
    background-color: #2b6ad6;
    border-radius: 4rpx;
  }

  .current-value {
    font-size: 24rpx;
    color: #ffffff;
    font-weight: 600;
    text-align: center;
    z-index: 10;
  }

  .voice-effects,
  .reverb-effects {
    margin-top: 32rpx;
  }

  .effects-grid {
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 -8rpx;
  }

  .effect-item {

    margin: 8rpx;
    /* background-color: rgba(255, 255, 255, 0.1); */

    justify-content: center;
    align-items: center;
  }

  .effect-active {
    background-color: rgba(43, 101, 251, 0.2);
    border-width: 2rpx;
    border-color: #2B65FB;
  }

  .effect-icon-container {
    width: 112rpx;
    height: 112rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 16rpx;
    background-color: rgba(255, 255, 255, 0.1);
    margin-bottom: 12rpx;
  }

  .effect-icon {
    width: 48rpx;
    height: 48rpx;
    margin-bottom: 8rpx;
  }

  .effect-name {
    font-size: 24rpx;
    color: #FFFFFF;
  }
</style>